≡ Menu

CSS 101 Tutorial

CSS 101 Tutorial
Cascading Style Sheets are a bit of a tricky beast in HTML. Given this fact, I wanted to dedicate an entire section to just this topic.

Let’s start with the basics, shall we?

What are Cascading Style Sheets (CSS)?

Well, we’ve already talked a little bit about HTML formatting tags (like <H1>), but that kind of formatting is embedded within your HTML code itself. What I mean by that is while you are typing out the HTML code for your page, you’ll actually have to type in <H1> in order to apply styles to some of your HTML. What if you don’t want to clutter your HTML with style code, but you still want to apply styles to your website… well that’s where CSS comes in.

Cascading Style Sheets actually exist as a completely separate file to your HTML code.

So basically what you’ll have is two files:

  1. Your Website’s HTML file (.html)
  2. Your Website’s CSS file (.css)

Pretty straight forward right?

Just creating the .css file will not get the job done though, you’ll need to actually tell your HTML code to ‘apply’ the styles inside the .css file to your webpage. To do this you’ll need to use a <link> tag. The <link> tag will tell your HTML code to link itself to the CSS file you specify. Let’s expand on our existing example and add a CSS file, here’s what it would look like:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Introduction to HTML
    </title>
    <!-- Here's the HTML code linking to a CSS file -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    Hello World!
  </body>
</html>

So the new code that should be highlighted here is:


What you should note here is that this is just another type of HTML tag. This is the <link> tag that I was talking about, but it has some additional attributes assigned to it.

The attributes for our <link> element are:

  • href
  • rel
  • type

These three attributes are required for the <link> tag in order to make it properly link your HTML code to an external CSS file.

href: this tells the HTML where the file actually exists so it can be linked properly. In our example we are looking for a ‘style.css’ file that exists in a ‘css’ directory. It’s also important to note that the location of the file will be relative to the HTML where the <link> tag is placed (more on this later).
rel: is used to indicate what type of file is being linked up.
type: is used to explain what format the stylesheet will be in… in this case it’s just plain text.

Let’s Review What We Just Learned

How to Set Up a CSS File

Now that you know how to link a CSS file to an HTML file, let’s take a look at what we should do to create and organize a CSS file. As I’ve mentioned, a CSS file is used to remove the code for the “style” of a webpage from the HTML file. It’s not mandatory to do this by any means, but it makes life a lot easier as your website grows!

Let’s say we want to change the default styles of our heading tags using CSS. Before we do that, let’s make a quick change to our webpage and add a little bit more content (I want to add H1 and H2 tags to spice things up a little):

<!DOCTYPE html>
<html>
  <head>
    <title>
      Introduction to HTML
    </title>
    <!-- Here's the HTML code linking to a CSS file -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Hello!</h1>
    <h2>This is my test webpage</h2>
    Put your feet up and stay a while!
  </body>
</html>

Here’s what that code will actually look like in a web-browser:

post-20130313

As you can see, we have a couple of headings and some plain old text in the body. But how do we do something like change the color of the headings? Well, since we’re indicating in our HTML code that we would like to <link> to a CSS file, how about we create a new file with the name style.css and put it in the “css” directory relative to our HTML file!

Right now these files are just on my desktop, so here’s what it looks like when I create a style.css file in a “css” directory relative to my HTML file:

This is the root desktop directory
post-20130313-02
This is inside the ‘css’ directory
post-20130313-03

What to Put Inside a CSS File

Now that we have our directory structure setup properly, let’s take a look at what would go inside our CSS file! Remember that we want to change the color of the heading text, so let’s assume our “requirement” is to change the <H1> tag to be red and the <H2> tag to be orange. Here’s what we would do:

/* this will exist inside the 'css/style.css' file */
h1
{
  color: red;
}

h2
{
  color: orange;
}

So, once we have populated our CSS file with the code above, here’s what our webpage looks like now:

post-20130313-04

Pretty neat huh? You can now call yourself a beginner at CSS! Congrats 🙂

Inline CSS

The next step down from the most “generic” of the CSS rules is the inline styling.

This is achieved by inserting styles right into the head section of your HTML code.

Let’s take what we learned about CSS type code and apply it to inline styles:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Introduction to HTML
    </title>
    <!-- Here's the HTML code linking to a CSS file -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      h1
      {
        color: pink;
      }
      
      h2
      {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
    <h2>This is my test webpage</h2>
    Put your feet up and stay a while!
  </body>
</html>

Okay, so what you can see is that we’ve created a <style> tag with some slightly different rules. Now instead of apply the red and orange colors to our <h1> and <h2> tags, we’ve used the pink and blue colors.

What’s interesting to note here is that CSS follows some basic rules. It will apply styles from most broad to most specific.

This means that first, the browser will attempt to apply the most broad CSS rules, which are the rules in the external CSS file. Then the browser will overwrite any similar rules that are found in the internal CSS section.

How that plays out is that the browser will apply the pink and blue colors to our <H1> and <H2> tags. This is the case because we’ve specific the color property to our tags in two places, but it picks the more specific rules, which again, are found in the internal style rules.

Inline Styling

Just to throw another log in the fire, there’s actually a third way to apply CSS.

That’s via inline styling. And as you may have guessed, inline styles are the MOST specific rules you can apply. This means that inline styles “trump” all other styling rules found elsewhere.

So if we were to change our code yet again to reflect an inline style rule for our <H1> tag, it would look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Introduction to HTML
    </title>
    <!-- Here's the HTML code linking to a CSS file -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      h1
      {
        color: pink;
      }
      
      h2
      {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 style="color: green;">Hello!</h1>
    <h2>This is my test webpage</h2>
    Put your feet up and stay a while!
  </body>
</html>

As you can see we’ve changed our <H1> tag to include the attribute style. It now reads:

<h1 style="color: green;">Hello!</h1>

This is an inline style as it’s applied directly to the tag element itself.

Since inline styles are the MOST specific of the CSS rules, that means that our <H1> tag will inherit only the green color!

Crazy eh?

Stay in the Know

If you’ve found this HTML / CSS tutorial to be of use, then perhaps you’d enjoy signing up for my mailing list. I’ll let you know when a new tutorial is available for your reading enjoyment! Just fill out the form below and you’ll also receive a one page PDF that outlines the 7 tools that Java professionals use every day. These are highly useful tools that took me 5 years of professional experience to discover, and you can have them in about 10 seconds… how’s that for technology, amazing!

Get started with a few of our tutorials and practice assignments right now:

Java Hello World

Getting Stuck On A Java Problem

SQL Group

{ 11 comments… add one }
  • Hanaka May 8, 2013, 10:39 pm

    Hi Trevor,

    Which web browser would you recommend for web development: Chrome, Firefox, Safari, etc.?

    Thank you!
    Hanaka

    • Trevor Page May 9, 2013, 8:13 am

      I prefer to use Chrome (only because it’s my browser of choice). But Firefox is also well suited for web development.

      Both Chrome and Firefox give you access to handy tools like FireBug (for FireFox) or the Chrome Developer Tools (just hit F12 while the browser is running).

  • Alex November 18, 2014, 2:42 pm

    Hi Trevor.
    I want to thank you for your tutorials. Please keep up the good work.

    Alex

  • Ryan November 17, 2015, 10:46 pm

    Great tutorials, Trevor. Are you on Twitter?

    -Ryan

    • Trevor Page November 26, 2015, 1:51 pm

      I am on twitter, but I’m unfortunately not very active. I’m @programwithjava

  • HD Wallpapers April 17, 2017, 11:14 am

    It’s awesome in favor of me to have a site, which is beneficial in support of my
    knowledge. thanks admin

  • --- August 10, 2017, 2:28 pm

    Congratulations

  • bestcandidacleanse August 17, 2017, 11:09 am

    When some onne searches for his vital thing, therefore he/she wishes to be available that in detail, thus that thing is maintained ovger here.

  • Gregory September 11, 2017, 11:21 am

    I have a blog as well, and I think I need to enhance the information
    I have on there. Anyways, I just wished to
    compliment you on your
    blog.

  • MAG Centre October 22, 2017, 6:00 pm

    I read this piece of writing fully on the topic of the comparison of newest and
    earlier technologies, it’s awesome article.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.