How to Format Web Pages Using CSS
Cascading Style Sheets, or CSS, describe the presentation and layout elements of Web pages. You may define any of hundreds of different rules in your CSS files, including font formatting, appearance, colors and element spacing. You may also create and use your own classes and ID selectors for extra programming freedom. You use CSS files by referencing them in your HTML pages. While you may find it a pain to modify your entire site when adding CSS to it, in the long run it will make modifying your entire site quick and simple.
Other People Are Reading
Instructions
-
-
1
Open a blank text file and save it in the root directory for your website files. Use the ".css" extension, and give it a name, for example, "myStyleSheet.css."
-
2
Create type selectors by using existing HTML elements and specifying their formatting. For example:
p {
margin: 4px 0px;
text-align: left;
}
Call this element in your HTML files by typing "<p>" and entering your text, and then closing the tag with "</p>."
-
-
3
Create class selectors with the dot operator (the "." symbol). For example:
.content {
height: 50px;
font-size: 12px;
}
Call this class in your HTML files by typing "<p class="content">" and entering your text, and then closing the class by typing "</p>." Whenever you call the "content" class in your HTML files, anything within that element will have these formatting rules applied. If you have a "p" type selector as well as this class, the class rules override the type selector rules when used with a "p" element in your HTML.
-
4
Create ID selectors using the hash (the "#" symbol). For example:
#navigationBar {
width: 900px;
height: 25px;
margin: 15px 0px;
padding: 0px;
}
Call this ID in your HTML files by typing "<div id="navigationBar">" and entering your text, and then closing it by typing "</div>." You should not use ID selectors more than once on your HTML pages. If you use them more than once for different sections of your page, you may create an ID conflict and see unexpected formatting that you will have to correct. In this example, you likely won't have more than one navigation bar per HTML file.
-
5
Save and close your CSS file, and then upload it to your server. Open each of your HTML pages and include the following line within the "<head>" section of each document:
<link type="text/css" rel="stylesheet" href="path_to_file/myStyleSheet.css" media="screen" />
Make sure you use the correct path to your CSS file in each document. Save your HTML documents, close them and upload them to your server.
-
1
Tips & Warnings
If you have several rules with the same declarations, you may use one line to define them all. For example, if you want the "h1" and "h2" tags to use the same font family, type "h1, h2 {font-family: font_name; }"
