Basics of CSS
You already know that HTML is the language used to code content on a webpage. (If you don't, read about it on the Basics of HTML page.) HTML may allow you to insert text and images onto a webpage, but it is generally not used for design. Instead, web authors use Cascading Style Sheets, otherwise known as CSS, to design a site.
CSS does what HTML cannot: it colors the background of a page, arranges the different elements of a layout, controls the font family, and more. Because visual stimuli are so important to a viewer's web browsing experience, you will almost always want to incorporate CSS into your code.
Although CSS can be weaved directly into the body of your HTML code, it is easier and recommended that you create a separate document for your CSS. To insert your CSS into your HTML code, use the following tag in your HTML code:
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE.css" />
If you are using the template provided in the "Basics of HTML" page, you can place this code somewhere between the <head> tags.
In a CSS document, you do not use tags like in HTML. Instead, you use a selector and a declaration. Selectors most often correspond with the tags in your HTML code. Here is an example:
h1 {font-family: Times;}
As you may remember from the Basics of HTML, h1 are the characters that make up the <h1> tag for main headings. Here, the h1 is the CSS selector. In CSS, you do not need to include brackets around the selector; instead, leave a space after the selector and use curly brackets to declare the design you wish to implement. Appropriately, the curly brackets and the content within are called the declaration.
Declarations must be made using a particular format. As you see above, "font-family" is followed by a colon and "Times" is followed by a semicolon. "Font-family" is considered a property, while "Times" is considered a value. Properties are always followed by a colon and values are followed by a semicolon.
You can specify several properties and values within one declaration. Here is an example:
h1 {font-family: Times; color: blue; font-size: 75%;}
There are three corresponding values and properties in this example. They are separated from one another, but they all modify the same thing: anything within the <h1> tags in the HTML code.
A CSS property can also include multiple values. For example, for the font:family property, not every font is supported by every browser, so you may wish to list multiple font families, or you may wish to list the general font-family as sans-serif or serif. The declaration would be formatted like this:
font-family: Arial, Helvetica, sans-serif;
As you can see, the different values are separated by commas, not semicolons, yet the list must end with a semicolon. Ending with a semicolon allows you to tack on other properties and values in the declaration.
Here are a few basic CSS properties that you may find useful:
font-family: -- You can change the font family to fonts like Arial, Times, and Verdana, or you can list a general family like serif or sans-serif.
color: -- This changes the color of your font. If you want to change background color, see below.
background-color: -- Changes the color of a selected background. If you apply this to the body element, it will change the entire body color.
font-size: -- You can change the size of your font using percentages (%), pixels (px), or ems (em). Using pixels is the most precise method of changing a font, but using percentages will automatically adjust to different screen sizes.
width: and height: -- You can change the width and height of a box using percentages (%), pixels (px), or ems (em). Again, pixels may be the most precise, but percentages are useful for automatically adjusting to different screen sizes.
text-align: -- This property allows you to align a body of text. Use "center," "left," or "right" for this property. Most browsers left-align their text as a default.
/* NOTES */ -- You can add notes in your CSS to help you organize it. Anything within the "/* */" symbols will not be visible on your website.
color: -- This changes the color of your font. If you want to change background color, see below.
background-color: -- Changes the color of a selected background. If you apply this to the body element, it will change the entire body color.
font-size: -- You can change the size of your font using percentages (%), pixels (px), or ems (em). Using pixels is the most precise method of changing a font, but using percentages will automatically adjust to different screen sizes.
width: and height: -- You can change the width and height of a box using percentages (%), pixels (px), or ems (em). Again, pixels may be the most precise, but percentages are useful for automatically adjusting to different screen sizes.
text-align: -- This property allows you to align a body of text. Use "center," "left," or "right" for this property. Most browsers left-align their text as a default.
/* NOTES */ -- You can add notes in your CSS to help you organize it. Anything within the "/* */" symbols will not be visible on your website.
Important note on the <div> tag and CSS:
If you wish to assign a declaration to content within <div> tags, you must first assign that <div> with either a class or an id. Use class for repeated elements and use id for elements only appearing once.
Example:
HTML
<div class="box">This content will be boxed</div>
CSS
.box {width: 75%; height: 75%; background-color: green;}
<div class="box">This content will be boxed</div>
CSS
.box {width: 75%; height: 75%; background-color: green;}
If you use a class within your <div>, the class name must start with a period (.) in the CSS file.
If you use an id within <div>, the id must start with the pound sign (#).
Note: saving your CSS code
In order for your code to work online, it must be saved in a .css format before it is uploaded to a server. It is best to write code using a format-free application like Notepad or, better yet, Notepad++.
For more CSS help and tips, visit the Additional Resources page.
