Stockbyte/Stockbyte/Getty Images
Cascading Style Sheets (CSS) are an ideal way to format your web pages because you do not need as much code to style your documents like you do if you are just using HyperText Markup Language (HTML). Further, if you want to make a change to your layout, you do this just once in the existing style rules, which saves you a lot of time. Using your computer's text editor, create styles inside your existing HTML document to design your web page with a style sheet.
Step 1
Launch your text editor application and open a web page file.
Step 2
Locate the "<head></head>" portion of your code and position your mouse cursor between these elements. Type the CSS internal style entry as follows:
<head>
<style type="text/css">
<!--
-->
</style>
</head>
Step 3
Create a style that controls the display of the page body by entering the term "body" between the "<!-- -->" comment tags. For example, make a white background as such:
<!--
body { background: white; }
-->
Step 4
Set up a rule that distinguishes your "h1" page headings by assigning these a color such as "green." To illustrate:
h1 { color: green; }
Step 5
Make a rule to specify the font size of your paragraphs by entering the "p" selector and choosing a size value in pixels (PX), points (PT) or percentage (%). For example, set the size to 12 pixels like so:
p { font-size: 12px; }
Step 6
Save your web page and use your browser to open the file and preview the styles. If you need to make changes later, edit the CSS entries and save your file again.
Tip
- Refresh your browser window before attempting to view your CSS styles in your web page.
Photo Credits
- Stockbyte/Stockbyte/Getty Images
