CSS Example

You need to see a fast CSS example. You are just learning how to create a website. Let's get right to it.

• Create a folder on your desktop called css-example.
• Right click this link: css-example-external-style-sheet.css and select "Save Target As..." (control + click for Mac). Save the file into the css-example folder you just created.
• Right click this link: css-example-web-page.html and select "Save Target As..." (control + click for Mac). Save the file into the css-example folder you just created.
• Open css-example-web-page.html in your browser. You'll see a simple page that gets its style from css-example-external-style-sheet.css.
• Click View > Source (for Internet Explorer) or View > Page Source (for FireFox). Notice this line of code in the HTML:

  <link rel="stylesheet" type="text/css" href="css-example-external-style-sheet.css">

  That line of code tells your browser to use the external stylesheet css-example-external-style-sheet.css to style css-example-web-page.html. It is called an external style sheet because the styles are in a separate file as opposed to being in the HTML of the page.
• Open css-example-external-style-sheet.css in notepad or some other text editor. Look at the comments (anything between /* and */). The comments will explain the stylesheet and offer suggestions about how to learn from it. The best way to learn from css-example-external-style-sheet.css is to change something, save the file, then refresh (or open) css-example-web-page.html to see how the page was changed.
• Try changing all of the styles (one at a time). There is a lot you can learn from this. Don't worry about messing anything up. You can always fix it. If not you can always download the files again and start over. No biggie.
• You can even use css-example-external-style-sheet.css as the basis for your own website. Just add other styles as you need them while building your site.

New to CSS? See this related article: CSS Tutorial for Beginners.

Style sheets can be a little tricky in more complicated page layouts. But, once you get things set up, using CSS is a breeze. When you change your site you will be sooooo happy that you took the time to set the stylesheet up. As you know, if you change a style in the stylesheet it changes the style of every HTML page that is linked to it... fast.

How did you do with the CSS example above? Don't worry if you didn't get everything. You will. Better yet, try another CSS example now!