Cascading Style Sheet (CSS)

Style attribute and tag

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

Style tag

A slightly better way to configure look and feel is to declare CSS rules in the STYLE tag in the header and then refer to the tag by their name, ID, or class This paragraph's style is set by a rule referring to the P tags

Selectors

Link tag

The best way to apply CSS rules is to declare them in a separate CSS file and load it with the LINK tag. Always use this method.

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

Rounded corners inline

Dimension

Portrait
Landscape
Square

Position

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

Side bar

This is the left sidebar

Main content

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

Side bar

This is the right sidebar