By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

An Introduction to CSS

This short Introduction to CSS, will help beginners get accustomed with the principles of web-design.

Edited: 2015-12-03 13:05

CSS is used to change the look and feel of HTML pages. Normally browsers have their own default styles that they apply to HTML Elements, but web-designers may also specify their own.

A lot of older attributes of HTML are not even mentioned in Brugbarts Tutorial, because they have practically been replaced by CSS Properties. CSS makes it much easier to create and maintain your website.

There are now three styling methods that are used in web design, all covered in this Tutorial. Web designers can either chose to keep their CSS embedded in the page, or keep it in External StyleSheets.

Inline Styles

Benefits. None. It is therefor best to reserve its use for testing purposes, and avoid its use in live pages.

You can write the properties as inline using the "style" attribute.

For instance, common usage of an old attribute like "border", would be to remove the border on image-links, but instead of using the border attribute, we now use the Border property of CSS, which also allows for richer styling. Example:

<p><a href="about.html"><img src="MyImage.jpg" alt="" style="border:0;"></a></p>

Noticed how i added the "border:0;" specification? Thats usually not the best way to do it, nor the easiest way in the long run!

Embedded Styles.

Benefits. The load times for your site is Decreased. Beware that External StyleSheets are cached by the browser, so those may be more effective to use when having multiple pages.

If you got a lot of images, you would need to apply these styles to each and every one of them, not very practical. A much easier way, would be to include the styles in the head section of our site, and simply apply them to all img elements inside a elements, in one declaration. Example:

<!DOCTYPE html>
<html lang="en-US">

    <title>My first Website</title>
    <style type="text/css">
    a img {
     border: 0;

      <p>My first Website.</p>
      <img src=""
      alt="" ></a></p>


Noticed how i declared the styles for img elements? The result is that, all images on the page will have the given style applied to them. Unless we specifically declare a different style, which overwrites the old.

External Stylesheets

Benefits. Bandwidth savings for you, as well as lower load times for users. Because External Stylesheets are cached by the browser, they won't have to be downloaded for each separate page.

There are several ways to include External StyleSheets, off hand i'm going to mention the 2 i know of. The first:

<style type="text/css">
  @import url("StyleSheet.css");

Include the above in the head section of your document, then create a file called "StyleSheet.css", and place it in the same directory. The Content of your stylesheet would be:

img { border: 0; }

The next way doesn't require the style tag, but instead add the following to your head section:

<link rel="stylesheet" type="text/css" href="StyleSheet.css">

Of cause there are many more specifications then "border", you can use. So i suggest beginners follow the HTML/CSS tutorials; already experienced html coders should use the reference, and follow the related tutorials if in doubt.

Past: An Introduction to HTML Next: Paragraphs and Headings in HTML