When you're building web pages, you use HTML to create the structure of the pages and JavaScript to create the interactivity, but CSS is where you define how the pages will look.
CSS is not hard, in some ways it's almost easier than HTML. The trickiest part is that there are so many different options for creating and modifying your styles and style sheets. For today's lesson we'll start with a simple style sheet that includes some of the styles most designers apply to web pages: changing the fonts.
The most common adjustment to web pages is to the fonts on the page. With CSS, you can change the color, style, size, and face of your fonts.
The First Step in Creating a Style Sheet: Decide What You Want to Style
Before you can write a style sheet, you need to decide what those styles should be. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different elements and sections of the page. For instance, you might want all text to be 12px tall, but you want your H1 headlines to be larger than that.
Here is my list of styles I want to apply to my page:
- Standard paragraph text should be black, arial narrow, and medium sized
- Top level (h1) headings should be red, bold, and small-caps
- Second level headings (h2) should be blue and italic
- Notations should be standard text with a yellow background
The CSS Properties We’ll Use
Here
font-family— changes the face of the font. You can use specific font names or generic terms such asserif,sans-serif,monospace,courier, andfantasyfont-family : arial, geneva, helvetica;font-size— changes the size of the font. Define the size as an absolute size, relative size, percentage, or length.font-size : smallfont-style— changes the style from normal to italics or oblique.font-style : italicfont-variant— changes the look of the text from normal to small-capsfont-variant : small-capsfont-weight— changes the font to boldfont-weight : boldcolor— changes the color of your text. Use either named colors or hexadecimal codescolor : #ff0000background-color— changes the color behind the text. Use either named colors or hexadecimal codes.background-color : yellow
Once you've decided on the styles you want, you need to write your style sheet. To create the styles I listed above, place the following in the <head> element of your HTML document:
<style>
p { color : #000000; font-family : arial narrow; font-size : medium; }
h1 { color : #ff0000; font-weight : bold; font-variant : small-caps; }
h2 { color : #0000ff; font-style : italic; }
.note { background-color : #ffff00; }
</style>
Remember, if you're not using HTML5, you should include the type="text/css" attribute in the STYLE element as well.
The first three of the above styles will apply to the elements: <p></p>, <h1></h1>, and <h2><h2>. The last style selector is used with the class attribute. Since I called it .note, I might use it with the SPAN element.
For example, put the following HTML into your web page with the above style sheet:
<p>
This paragraph would be in the p style. <span class="note">Note: inheritance means that this text will have the same styles as the paragraph itself</span>.
</p>
The styles set by the first tag will be inherited by any tag that is within it. This is why we don't have to redefine the font color or size for the note.
