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.
CSS Selectors
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 but this text is green
Background color
This background of this paragraph is red but the 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
Yellow
Blue
Red
Grid layout
Left half
Right half
Left third
Right two thirds
Flex
Basic row
Column 1
Column 2
Column 3
Flex grow
Column 1
Column 2
Column 3
Fixed width + flex
Column 1
Column 2
Column 3
All columns grow equally
Column 1
Column 2
Column 3
Proportional relative growth
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
Tailwind Exercises
Continue with the Tailwind section here: Lab 2 Tailwind
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)