CSS Cheat Sheet

Linking your Style Sheet

Option One: Adding in the <head> element

    <!DOCTYPE html>
    <html>
        <head>
        <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
        </style>
        </head>
        <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

        </body>
    </html>

Option Two: External Style Sheet (creating a styles.css file in the same folder)

index.html

    <!DOCTYPE html>
    <html>
        <head>
        <link rel="stylesheet" href="styles.css">
        </head>
        <body>
        
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        
        </body>
    </html>

styles.css

    body {
        background-color: powderblue;
      }
      h1 {
        color: blue;
      }
      p {
        color: red;
      }

Styling a single HTML element

    <h1 style="color:blue;">A Blue Heading</h1>

    <p style="color:red;">A red paragraph.</p>

Padding and Border

<----100px---->Padding 100px + solid border

<div style="border: 2px solid black; padding: 100px;"></div>

Margin

<----100px---->This element has margin 100px

<div style="border: 2px solid; margin: 100px;"></div>

Basic colour, font and alignment styling

        body {
        background-color: lightblue;
        }

        h1 {
        color: white;
        text-align: center;
        }

        p {
        font-family: verdana;
        font-size: 20px;
        }