Angelfire.com

How do I style my HTML with CSS?

Styling HTML with CSS can be done with a few different methods, however we're going to just talk about the most basic and more acceptable ways to do it. The first thing to do is to create a new .css style sheet, and then link it to your HTML file.

The HTML code for linking to a style sheet looks like this:
<link href="direct_path_to/filename.css" rel="stylesheet" type="text/css" />.
The 'direct_path_to/filename.css' would the the folder that you put your css file into (if you put it into a folder other than your root directory) and the filename being whatever you called your .css file.

Once your CSS file is created, you can begin styling your HTML in three different ways. The first would be to style the HTML tags directly. For example, if I wanted the background of my website to be blue, in my CSS file I would type: body{background-color:blue}

The problem with styling HTML tags directly is that EVERY instance of a particular tag will look that way. For something like the body tag, that's ok...because there's only one of those. However, you may not want every single <p> tag on your site to have a border and a background to it. This is where the next to options for CSS styling comes in: Classes and IDs.

Styling with classes and ids are very similar to styling HTML tags directly, but the difference is that class and id names need to be created in the CSS document and then referenced in the HTML document. Let's use the blue background as an example again. Instead of referencing the body tag, as was done above, we would instead need to create a class name. Let's call this class "blue."

The CSS rule for the blue class would look like this: .blue{background-color:blue}. Notice the period before the class name of blue? That is how you let CSS know that "blue" is a class. If you wanted blue to be an ID, you would put a # mark before it. That would look like this:#blue{background-color:blue}.

The difference between classes and ids are that classes are meant to be used multiple times per page, while ids are meant to be used only once per page. Below is an example of classes and an id.

You'll notice that both the divs have the same values for height, width, padding and their borders. These are all defined in the .exBox class. The differences come when the #exID is declared. That adds the red background value, a margin on the left hand side, that pushes the div away from the first one, and the text color changes to white.

Basic CSS properties and what they do

There are LOTS of CSS properties that you can apply to your CSS rules. We already saw some in the "How do I style my HTML with CSS?" section, but here are a bunch more and a bit of a description for what they do. Keep in mind that there are far more CSS properties than what are being listed here, and if you head on over to w3schools.com you'll find an even more extensive list.

• background-color

  Set the background color of an element via:
  hex values background-color:#f00;
  certain color names background-color:blue;
  or rgb values background-color:rgb(244, 34, 253);

• background-image

  Set a background image to an element. background-image:url(location/filename.jpg) This will tile the background image in the specified element. To set a background image to appear only once, add this css property: background-repeat:none.

• border

  Sets the border color, weight and style of an element.
  Example: border:3px solid #000 - creates a 3px width solid black line around an element. border:3px dashed #000 creates a dashed line around an element.

• clear

  Specifies the sides of an element where floating elements are not allowed. Commonly used to negate floating elements all together.
  Examples: clear:both; clear:left; clear:right;

• color

  Set the color of elements on the page. Mostly used in reference to font colors, however color also affects things like bullets from list items.
  Example: color:#f00;

• display

  The most common values for the display property are: inline, block and none. Inline elements have no line breaks before or after them. They only take up as much height and width as their content demands. Block elements have line breaks before and after them. They can have heights and widths applied to them. None has no visual display at all. It essentially hides the element on the page.

• font-family

  Declares the font family to be used.
  Example: font-family:Arial,Helvetica,sans-serif;

• font-weight

  Declares the weight of the font.
  Example: font-weight:bold;

• font-size

  Declares the size of the font.
  Examples: font-size:14px; / font-size:100%; / font-size:2em;

• font-style

  Declares the stye of the font.
  Example: font-style:italic;

• float

  Set element to float to the right, left or not at all in relation to other elements on the page.
  Examples: float:left; / float:right; / float:none; (none is the default for elements).

• height, max-height, min-height

  Sets the height for an element. Height sets a defined height, where as max-height would indicate that the height can be no more than the set maximum height, and min-height would indicate that the element can be no smaller than the minimum height.
  For example, a div with a min-height of 100px would never be smaller than 100px in height. While a div with a max-height of 300px would never be taller than 300px. A height of 400px means that regardless of the amount of content within the element, that particular element will always be 400px in height.

• letter-spacing

  Sets the amount of space inbetween letters.
  Example: letter-spacing:1px;

• line-height

  Sets the line height of elements.
  Example: line-height:20px;

• margin

  Sets the margin value of an element. Margins can be set on all sides of an element:
  margin:10px (this example sets a 10px margin around the entire element.)
  Or on individual sides: margin-right:15px

• padding

  Set the padding of an element to move content inwards from the element's borders. (adding padding to an element also affects how much height and width that element takes up on the page.)
  Example: padding:20px

• position

  The default position value is static. An alternative postion rule is position:absolute. Using this, you can make an element appear at any position you want to on your page by also declaring values for bottom, left, right, top.
  Example: position:absolute; top:45px; right: 100px; - this will set an element to be 45px from the top of the page and 100px from the right of the page. No matter how big or small the browser window may be.

• text-align

  Use this property to align text to the left, center, right or justify.
  Example: text-align:center;

• text-decoration

  Use this property to assign certain style properties to text.
  Examples: text-decoration:none;, text-decoration:underline;, text-decoration:overline;, text-decoration:line-through;

• width, max-width, min-width

  Sets the width for an element. 'Width' sets a defined width, where as max-width would indicate that the width can be no more than the set maximum width, and min-width would indicate that the element can be no smaller than the minimum width.
  For example, a div with a min-width of 100px would never be smaller than 100px in width. While a div with a max-width of 300px would never be wider than 300px. A width of 400px means that regardless of the amount of content within the element, that particular element will always be 400px wide.

• word-spacing

  Sets the spacing between words.
  Example: word-spacing:10px;

• z-index

  Z-indexing works with position absolute or relative elements. Like Photoshop's layers, elements with higher z-indexes will appear to be on top of elements with lesser or no z-indexes.

Additional Resources

• CSS3.com
• W3schools CSS Tutorials
• CSS3 Please Cross-Browser Rule Generator
• CSS Cheat Sheet
• CSS 2.1 & 3 Cheat Sheets