CSS Cheat Sheet
A quick reference list of basic CSS properties for changing text, layout and colour of HTML elements, as well as how to include them in your web page.
Not sure what CSS is, perhaps Google it or use Codecademy to learn!
Using Styles
An external CSS file
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>Within the HTML header
<head>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>Inline in the HTML
<p style="color:red;">Some red text</p>Colors & Borders
| color: color>; |
Element Color - eg. red | #FF0000 | rgb(255,0,0) | hsl(0,0,0)
|
| background-color: color>; | |
| background-image: url(image.gif); | |
| border-color: color>; | Border color of element |
| border: 1px solid color>; | Width, style and color of border defined together |
| border-radius: 5px | 50%; | Curves the corners of the border (in pixels or %) |
Text Styles
| text-align: left; |
Horizontal alignment - left | center | right
|
| text-decoration: underline; |
Text decorations - eg. none | underline | line-through
|
| font-family: fontname; |
Font face (typeface) - eg. Verdana, Arial, Helvticia (*)
|
| font-size: 16pt; |
Font size or height - eg. 12pt | 15px
|
| font-weight: bold; |
Font weight (boldness) - eg. bold | normal | 200
|
| text-shadow: 1px 1px #000; | Adds shadow to text (bottom right color) |
| text-transform: uppercase; |
Changes all text to uppercase or lowercase
|
| line-height: 1.2; | Modifies the height of text line, unitless number is ratio of font size; |
| word-spacing: 1.2em; | Modifies the distance between words |
| letter-spacing: 1.2em; | Modifies the distance between letters |
Size & Layout
| width: 400px; |
Width of HTML element - eg. 100px | 50%
|
| height: 100%; |
Height of HTML element - eg. 20px | 100%
|
| margin: 5px; | Margin - space around an element, or distance between two elements |
| margin-top: 1px; |
Top margin. Also try -bottom: -left: or -right:
|
| padding: 5px; | Padding - distance between an elements contents and its border |
| padding-top: 1px; |
Top padding. Also try -bottom: -left: or -right:
|
| position: position; |
Specifies the position of an element: relative, absolute, fixed
|
| static | Default position of elements |
| relative | Sets element's position to relative to its default position on the page |
| absolute | Sets element's position to relative to its closest positioned parent element |
| fixed | Pins element's position, will not move with the rest of the document |
| z-index: 2; | Specifies how far back or how forward an element appears on the page |
| display: display; | Allows you to control how an element flows vertically or horizontally |
| inline |
Elements take up as little space as possible, width | height cannot be adjusted
|
| block |
Elements take up the width of their container, height can be adjusted
|
| inline-block |
Elements appear next to each other, width & height can be adjusted
|
| float: left; |
Moves element as far left or as far right as possible on web page, left | right
|
| clear: left; |
Prevents floating elements on left or right side of element, left | right | both
|
CSS Lists
| list-style: none; | Clear existing bullet types set by html list tags |
Basic Named Colors
Both HTML color codes (hexadecimal values) and their CSS color names are shown in the chart below.
| CSS Color Name | HTML HEX Code | Sample Color Box | Sample Word |
|---|---|---|---|
| Pink | #FFC0CB | Pink | |
| Magenta | #FF00FF | Magenta | |
| Red | #FF0000 | Red | |
| Orange | #FFA500 | Orange | |
| Yellow | #FFFF00 | Yellow | |
| Brown | #808080 | Brown | |
| Lime | #00FF00 | Lime | |
| Green | #008000 | Green | |
| Cyan | #00FFFF | Cyan | |
| Blue | #0000FF | Blue | |
| Purple | #800080 | Purple | |
| Violet | #EE82EE | Violet | |
| Gray | #808080 | Gray | |
| Black | #000000 | Black | |
| White | #FFFFFF | White |
More Color Options
| color: #000000; | Hexadecimal colors, specify values of red, blue, and green |
| color: rgba(x, y, z, a); | uses RGB color syntax, a for alpha(opacity) |
| RGB values range from 0 to 255; Alpha is represented as a percentage | |
| color: hsla(x, y, z, a); | HSLA stands for Hue, Saturation, and Lightness, and Alpha(Opacity) |
| H ranges from 0 to 360; S, L, and A are all represented as percentages | |
| color: transparent; | Makes element transparent; |
(*) Note on Fonts
Find new fonts at Google Fonts.
Insert the <link> attribute found on the site after locating desired font in the <head> section.
Serif vs Sans-serif
Serif - fonts that have extra details on the ends of each letter. Examples include
fonts like
Times New Roman or
Georgia, among others.
Sans-serif - fonts that do not have extra details on the ends of each letter. Instead,
letters have straight flat edges like
Arial or
Helvetica