Cascading Style Sheets
Written by Amanda Kern
Cascading Style Sheets
As we noticed quickly, HTML by itself is a very simplistic and not so great looking language. On it's own we have very little control over our web page designs. This is where CSS (Cascading Style Sheets) enters the picture. If used properly CSS can not only make your web pages look more professional and consistent, but they will also load faster and become much easier to edit.
Incorporating CSS into our web pages
As with most things, there are a few different ways we can incorporate CSS to style our web pages. Let's take a look at each method.
- Internal or Embedded Styles. Internal styles are beneficial to web pages that you must apply styles to just one page of a web site. Internal styles are incorporated into the <head> portion of your web page. Here's an example:
- External Stylesheets. External stylesheets are the most beneficial to use because they allow you to edit your styles for your entire site by simply changing one file. This decreases file size and maintenance/edit time. There are two ways to incorporate external CSS to your HTML files: using the link or the import method. Let's take a look at each method:
With the link method there are ways (which we'll spare the confusion during this introduction) to create alternative stylesheets. The import method is useful if you are trying to hide styles from older browsers such as netscape. The import option also allows you to apply multiple external stylesheets. You can also use the @import command inside of CSS documents (without the style tags)
- Inline styles. Inline styles are styles you can apply to individual elements of your html document. They appear in the html code, and not in the <head> tag. The make editing much more challenging because styles are not in a central location. In fact, as of XHTML 1.1 the style attribute will be deprecated, or phased out of html. Therefore, it's use is discouraged. Let's take a look at what an inline style looks like:
Commenting your CSS
As with most programming there is a way to comment your CSS so that you can make notes to yourself or others that might edit your files. There are two main ways to comment your CSS:
//This creates a single line comment
/* This creates a multi-line comment that
will display for as many lines as needed */