Main content
This is the main content. This is the main content. This is the main content.
Lab 2 - Cascading Style Sheets
Styling with the STYLE attribute
Style attribute allows configuring look and feel right on the element. Although it's very convenient it is considered bad practice and you should avoid using the style attribute
ID selectors
Instead of changing the look and feel of all the elements of the same name, e.g., P, we can refer to a specific element by its ID
Here's another paragraph using a different ID and a different look and feel
Class selectors
Instead of using IDs to refer to elements, you can use an element's CLASS attribute
This heading has same style as paragraph above
Document structure selectors
Selectors can be combined to refer elements in particular places in the document
This paragraph's red background is referenced as
.selector-2 .selector3
meaning the descendant of some ancestor.
Whereas this span is a direct child of its parent
You can combine these relationships to create specific styles depending on the document structure
Colors
Foreground color
The text in this paragraph is red butthis text is green
Background color
This background of this paragraph is red butthe background of this text is green and the foreground white
Borders
Solid fat red border
Dashed thin blue border
Padding
Padded top left
Padded bottom right
Padded all around
Margins
Margin bottom
Margin left right
Margin all around
Rounded corners
Rounded corners on the top
Rounded corners at the bottom
Rounded corners all around
Dimension
Portrait
Landscape
Square
Relative
Portrait
Landscape
Square
Absolute position
Portrait
Landscape
Square
Fixed position
Checkout the blue square that says "Fixed position" stuck all the way on the right and half way down the page. It doesn't scroll with the rest of the page. Its position is "Fixed".Fixed position
Z index
Portrait
Landscape
Square
Float
Yellow
Blue
Red
Grid layout
Left half
Right half
Left third
Right two thirds
Flex
Column 1
Column 2
Column 3
React Icons Sampler
XS - Extra Small (<576px)
S - Small (≥576px)
M - Medium (≥768px)
L - Large (≥992px)
XL - Extra Large (≥1200px)
XXL - Extra Extra Large (≥1400px)
Bootstrap
Grid system
Left half
Right half
One third
Two thirds
Sidebar
Main content
Sidebar
Responsive grid system
Column A
Column B
Column C
Column D
Responsive dramatic
1
2
3
4
5
6
7
8
9
10
11
12
Tables
| Quiz | Topic | Date | Grade |
|---|---|---|---|
| Q1 | HTML | 2/3/21 | 85 |
| Q2 | CSS | 2/10/21 | 90 |
| Q3 | JavaScript | 2/17/21 | 90 |
| Average | 90 | ||
Responsive tables
| Very | long | set | of | columns | Very | long | set | of | columns |
|---|---|---|---|---|---|---|---|---|---|
| Very | long | set | of | columns | Very | long | set | of | columns |
Favorite movies
Aliens
Terminator
Blade Runner
Lord of the Ring
Star Wars
Favorite books
Forms
Dropdowns
Switches
Range
Addons
$0.00
$0.00
Responsive forms
Responsive forms 2
Cards
Stacking Starship
Stacking the most powerful rocket in history. Mars or bust!