Help & Support

How to style 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 is 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}.

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 to style 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 colour of an element via:
  hex values: background-color:#f00;
  certain colour 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 colour , 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 colour of elements on the page. Mostly used in reference to font colors, however colour also affects things like bullets from list items.
  Example: colour :#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.

What's CSS3

Like HTML, CSS has been worked on and improved since its inception. CSS1 was officially accepted by the World Wide Web Consotrium (W3C) in 1996. It largely dealt with controling typography and gave web developers some abilities to style block-level elements. When CSS2 was released in 1998, many more features were included to give web developers more control. Elements could be styled/controled to behave more like HTML table cells, which was a design standard at the time. There were more powerful ways to style elements and position them on the page.

Like CSS2, CSS3 offers even more control to web developers/designers than before. Many styling techniques like drop-shadows, rounded corners, gradients and transparent backgrounds, which all had to be implemented via images before, will be offered in CSS3's library. Various different selectors and rules for different types of media (screen sizes & print) will also be added or upgraded in CSS3. The styling of generated content will also receive greater support.

Overall, CSS3 promises a lot of great new functionality that will end up making life a lot easier for web developers. While the development process of CSS3 is coming along at a slower pace than previous versions, some CSS3 features have been implemented into various modern browsers.

Basic CSS3 properties and what they do

The following are some CSS3 properties that you can start using now. Many of them won't be supported in current versions of Internet Explorer (6-8), and the large majority of them will require special vendor-specific prefixes to make them work. Vendor-specific prefixes consists of adding -"prefix"- at the beginning of a rule to designate which browser you are targetting. For example, to target FireFox, -moz- would be added prior to a CSS3 rule. -webkit- would be added to target Safari and Chrome browsers and -o- for Opera browsers. Again, Internet Explorer browsers largely don't support CSS3 rules, however IE9 will support quite a few of them. In most of these rules you'll see three versions of the same code, with different prefixes in front of two versions of the code, and a third version without a prefix for browsers that natively support the feature.

• Border-radius

  Adds rounded corners to elements.

  Examples: -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;

  Different values can be added to different corners as well. The following example, border-radius:5px 12px 4px 9px;, adds a 5px radius to the top left, a 12px radius to the top right, a 4px radius to the bottom right and a 9px radius to the bottom left.

  Currently supported in IE9, Safari 3.1+, FireFox 1.0+, Chrome 1.0+, Opera 10.5+

• Box-shadow

  Adds drop shadows to elements.

  Examples: -moz-box-shadow:2px 2px 3px #000; -webkitbox-shadow:2px 2px 3px #000; box-shadow:2px 2px 3px #000;

  In these examples the 2px values represent the x and y axis for the drop shadow. The 3px represents the size of the drop shadow and finally the #000 represents the colour of the drop shadow.

  Currently supported in IE9, Safari 3.0+, FireFox 3.5+, Chrome 1.0+, Opera 10.5+

• Column-count & Column-gap

  Make text flow to multiple columns, emulating print layouts.

  Examples: -moz-column-count:2; -moz-column-gap:20px; -webkit-column-count:2; -webkit-column-gap:20px; column-count:2; column-gap:20px;

  The column-count determines how many columns should be created for text to flow into. The column-gap adds a defined space between each column so they don't touch each other.

  Currently supported in Safari 3.1+, FireFox 3.5+, Chrome 1.0+

• Text Shadow

  Give text drop shadows. This was originally a CSS2 property that was dropped and is being brought back with CSS3.

  Example: text-shadow:2px 2px 5px #000

  Much like the box-shadow example; the 2px values represent the x and y axis for the drop shadow. The 5px represents the size of the drop shadow and finally the #000 represents the colour of the drop shadow.

  Currently supported in Safari 1.0+, FireFox 3.5+, Chrome 2.0+, Opera 9.6+

• Box-sizing

  The box-sizing property accepts three possible values: content-box, border-box or inherit, which declare how an element's size should be rendered.

  Examples: box-sizing: content-box; / box-sizing: border-box; / box-sizing: inherit;

  In most browsers, elements are displayed as content boxes by default. Padding and borders are rendered outside the specified width and height of the element. This means that an element with a width of 300px and height of 100px, with a border of 2px and 20px padding will actually take up the space of 342px wide and 142px tall. By declaring box-sizing: borer-box; the padding and borders are declared inside the element. This is a very useful rule to have if you are using percentages for widths.

  Currently supported in IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+

• @font-face

  Embed fonts to websites, aside from the normal websafe fonts!

  Example: #font-face{
  font-family: "Font example";
  src: url(fontExample.otf) format("opentype");
  }

  As long as the fonts you are using have licenses that allow for font embedding (here is a list of some that do) you can display fonts outside of the normal websafe fonts on your website.

  Currently supported in Safari 3.2+, FireFox 3.5+, Chrome 2.0+

• RGBA

  A different background-color value. Declare colors via RGB, with the A representing Alpha Transparency.

  Example: background-color:{255, 233, 50, .6);

  The above declaration creats a yellow colour , with 60% opacity.

  Currently supported in Safari 3.1+, FireFox 2.0+, Chrome 1.0+

Additional Resources

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