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
Different rounded corners
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus, enim eget dignissim dapibus, leo lorem volutpat augue, ut tincidunt mauris nisi vulputate tellus. Integer sollicitudin leo ut mi congue ultricies. Donec ex enim, porttitor eget nunc quis, gravida accumsan nisi. Donec vehicula aliquam lacus nec molestie. Morbi tempus semper augue, lacinia vestibulum sapien cursus nec. Pellentesque tincidunt libero id luctus aliquam. Ut sed elementum ipsum, sed cursus lacus. Phasellus condimentum massa quis ante feugiat eleifend. Etiam vehicula erat magna, vel vestibulum magna efficitur sed. Ut ut pretium urna, nec lacinia magna. Sed eu porttitor lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu purus tincidunt, volutpat felis in, scelerisque est. Maecenas non sapien sit amet ligula rutrum euismod ut vitae turpis. Nunc eleifend placerat imperdiet. Quisque tincidunt lectus laoreet volutpat laoreet. Nam laoreet dolor porta est porta tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse gravida porta finibus. Praesent eget pulvinar libero. Aliquam dignissim vehicula mauris, a porta metus dictum et. Ut elementum urna id tempus sagittis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic ...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus, enim eget dignissim dapibus, leo lorem volutpat augue, ut tincidunt mauris nisi vulputate tellus. Integer sollicitudin leo ut mi congue ultricies. Donec ex enim, porttitor eget nunc quis, gravida accumsan nisi. Donec vehicula aliquam lacus nec molestie. Morbi tempus semper augue, lacinia vestibulum sapien cursus nec. Pellentesque tincidunt libero id luctus aliquam. Ut sed elementum ipsum, sed cursus lacus. Phasellus condimentum massa quis ante feugiat eleifend. Etiam vehicula erat magna, vel vestibulum magna efficitur sed. Ut ut pretium urna, nec lacinia magna. Sed eu porttitor lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu purus tincidunt, volutpat felis in, scelerisque est. Maecenas non sapien sit amet ligula rutrum euismod ut vitae turpis. Nunc eleifend placerat imperdiet. Quisque tincidunt lectus laoreet volutpat laoreet. Nam laoreet dolor porta est porta tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse gravida porta finibus. Praesent eget pulvinar libero. Aliquam dignissim vehicula mauris, a porta metus dictum et. Ut elementum urna id tempus sagittis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic ...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus, enim eget dignissim dapibus, leo lorem volutpat augue, ut tincidunt mauris nisi vulputate tellus. Integer sollicitudin leo ut mi congue ultricies. Donec ex enim, porttitor eget nunc quis, gravida accumsan nisi. Donec vehicula aliquam lacus nec molestie. Morbi tempus semper augue, lacinia vestibulum sapien cursus nec. Pellentesque tincidunt libero id luctus aliquam. Ut sed elementum ipsum, sed cursus lacus. Phasellus condimentum massa quis ante feugiat eleifend. Etiam vehicula erat magna, vel vestibulum magna efficitur sed. Ut ut pretium urna, nec lacinia magna. Sed eu porttitor lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu purus tincidunt, volutpat felis in, scelerisque est. Maecenas non sapien sit amet ligula rutrum euismod ut vitae turpis. Nunc eleifend placerat imperdiet. Quisque tincidunt lectus laoreet volutpat laoreet. Nam laoreet dolor porta est porta tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse gravida porta finibus. Praesent eget pulvinar libero. Aliquam dignissim vehicula mauris, a porta metus dictum et. Ut elementum urna id tempus sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus, enim eget dignissim dapibus, leo lorem volutpat augue, ut tincidunt mauris nisi vulputate tellus. Integer sollicitudin leo ut mi congue ultricies. Donec ex enim, porttitor eget nunc quis, gravida accumsan nisi. Donec vehicula aliquam lacus nec molestie. Morbi tempus semper augue, lacinia vestibulum sapien cursus nec. Pellentesque tincidunt libero id luctus aliquam. Ut sed elementum ipsum, sed cursus lacus. Phasellus condimentum massa quis ante feugiat eleifend. Etiam vehicula erat magna, vel vestibulum magna efficitur sed. Ut ut pretium urna, nec lacinia magna. Sed eu porttitor lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu purus tincidunt, volutpat felis in, scelerisque est. Maecenas non sapien sit amet ligula rutrum euismod ut vitae turpis. Nunc eleifend placerat imperdiet. Quisque tincidunt lectus laoreet volutpat laoreet. Nam laoreet dolor porta est porta tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse gravida porta finibus. Praesent eget pulvinar libero. Aliquam dignissim vehicula mauris, a porta metus dictum et. Ut elementum urna id tempus sagittis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic ...Float
Yellow
Blue
Red
Grid layout
Left half
Right half
Left third
Right two thirds
Flex
Column 1
Column 2
Column 3
Flex
Column 1
Column 2
Column 3
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
XS - Extra Small (<576px)
S - Small (≥576px)
M - Medium (≥768px)
L - Large (≥992px)
XL - Extra Large (≥1200px)
XXL - Extra Extra Large (≥1400px)
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
Tabs
Cards
Stacking Starship
Stacking the most powerful rocket in history. Mars or bust!