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 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

Box model

margin

border

padding

content

box-sizing

content-box: width 200px plus padding and border

border-box: width 200px includes padding and border

Rounded corners

Rounded corners on the top

Rounded corners at the bottom

Rounded corners all around

Different rounded corners

Dimension

Portrait

Landscape

Square

Display

Inline

Inline 1Inline 2Inline 3

Inline-block

Inline-block 1Inline-block 2Inline-block 3

Block

Block 1Block 2Block 3

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 reprehenderit doloremque adipisci iste deserunt. Inventore, hic. Esse nihil unde aut, dignissimos eos consequatur veniam distinctio? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius hic reprehenderit doloremque adipisci iste deserunt. Inventore, hic. Esse nihil unde aut, dignissimos eos consequatur veniam distinctio? Starship

Yellow

Blue

Red

Grid layout

Left half

Right half

Left third

Right two thirds

Main content

This is the main content. This is the main content. This is the main content.

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

XS - Extra Small (<640px)

S - Small (≥640px)

M - Medium (≥768px)

L - Large (≥1024px)

XL - Extra Large (≥1280px)

2XL - Extra Extra Large (≥1536px)

Lab 2 - Cascading Style Sheets

Styling with the STYLE attribute

ID selectors

Class selectors

This heading has same style as paragraph above

Document structure selectors

Colors

Foreground color

Background color

Borders

Padding

Margins

Box model

box-sizing

Rounded corners

Dimension

Display

Inline

Inline-block

Block

Relative

Absolute position

Fixed position

Z index

Float

Grid layout

Left half

Right half

Left third

Right two thirds

Side bar

Main content

Side bar

Flex

Media Query Demo

React Icons Sampler