CSS Reference Guide

When you need a little extra help with CSS, this article is a great resource!

Last updated - July 12, 2023

It is important to remember that CSS is used to style HTML. You can either write your CSS code in its own file or include it in line with your HTML. If you have lots of styling to add it is best to use a separate CSS file rather than including it on your HTML file. In order for your CSS styles to apply to your HTML code, you must link your CSS file to your HTML file! This is done by placing a tag similar to this one in the <head> section of your HTML:
<link href="mystylesheet.css" type="text/css" rel="stylesheet">

CSS Selectors:

CSS selectors tell us what set of HTML elements our CSS rules will apply to. For example, you can style all of the <h1> elements in your HTML by using the h1 selector in CSS. You can also style HTML elements using the class attribute. To do this you will define classes in your HTML, and style them in your CSS by adding a period before the class name.

body	Use the body selector to style everything included in your HTML's body tag.
h1	Use the h1 - h6 selectors to style your header tags.
p	Use the p selector to style all of your HTML p tags, or paragraphs.
ol	Use the ol selector to style your HTML ol tags, or ordered lists.
ul	Use the ol selector to style your HTML ul tags, or unordered lists.
li	Use li to style all of your HTML li tags, or the list items for ordered and unordered lists.
.class	Use the class selector to style sections of your HTML defined by you. This is done by adding a class name to the end of an HTML tag: <p class="example"> In your CSS file the selector for your class should be a period followed by the name you have chosen for the class: .example
style	Style tags can be used to add in-line styling to HTML without having a separate CSS file. Just add style into your tag followed by the properties and values you would like to apply as we have done in the following example: <h1 style="font-family:cursive; color:green">Hello World!</h1>

CSS Declarations:

After you have defined your CSS selectors you will add styles by placing declarations inside of { } curly brackets. A declaration is made up of a property and a value. The property defines what you want to style. The value defines how you want to style the chosen property. Your property should always be followed by a colon(:) and your value should be followed by a semi-colon(;).

This chart contains examples of a few CSS properties and values. There are many other properties that can be used in CSS, but these are the most common!

font-size	Used to set the size of text. Font size values are usually a number in pixels. Example: font-size:10px;
font-family	Used to apply a certain font to a section of text. There are many different fonts that can be used as a value here. Example: font-family:arial;
color	Used to set the color of text. Values can be one of the 140 browser-supported color names or a hex code. Hex codes always include a # and a combination of six letters or numbers. Example: color:gold; or color:#ffd700;
background-color	Used to set the background color of an HTML element. Values can be one of the 140 browser-supported color names or a hex code. Hex codes always include a # and a combination of six letters or numbers. Example: background-color:dodgerblue; or background-color:#1e90ff;
text-align	Used to set text alignment. Values can be left, right, or center. Example: text-align:center;
opacity	Used to set the opacity or transparency. Values range from 0 to 1 (using decimals,) with 0 being completely transparent and 1 being completely opaque. Example: opacity:0.4;

Color & Font

Part of what makes building a website fun is adding your own unique touch using different colors and fonts!

Color can be added to a website using the color property for text and the background-color property for backgrounds. You can use a browser-supported color name or a hex code. Try using the following websites to find different color options, or check out our article Coding & Color.

Using the font-family property you can apply different fonts to your website. The table below lists several fonts that are available to use on most browsers.

Arial	Impact	Courier
Helvetica	Monospace	Cursive
Fantasy	Tahoma	American Typewriter
Apple Chancery	Bradley Hand	Brush Script mt
Snell Roundhand	Luminari	Chalkduster
Marker felt	Trattatello	Arial

Example

Here is an example of a complete section of CSS. It includes a selector (h1,) and four different declarations. The declarations are listed between curly brackets { } and include colons(:) and semi-colons(;) in the right places.

h1 {
  font-family:fantasy;
  font-size:20px;
  color:blue;
  text-align:center;
}

This section of CSS will style all of the text in our h1 header tags to be fantasy font, 20 pixels, be the color blue, and be center-aligned on our website.

Troubleshooting your code:

Is your CSS file linked to your HTML file?
- Is the link placed in the head section of your HTML? Did you include both opening and closing head tags?
- Is your CSS file name spelled correctly in your link? The CSS file name in your link should match your CSS file exactly.
- Is the syntax used in your link correct? Check for the correct placement of quotation marks, equal signs and < >. Your link should look something like this:
  <link href="mystylesheet.css" type="text/css" rel="stylesheet">
Is your syntax correct in your CSS file?
- Make sure you have included both opening and closing curly brackets { }.

- Check for the placement of colons (:) and semi-colons (;), quotation marks (" " ) and hyphens (-).
- Check your spelling.
- Check your spacing.
Are you using valid properties and values?
- Make sure that all of the values and properties you are trying to use are valid. For example, text-color is not a valid property. You would need to use color instead.
- If using color check that the color you have chosen is valid. Is the color name spelled correctly? Is it a color name that is recognized by browsers? Is the hex code you typed correct? Did you remember to include the # before the color code?
If everything in your CSS file looks correct, then check your HTML file.
- Make sure that the tag you are trying to style using CSS exists and is spelled correctly in your HTML document.
Check and double-check your code!
- CSS code in particular can be long and detailed. It is easy to overlook a small mistake or typo! To prevent having to search through a very long file for typos, try to check for mistakes and make sure your code works often while you build your website.
Read the lesson and requirements again.
- If you are having trouble, it can help to read the lesson and requirements again. Make sure you understand the lesson and make sure your code includes all of the requirements that the challenge or checkpoint asks for. Sometimes, the autograder can be picky and wants your code to include the same words, spacing, and punctuation as the requirements or example.