Reference guide for Shay Howe HTML & CSS

Lesson 1: Building your first Web Page

Understanding HTML common words

Elements

a

Attributes

<a href="#">LinkExample</a>

Setting up the HTML Document Structure


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Shayhowepractice</title>
    </head>
    <body>
        body
    </body>
</html>

Understanding Common CSS Terms

Selectors

p {...}

Properties

p { color: ...; font-size: ...;}

Values

p {color: orange; font-size: 16px;}

Working with selectors

Types

Element selector div {...}
Class selector .some-class {...}
ID selector #id {...}

Lesson 4: Opening the box Model

How are elements displayed?


p {
    display: [block|inline|inline-block|none];
}

none will completely hide an element as if that elemnt doesn't exist. Any nested elements will also be hidden