Adding Some Styles

You’ve learned HTML and you’ve just skimmed the surface of the power behind the web. You haven’t even learned a programming language yet. But before we do that, we shall learn CSS. CSS stands for Cascading Style Sheets and is used to change the way the browser renders HTML, to make websites look good.

Prepare For CSS

CSS is stored in .css files, so in a folder where you want this to be make your index.967f2895.html file and a main.css file. Now let’s take the HTML from the last lesson, and add a few crucial elements to link to the CSS file

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
          <p>
              Hello HTML! <b>This is bold</b>, <i>this is in italics!</i>, <a href="http://google.co.nz">Go to Google</a>
          </p>
    </body>
</html>

There are only two new elements in this file, a <head> element and a <link> element. The <head> is an element where we store a lot of our behind the scenes stuff, mainly metadata. In this case, we’re storing our <link>, which is used to link in the CSS file. You can see that it’s using some attributes. rel="stylesheet" and type="text/css" are telling the browser that this is a css file you’re linking in, and href="main.css" is telling the browser where this file is located.

CSS Syntax

CSS has a really simple syntax, which is as follows

selector { 
   property1: value1; 
   property2: value2; 
}

Get to CSS

In your main.css file you can write the following CSS

Here we have set the color property to #0000ff for all <p> elements. If everything has been done right, and you open up index.967f2895.html in your browser, you will see your paragraph has turned a startling blue! This property refers to the colour of the text, and that random string of numbers was a hexidecimal colour.

Lets Be Classy Here

Say we want to make another <p> element. Lets add it in

Uh oh! It’s blue as well. This is because our css is pointing towards all <p> elements. We can fix this pretty easily. So first, lets add a class attribute to our first <p> element

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <p class="blue">Hello HTML! <b>This is bold</b>, <i>this is in italics!</i> <a href="http://google.co.nz" target="_blank">Go to Google</a></p>
        <p>Paragraph number two</p>
    </body>
</html>

And now we make a really simple change to our CSS file, and that’s to the selector

This new selector, instead of pointing to all <p> elements, it uses the period (.) before the selector and the class name to point to all elements with the blue class, like our first paragraph. Selectors do get a little more complex than this, but for the most part this is all you will need.

Make a Button

Take this basic knowledge and add some more properties to set, now we can make a pretty little button. Lets start by adding our button to the HTML, right after the second paragraph

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <p class="blue">Hello HTML! <b>This is bold</b>, <i>this is in italics!</i> <a href="http://google.co.nz" target="_blank">Go to Google</a></p>
        <p>Paragraph number two</p>

    </body>
</html>

A brand new element, you’ll see here, is the <div> element. This element is just an empty block element for styling however we want. Time to make some CSS for it.

.button {
    width: 200px;
    height: 40px;
    background: #111111;
    color: #ffffff;
    padding-top: 20px;
    text-align: center;
    font-family: Tahoma, sans-serif;
    margin-left: auto;
    margin-right: auto;
}

That’s quite a few different properties, so let’s go through them individually

Lets add some interactivity to this button, with a new selector

This :hover at the end of the selector means that the style will only apply when the mouse is over the element. Here, we’re changing the background of the button and changing the mouse cursor to a hand pointer.

Well Done!

That’s a breif introduction to CSS. Like HTML, becoming an expert is about learning all of the selectors and properties. With these two languages, you can make some powerful websites.

Web Platform has some awesome resources for css

« Previous

Next »