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 div'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
.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
Fat red border, yellow background, big padding above and left
Fat blue border, yellow background, big padding at bottom
Fat yellow border, blue background, big padding all around
Fat red border, yellow background, margin at bottom
Fat blue border, yellow background, centered (margins both sides)
Fat yellow border, blue background, big margins all around
Rounded corners
Rounded corners on the top
Rounded corners at the bottom
Rounded corners all around
Different rounded corners
Dimension
Landscape
Portrait
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
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic laudantium repellat.Horizontal layout with float
Yellow
Blue
Red
Grid layout
Left half
Right half
Left third
Right two thirds
Flex
Column 1
Column 2
Column 3
Media Query Demo
This demo uses CSS media queries to change colors based on screen width:
- Default is White text on Green background
- 750px to 1000px: Black text on Yellow background
- 1000px to 1250px: White text on Blue background
- Above 1250px: White text on Red background
React Icons Sampler
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 grid system
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 | Very | long | set | of | columns | Very | long | set | of | columns |
Favorite movies
Aliens
Terminator
Blade Runner
Lord of the Ring
Star Wars
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!
XS - Extra Small (<576px)
S - Small (≥576px)
M - Medium (≥768px)
L - Large (≥992px)
XL - Extra Large (≥1200px)
XXL - Extra Extra Large (≥1400px)