Simplest Ever Cascading Style Sheets (CSS) Tutorial

Cascade

CSS Tutorial Requirements:

  • Beginners Only
  • Basic knowledge of HTML
  • No knowledge of CSS
  • 5 – 10 minutes
  • 2 brain cells of any size and color

Insultingly Easy

Efficient use of Cascading Style Sheets means faster page load times for visitors and easier administration for webmasters. CSS are a set of rules that determine how page elements look (or how they will be styled). Elements are the items between the HTML tags that markup the structure of a web page document. For example, the <body> tag contains the body element.

There are 4 ways to use cascading style sheets: inline, embedded, imported and external. We’ll look at the one that’s the most powerful and widely used: external. With this method, an external CSS file is linked to the HTML document so that the CSS file can be easily changed to update the style of all HTML documents linking it.

Step 1 – Basic CSS Syntax

If you remember nothing else from this tutorial, make sure you embed the basic syntax for CSS deep into the crevasses of your brain:

selector {property: value}

If you become confused, just chant “selector, property, value” three times and that should help get you back on track. The above three components of a CSS rule can be defined as follows:

  • The selector is simply an HTML element such as h1, p, table, etc.
  • The property is the characteristic of the selector that you want to change such as color, font, width, height, etc.
  • A value is assigned to the property, such as a number defining the size of the font.

A real life CSS example using the above syntax would be:

h1 {color: black; }

The above rule tells a browser like Internet Explorer or Netscape to display all text between the heading tags <h1> and </h1> as black. A style sheet can set rules like this for any allowable HTML element. You will likely want to create style sheets with rules that make the heading, paragraph, link, and table text a certain color, font, and size. You’ll want the body background to be a certain color and maybe the tables to be a certain color.

Webmasters and developers might create a hundred or so rules in a given external style sheet. To get an idea of how this is done, expand the above example to include styling for font type, and size of the h1 selector:

h1 {color: black;
font-family: arial, helvetica;
font-size: 14pt}

Notice:

  • A colon, “:” separates the property and value declarations (as in color: black).
  • The “{” curly braces enclose all the property and value declarations.
  • A comma, “,” appears between alternate values (if the browser can’t find arial, it loads helvetica). A comma can also separate multiple selectors.
  • A semicolon, “;” follows all lines except the last one. That’s because the semicolon signifies that another rule is to follow.

What if you want to declare more rules? Go a bit further and add rules to style the paragraph tag (<p>) and throw in a background color for the body:

h1 {color: black;
font-family: arial, helvetica;
font-size: 14pt}
p {color: gray;
font-family: verdana;
font-size: 12pt}
body {background-color: white}

The above example should show the heading in black 14pt arial, paragraphs in gray 12pt verdana, and a white body background.

Tip: When declaring rules for fonts in your CSS file, remember to use a common font such as arial, verdana, helvetica, etc rather than an uncommon one. If your website’s visitors don’t have the font you reference, they will be welcomed by the unforgiving default font.

Step 2 – Open Notepad

From your Windows Start Menu, click Start > Programs > Accessories > Notepad

You have probably used Notepad if you are familiar with HTML, however, any text editor or HTML editor should work fine for this CSS tutorial.

Notepad - Text editor for CSS or HTML

Step 3 – Insert Code

Copy and paste the final code from Step 1 into the blank Notepad document as below:

CSS code in Notepad

This will be your external CSS file.

Step 4 – Save CSS File

In Notepad, go to File > Save As

Save As .css file

Find your Desktop under “Save in:” and highlight it. Type the name “default.css” in the file name field.

Type a file name

Little known secret: an external CSS file is just a text file (.txt) saved with a “.css” extension.

Step 5 – Create an HTML File

Open Notepad again as in Step 2. Type in the following HTML code:

CSS link code in HTML document

This will be your HTML document that links to the cascading style sheet file created in the previous steps. Notice that the above code appears as very basic HTML except for the line of code between the <head> and </head> tags which reads:

<link rel=”stylesheet” type=”text/css” href=”default.css”>

This is what links the external CSS file “default.css” to the HTML document and causes the HTML document to style itself accordingly.

Step 6 – Save as an HTML File

In Notepad, go to File > Save As

Save the file as in Step 4, except this time, save it on your Desktop as “mycsspage.htm.”

This is the HTML document file.

Step 7 – Open the HTML File

Look on your Desktop and double-click on the file you saved called “mycsspage.htm.” Your browser will open up and you should see this:

External CSS displayed in IE

If the page in your browser doesn’t look something like the above, then the most likely reason is due to a typo somewhere in the CSS file or HTML document. A typo in the code linking your CSS document will prevent any styling from appearing.

Notice:

  • The heading text is larger than the paragraph.
  • The heading color is black.
  • The paragraph color is gray.
  • The background color is white.

Note:

It is very important to enter the file location or url correctly in the HTML document that links to the external cascading style sheet. Otherwise it will not display. In our example, both the external CSS file and the HTML document were in the same directory (your Desktop). In the real world, instead of linking to your desktop, you would link to the location of the external CSS file on your web server, in which case the path might look like this:

<link rel=”stylesheet” type=”text/css” href=”http://www.mydomain.com/default.css”>

instead of this:

<link rel=”stylesheet” type=”text/css” href=”default.css”>

Experiment with changing the rules and adding new ones in the CSS file. Remember that you don’t have to use HTML tags like the font tag anymore, if you have defined fonts in an external cascading style sheet. By the way, you’ve just created a cascading style sheet.

There is much more to CSS than covered in this tutorial. There are also several versions of CSS: CSS1, CSS2, and CSS3 which become more powerful with each release. There are also advanced CSS features like class selectors that can greatly extend the webmaster’s control over the way web pages appear. Inheritance in CSS is another important concept that you may want to pursue.

Download a zip of the CSS Tutorial Files:

  • default.css
  • mycsspage.htm
Emory Rowland

I'm editor and keeper of the flame at Clickfire. I consider myself a fanatical blogger, entrepreneur and builder of Internet things from way back. My love for social media and success with organic search led me to start a SEO consulting venture. Apart from the Internet, I could be considered pretty worthless. More...

23 comments

  1. Asma

    this is a very informative site abt learning css as i’m beginner in css.but the problem i am having is that i have copied each and every word prescribed in the tutorial.but result is not same.what should i do know to have same accurate result? kindly guide me.

  2. Hi Asma, if you want to post the contents of your CSS and HTML files here, I’ll be glad to take a look. Thanks.

  3. Pawan Dagar

    Hi Asma, you are right the code above in the tutorial has some mistakes. Just copy and paste the following code in the HTML file replacing the old code and your problem will be solved.

    Dental Panachea

    Welcome to our world
    SITE UNDER CONSTRUCTION

    I have changed theheading and paragraph contents but that does not matters.
    You can also try this modified css file too. Just copy and paste following code in your default.css file and save.

    h1 {color: white;
    font-family: arial, helvetica;
    font-size: 14pt}

    p {color: black;
    font-family: verdana;
    font-size: 12pt}

    body {background-color: red}

    and just enjoy playing with colors :)

    Cheers!
    I love this site
    VERY USEFUL
    THANKS!

  4. Asma and Pawan,

    I corrected the error you pointed out. I tested it and it works now. I also placed a link to the files in case you want to download them.

    Thanks for visiting and I hope you become CSS experts!

  5. lucy

    I am totally new to this and to my surprise it worked first time for me! cheers!!

  6. chingsan

    Hi, please tell me how to add meta tags in css page of wordpress.com blog?
    And how can i switch css style webblog into html style?
    If there is somebody with a helpful hand will inform me by email: zdork@gazeta.pl
    I say thank you so much

  7. Nadeem

    Hi all, I am new here, I visit first time to this website. I am biginner in CSS. Hope I will become a gud in CSS in future using and learning this tips which are posted by guys…Thanks

  8. Emory Rowland

    @chingsan I don’t think you want to add meta tags to a CSS page. In WordPress, you have to have a plugin like HeadSpace or All In One SEO.

    @Nadeem Welcome. I hope you can find some good tips here that will help. Thanks for visiting.

  9. Paige

    Hi, I want to ask a couple of questions. I am trying to learn css: This seems simple enough. Can I use this to create my blog templates, or are there other markup scripts that need to be added before I can use it on my blog site? (I use blogger.com)
    Next, can I create the style sheets in my html editor that i have? I know html fairly well and that didn’t take me long to learn. CSS looks a little bit more difficult. Thanks.

  10. Emory Rowland

    Hi Paige, this is really just for educational purposes. I would take one of the default blogger templates and try modifying it once you get comfortable enough with CSS.

    I find CSS more difficult than HTML as well. I have used an HTML editor with no real problems in the past, so I don’t see why not. Best of luck with learning.

  11. Sare

    Excellent!

    Someone sent me a CSS file to customise one of my online profiles recently. I have a basic knowledge of HTML but don’t know CSS at all so I just copied the code into the relevant section and all was well. Now I want to tweak the colours, fonts and background of my profile a little and your tutorial has explained in very clear and concise much of the scary CSS code I was looking at. Thank you.

  12. Pradeep Aranha

    hi…
    I’ve a query,
    i want to put one Object as a link, and if i click on that, the data related to that object should come under it, & after reading the data, if i again click on the object, only object should remain on the screen.

    Please tell me the HTML code for this.

    example:

    ” What is your Name…?”
    Ans: My name is Pradeep Aranha

    Thanx & regards
    Pradeep Aranha

  13. hi….I have a query,
    Is there any CSS property to make font smooth in IE?

  14. Emory Rowland

    I haven’t tried it, but CSS3 has a font-smooth property.

  15. EL Tee

    At last! I have spent days parsing through different tutorials, etc., and you were able to, within 10 minutes, get me to where I needed to go. Thank you very much. The “gap” that many of these tutorials fail to explain (and where you did not fail) is explaining in detail how to create the html and css codes separately, but even more importantly, how they are to be SAVED! Now, for a newbie like myself, I understood that there was the whole bit that needed to be added to html docs (at least I think it does). However, I was unsure as to whether or not css. docs had similar needs. Turns out, it really doesn’t.

    I didn’t notice if you had a tutorial on how to create a web layout using CSS…do you?

    Thanks in advance.

    LT

    • Emory Rowland

      I’m glad you liked the tutorial, El Tee. I don’t have a tutorial on creating a web layout in CSS. I should try that one.

  16. I just copied the code into the relevant section and all was well. Now I want to tweak the colours, fonts and background of my profile a little and your tutorial has explained in very clear

  17. Dave

    This is the most clearly written and simple explanation of css I’ve ever seen.

    Great job!!!!

    Dave Schulman
    Private Investigator

    • Emory Rowland

      Thanks, Dave. I’m glad it was helpful.

  18. yash

    thanks for this………good work

    continuing this Cascading Style Sheets (CSS) Tutorial
    to going Advanced Level …………with same
    Tutorial expansive style view (in notpad) …………..

  19. fabulous. i’m still learning CSS but this definitely pointed out some best-practices i didn’t know about. thank you!

  20. alan

    I can’t figure out how to link in the html into the css file in notepad++

    • Emory Rowland

      alan, did you download the sample files? Just drop the default.css into the same directory as the html file.

Leave a comment