Create Next App

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

Hello my name is Zhenming Gao
Some jibberish below...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit itaque velit accusantium provident iste odit libero modi quo a aspernatur, quod dolorem ducimus omnis voluptate hic in, non perferendis neque!

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

AI2

Hi again.

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

wd-your-class here.

wd-your-class above.

wd-ai-class-selector here

wd-ai-class-selector 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 structurewd-ai-selector-5 here

Nested depth is 5

wd-ai-cascade here

Colors

Foreground color

The text in this paragraph is red but this text is green

wd-ai-fg here wd-fg-color-black here

The text in this paragraph is blue but this text is red

Background color

This background of this paragraph is red but the background of this text is green and the foreground white

p block with high contra

ai p block with high contra

Borders

Solid fat red border

Dashed thin blue border

thin and dashed and blue border

ai's fat and dashed and yellow border

Padding

Padded top left

Padded bottom right

Padded all around

+ Huge padding top (50px) left (300px)

wd-ai-padded: 200px

Margins

Margin bottom

Margin left right

Margin all around

Box model

parent background (shows through the margin)

border (the red ring)padding

content

margin: the 20px gray gap (transparent)

box-sizing

content-box: width 200px plus padding and border

border-box: width 200px includes padding and border

ai: this box uses border-box

border-box

width: 500px; 
height: 250px; 
padding: 30px; 
border: 10px solid magenta; 
background-color: grey; 
margin-bottom: 10px; 
color: white

Rounded corners

Rounded corners on the top

Rounded corners at the bottom

Rounded corners all around

Different rounded corners

+ Another Different rounded corners

wd-ai-corners

Dimension

Portrait

Landscape

Square

we are given width 200px and height 100px so the text overflows but the size of the block stays put

The quick brown fox jumps over the lazy dog

Display

Inline

Inline 1Inline 2Inline 3

Inline-block

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

Block

Block 1Block 2Block 3

wd-ai-display sample div

Force inline

block here but force inline with wd-display-inline

Positions

Relative

Portrait

Landscape

Square

wd-ai-relative

nudges itself with right 10px and bottom 100px

Absolute position

Portrait

Landscape

Square

another

wd-ai-absolute

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

AI fixed

fixed corner

Z index

Portrait

Landscape

Square

BACK

wd-ai-zindex

Float

float left

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

wd-ai-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?

Grid layout

Left half

Right half

Main content

20% float

50% float

Flex

Column 1

Column 2

Column 3

Column 1

Column 2

Column 3

Column 1

Column 2

Column 3

75px

grow

75px

left stays, right shrinks

grow

Media Query Demo

This demo uses CSS media queries to change colors based on screen width:

AI: less than 750px is White text on Purple background
750px to 1000px: Black text on Yellow background
1000px to 1250px: White text on Blue background
Above 1250px: (Changed) White text on Black background

React Icons Sampler

AI:

Lab 2 - Cascading Style Sheets

Styling with the STYLE attribute

ID selectors

Class selectors

This heading has same style as paragraph above

wd-your-class above.

wd-ai-class-selector above

Document structure selectors

Colors

Foreground color

Background color

Borders

Padding

Margins

Box model

box-sizing

Rounded corners

Dimension

Display

Inline

Inline-block

Block

Force inline

Positions

Relative

Absolute position

Fixed position

Z index

Float

Grid layout

Left half

Right half

Side bar

Main content

Side bar

Flex

Media Query Demo

React Icons Sampler