What is CSS?

 

Not this...

CSS Album Cover

 

...THIS!

CSS sample code

Cascading

Style

Sheets

Using Style Sheet Templates

Thousands of free style sheet templates exist online and are available to be downloaded. However, a basic understanding of CSS will make using them a lot easier, and will allow you to create professional looking websites more efficiently.

Katie's WRA 210 Site

What is CSS?

The links to the left provide an array of CSS templates, such as the one that is used on this website. The template that I used for my WRA 210 page was also found online. These templates contain the CSS information that is used to control the aesthetics of a website. The CSS layer is used for presentation and is kept seperate from the HTML, which is the content layer. Therefore, CSS simply controls what the web page looks like (such as font types, colors, headers, borders, etc.), but it is not used to add text or images. To understand CSS on a more practical level, let's look at both the design and code view for my WRA 210 page that was created with a CSS template.

Design View

Linking to an External Style Sheet

A style sheet can be created internally, that is, inputted directly in the code above the HTML code in Dreamweaver. The CSS will then control the rest of the page. However, when using templates, the CSS is created externally and then linked into the HTML document from another location. When a template is downloaded, the following items are contained in a zipped folder.

Downloaded Items

The images folder contains the graphics that are a part of the CSS template. The file index.html is the HTML document that is modified by the user. And finally, style.css is the actual style sheet file.

In order for the style sheet aesthetic elements to work in the HTML document, the CSS must be linked from another location. This is what the top portion of the index.html code will look like:

Linking CSS

The line of code that begins with <link... specifies the location of the CSS information, and tells the browser to apply these aesthetic elements to the web page. Thus, the external style sheet is linked to the HTML document.



Additional CSS Resources

CSS Basics

This site contains all the basics of coding style sheets, including linking to an external style sheet and how to create your own internal style sheet.  It also describes how to define CSS elements and to change the layout with divisions, and pretty much anything else a beginner would want to learn about CSS.  Each chapter describes a basic subject regarding CSS in simple, readable language and then gives coding examples that show how different aesthetic components can be created.

CSS From the Ground Up

The article “CSS from the Ground Up” is a perfect tutorial for beginners.  It explains how to create CSS from scratch and how to apply it to basic HTML elements.  It carefully walks the reader through every step and focuses on the source code rather than the design view, so that the reader can gain a true understanding of exactly what is going on in the code.

Holy CSS Zeldman!

This source contains links to anything and everything that relates to style sheets.  It might seem a bit overwhelming at first, but after getting used to how the site is organized it becomes very easy to find information.  This site contains links to CSS tutorials, guides, templates, layouts, and tips and techniques.  The site can also direct you to related articles on web design, accessibility, and Java Script.