CSS Cheat Sheet

About the CSS Cheat Sheet

CSS is the formating language of the web. This cheat sheet introduces simple formatting including topics like where to place your CSS. How to format a paragraph and how to format the background of a page.

Table of Contents

Access a student website

your-name.clubengineer.org/file-manager.php

Inline CSS

<!DOCTYPE html>
<html>
<head>
<title>My first HTML document</title>
<style>
h1 {color: red;
}
</style>
</head>
<body>...

Link an external CSS file

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

 Then in theme.css

h1 {color: red;
}

Font formatting

h1 {
font-family: "Times New Roman", Georgia, Serif;
color: navy;
font-size: 20px;
}

or

h1 {
font-family: Verdana, Arial, Sans-serif;
font-size: 200%
color: #333333;
}

or

p {
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
color: #333333;
margin-left: 30px;
}

Backgrounds

body {
background-color: silver;
}

 or

body {
background-image: url("background.png");
}

HTML Colour Codes

HTML Colour Tool here.

body {
background-color: silver;
}

or

body {
background-color: rgb(192, 192, 192);
}

or

body {
background-color: #C0C0C0;
}

                                                                                                                                                                                                                                                                                                            

Toggle menu