Cascading Style Sheets

CSS is code that changes the appeareance of HTML.

One place you can put CSS in a style tag that's a child of the head tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        p {
            color:blue;
        }
    </style>
</head>
<body>

</body>
</html>

1. Selector

Tags are selected by creating something called a selector.

<p>I am a description with tag p.</p>

the simplest selector is the type selector, and is a just tag name without <> brackets.

p{
text-decoration:underline;
}

1.1 The syntax of a selector

selectors have a very specific syntax that needs to be followed or the CSS not worked.

selector{
    property:value;
}

1.2 Selecting multiple tags with one selector

Selectors with select all matching tags on the page and apply the properties.

<h3>Members</h3>

<ul>
    <li>Rekt - Vocals</li>
    <li>Face-like - Vocals</li>
    <li>DJ Regex</li>
</ul>

li {
    font-size: 24px;
}

1.3 Selecting only tags that a childreen of another tag

A descent selector can be used to select tags only if they are childreen of another tag.

<h3>Members</h3>

<ul>
    <li>Rekt - Vocals</li>
    <li>Face-like - Vocals</li>
    <li>DJ Regex</li>
</ul>

ul li {
    font-size: 24px;
}

1.4 Selecting tags based on actions and conditions

A pseudo-selectors is a modifier that can be added to a selector to select a tag only when a certain condition has occured .

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline; color:green;
}

1.5 Using pseudo-selectors to narrow selection criteria

The :first-child pseudo-selector can be applied to narrow the amount of child tags selected.

<h3>Members</h3>

<ul>
    <li>Rekt - Vocals</li>
    <li>Face-like - Vocals</li>
    <li>DJ Regex</li>
</ul>

ul li:first-child {
    color: red;
}

2. Reset CSS

put this css on the top to reset all css tags value.

html, body, h1, h2, h3, h4, ul, ol, li, p, a {
    padding: 0;
    border: 0;
    margin: 0;
}

3. Box Model

The Box Model is the way to describe the borders and spacing it beetwen the boxes of each tag.

There are 4 parts of the box model:

Content area. ( content area containts your actual content (text, images, etc )
Padding. ( Padding is added to the top, bottom, left and right of the content area )
Border. ( Border is added around top, bottom, left and top of the padding )
Margin. ( Border is added around top, bottom, left and top of the border)

Example 1 box model with border-bottom

use padding to put more space between border and content.

h3 {
    margin: 30px 0 30px 30px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 1px;
}

Example 2 add space page document

add 15px of space between the edge of the window and all of the other content on the page.

body {
    padding: 15px;
}

Example 3 Ordered List