Readings

3. CSS values and units. Important.

4. Styling Lists. Just a bit.

5. Styling Links. The section on links as buttons.

Length and Size

Absolute Units

• Pixels (px) are referred to as absolute units because they will always be the same size regardless of any other related settings.

• mm, cm, in: Millimeters, centimeters, or inches.

• pt, pc: Points (1/72 of an inch) or picas (12 points.)

Length and Size

Relative Units

• em: 1em is the same as the font-size of the current element
• rem: The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size
• vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.

Percentange

You can also use percentage values to specify most things that can be specified by specific numeric values. This allows us to create, for example, boxes whose width will always shift to be a certain percentage of their parent container’s width.

body {
    width: 70%
}

Colors

• Keywords such as red, green there are a ton
• Hex codes such as #e0b0ff. Your browser dev tools can help with these.
• RGB values such as rgb(255,0,0)
• HSL values such as hsl(0,100%,50%)

Colors with Transparency

• RGBA codes such as rgba(255,0,0,0.5)
• HSLA codes such as hsla(240,100%,50%,0.5)
• via the separate opacity property

List Specific Properties

• list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
• list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
• list-style-image: Allows use a custom image for the bullet, rather than a simple square or circle.

Can use other properties!

• line-height is very usefull.
• Box model properties such as padding, margin, etc…

Controlling List Counting

• start: Just what you think…
• reversed: Just what you think…
• value: Allows you to set specific numbers to <li>s.

Link States

• Link (unvisited): The default state that a link resides in, when it isn’t in any other state.
• Visited: A link when it has already been visited (exists in the browser’s history), styled using the :visited pseudo class.
• Hover: A link when it is being hovered over by a user’s mouse pointer, styled using the :hover pseudo class.

Link States

• Focus: A link when it has been focused — this is styled using the :focus pseudo class.
• Active: A link when it is being activated (e.g. clicked on), styled using the :active pseudo class.

For Examples…

See Styling links as buttons