CSS | Kai Ze

Resources

Tutorial by Dave Gray

Free YouTube Tutorial.

"Keep striving for progress, not perfection. And a little progress every day goes a very long way." - Dave Gray

Getting Started

CSS, mainly used for HTML although possible to use for XML.

Apply Styles

Three ways to apply style:

External - <link rel="stylesheet" href="/css/style.css">
Internal - <style></style> in head, syntax exactly same as external.
Inline - <p style="color: blue">, better to prevent this for separation of concern.

Final defined styles will override the previous one.
The previous one will only be persisted when specified as `!important`, which should be prevented most of the time, as the code should have designed properly without overrules.

CSS Validation

Validation can be done on w3c website by uploading the CSS files.

01 - Selectors

Three common levels of selector:

Element - `p {…}`.
Class - `.toc {…}`. In HTML, <nav class="toc">. The ideal way, as more specific than generic element. A class can appear multiple times in HTML.
ID - `#toc {...}`, In HTML, <nav id="toc">. Less ideal as too specific, where an ID should only appear once in HTML. ID is more useful for operations inside HTML/JS, not for CSS.

Use <span class="..."> inline, for special inline styles.

Inheritance


                        body {

                          border: 1px solid #111;

                          font-size: 20px;

                        }

All the child of body inherits the font-size but not the border, the behaviours are by default.
Use the Inheritance to make sure the codes are DRY (Don't Repeat Yourself).

02 - Colours

Four main ways to set colours (especially for <color> and <background>):

`#colorName`
`rgb(10, 20, 155)` or `rgba(10, 20, 155, 0.8)`
`#hexColorCode`
`hsl(10, 50%, 40%)`

Make sure colour contrasts are good through coolors.co.

03 - Units and Sizes

Absolute Length - px: Not ideal for font as it does not respect user browser font size settings. Commonly used for `border`.
Percentage - %: Not ideal for font. Commonly used for `width`.
Relative Length - rem or em: `rem`, ideal for font size, relative to root. `em`, relative to parent.
Character Count - ch: Can be used to set `width`, limit by character count.
Viewport - vw or vh: `vw`, viewport width, `vh`, viewport height. Similar to `%`, but viewport ignores the scrollbar makes it less ideal. Viewport height is often used for setting `min-height` of a block.

04 - Box Model

Everything in CSS is a box.

All elements are built from 4 parts:

Content
Padding
Border
Margin

Every element can be inspected (F12), and the 4 parts will be shown under computed.
Every part can have their top, right, bottom and left values set seperately, e.g.:
margin: top, right, bottom, left;

Many elements have some default `em` margins and paddings, if want to get rid of all those to take full control, a CSS reset can be used:


                    * {

                      margin: 0;

                      padding: 0;

                      box-sizing: border-box;

                    }

05 - Typography

The way a text is arranged and presented (font).

font-size
text-decoration
text-transform
text-align
text-indent: 2em
line-height: 1.5; - A useful setting.
letter-spacing
word-spacing
font-weight
font-style
font-family: Extra families can be imported in HTML or CSS.

Remember `rem` is the preferable way to set font size.
Some elements do not inherit parent's font settings by default, it can be set through `font: inherit;`.

06 - Styling Links

Some attributes that have default special values:

text-decoration
cursor
color

Some states (more specificity):

a
a:visited
a:hover
a:focus
a:active

07 - List Styles

Important attributes:

list-style-type
padding
list-style-image: url("/image/path")
<ol start="3" reversed>
<li value="15">

: (Pseudo-Class) and :: (Pseudo-Element)


                    li:nth-child(even) { 

                      ... 

                    } 

                    
                    ul li::marker { 

                      ... 

                      content: "Prefix... "; 

                    }

08 - Display

Display Types:

block: Such as paragraph. By default, 100% width within the given space.
inline: Such as span. Attribute like height is constrained within parent block, adding padding to it can sometimes cause it to overlap another element as the parent block does not change with it.
inline-block: Hybrid, stay in line while not limited to parent height.
none: Hide the element, but not the ideal way as it completely hides the element from the page and unable to read by assistive reader.