Main content
This is the main content. This is the main content. This is the main contnet.
Lab 2 - Cascading Style Sheets
Styling with STYLE attribute
Style attribute allows configuring look and feel right on the element. Although it is 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 alll the elements of the same name, e.g., P, we can refer to a specific element by its ID
Here is an other paragraph using a different and a different look and feel
Class selectors
Instead of using IDs to refer to elements, you can use an elements 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 red background is referenced as
.selector-2 .selector-3
meaning the descendant of some ancestor.
Whereas this span is a direct child of its parent
You can combine these relationships to create specfic styles depending on the document structure
Colors
Foreground color
The text in this paragraph is red but this text is green
Background Color
The 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 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
Check out the blue square that says Fixed position stuck all the way on the right and half way down the page. It does not 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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Yellow
Blue
Red
Grid Layout
Left Half
Right Half
Left third
Right two thirds
Flex
Column 1
Column 2
Column 3
React Icons Sampler
Bootstrap
Grid system
Left half
Right half
One third
Two thirds
Sidebar
Main content
Right 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 (<57px)
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
Star Wars
Forms
Dropdowns
Switched
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!