Home > Tutorials > CSS > Basics

Basics

If HTML is the meat and potatoes of our web page, CSS is the plating design - schlop on a plate won't be winning you any Iron Chefs! For this tutorial, we will be using the file "MyFirstPage.html", used through the HTML tutorial. If you do not have a file, feel free to download one here.

In order to use CSS, place the code between a <style> tag, or link to your file (with a .css extension) using a link tag, like the example below:
<link rel="stylesheet" type="text/css" href="style.css">
The "rel" attribute specifies the relationship this file has to the current web page. The "type" attribute specifies what type of file we are looking at, and the "href" attribute specifies where the file is located.
Note: While it is recommended that you use link to external style sheets, as it reduces redundant code, the tutorials in this examplel will be placing CSS inside a <style> tag, in order to reduce the number of files you will have to look at simultaneously.

Let's start with how to specify a style. A style is listed in the following form:
tag { attribute: value; . . . attribute: value; }
To specify a style for a specific id or class, use the form #id or .class

One last note - in this tutorial there will be a lot of talk about the size of an element. There are two ways to specifiy size:

  • An absolute length. Absolute lengths can be specified using a number of units:
    • in
    • cm
    • mm
    • px - While pixels are relative to the canvas, they are NOT relative to the screen resolution, something we can not control.
  • A length relative to the parent element, using one of the following units:
    • X% (a percentage)
    • Xem (Multiply the parent element's size by X)
    • Auto (Let the browser evenly distribute any available real estate - this is particularly useful for centering)

While it is perfectly legal to use either absolute or relative terms when describing width, height, margin, and padding, you should always strive to use relative terms, for the following reasons:

  1. If you have a user who is browsing on a small resolution (such as 800x600), they may have to scroll horizontally - not exactly user friendly. Similarly, if a user is browsing on a relatively large resolution (like 1760x1320), your site will seem rather tiny, and hard to read.
  2. If you decide to edit the style of a parent element, you will need to edit the style of each of their children (and their children, and so on..).

Using relative sizes will fix both of these issues. However, there are some points where using absolute sizes is necessary. You may want to keep the height of a button, for instance, at a specific height. Always keep the user's experience in mind when developing your styles, and consider all possible screen resolutions when developing. As time goes on and you have a better idea of which resolutions are used to view your site, you can alter your styles so they fit those resolutions better.

To save space, all of these values will be referred to in the future as "An absolute or relative length."

With that, let's get started on some of the most basic styles out there:

background
Specifies the background of the current element. Accepted values:
  • 1 of the 16 named HTML colors:
    • Black
    • Silver
    • Gray
    • White
    • Maroon
    • Red
    • Purple
    • Fuschia
    • Green
    • Lime
    • Olive
    • Yellow
    • Navy
    • Blue
    • Teal
    • Aqua
  • 3 or 6 digit hex code
  • rgb(x,x,x), where x is a number between 0 and 255 (inclusive)
  • an image, using url(<image location>)
background-repeat
Used when background is an image, specifies how the background image should be repeated. Accepted values:
  • repeat (repeats both horizontally and vertically)
  • repeat-x (repeats in x-direction)
  • repeat-y (repeats in y-direction)
  • no-repeat
background-attachment
Used when background is an image, specifies if the background image should scroll with the user or stay fixed. Accepted values:
  • scroll
  • fixed
background-position
Used when background is an image, specifies the initial position of the background image. Position is listed in the form <horizontal position>,<vertical position>. If no vertical position is listed, the image will be centered vertically. Accepted values for the positions are:
  • An absolute or relative length
  • top
  • bottom
  • left
  • right
  • center
Percentages and absolute lengths may not be used with the directional keywords.
color
Specifies the foreground (i.e., text) color. Accepted values are the same as the 'background' attribute, sans images:
  • 1 of the 16 named HTML colors
  • 3 or 6 digit hex code
  • rgb(x,x,x), where x is a number between 0 and 255 (inclusive)

Excercise: Open "MyFirstPage.html". Start styling your page. Add at least one distinct background color, and one distinct color to your page.

If your code looks like mine, you've succeeded, and can go on to another lesson.

Next>>

Comment on this page:

Your information Name:
Email:
Hide Email?
Enter the 5 characters shown.
Request another image.
Prove your human:
Comments Overall page rating:

Comments

No one has commented on this lesson yet. You can be the first!