Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Web Development Tutorial Part 5 – CSS

Posted November 15th, 2014 by

So having completed Part 1, Part 2, Part 3 and Part 4 of this series of web development tutorials, we’re finally able to actually construct a webpage. Now I said that we’d look at CSS in this tutorial, and we will, but first off let’s build a basic webpage that we can use to experiment with later.

Since we always start with the structure of our webpage, let’s do that here:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Our Webpage</title>
    </head>
    <body>
        <header>
            <h1>Our Webpage</h1>
            <p>Webpages don't get any better than this, do they?</p>
            <nav>
                <ul>
                    <li><a href="page1.html">Page 1</a></li>
                    <li><a href="page2.html">Page 2</a></li>
                    <li><a href="page3.html">Page 3</a></li>
                    <li><a href="page4.html">Page 4</a></li>
                    <li><a href="page5.html">Page 5</a></li>
                    <li><a href="page6.html">Page 6</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>The Main Page</h2>
            <div>
                <p>
                    Welcome to Our Webpage. The best webpage. Here, we've
                    got lots of interesting 'features' and stuff to do.
                    The links may not work now, but someday they might.
                    The stuff in these paragraphs can be whatever you want,
                    but preferably something with meaning (unlike this).
                </p>
                <p>
                    This kind of layout is a good starting point for when
                    you find yourself in need of creating a website.
                    When making a website, you should make sure you don't
                    just get lazy and stop following convention. You'll
                    regret it later. Separate structure and presentation.
                    Don't spend your time copying and pasting things. Use
                    templates or at least some form of content management
                    too.
                </p>
                <p>
                    <img src="image.png">
                    <br>
                    This is a very interesting image.
                </p>
                <p>
                    And that's pretty much all the content we have.
                </p>
            </div>
        </main>
        <footer>
            <p>&copy; 2014 Cyderize.org. All rights reserved.</p>
            <p>This page is part of the Cyderize.org web development tutorial.</p>
        </footer>
    </body>
</html>

You can see that everything has meaning in the code snippet (well, besides the actual page itself). There are no arbitrary tags that do nothing, no font tags, nothing that changes colour, etc. It’s just the structure of the page and the content that goes with it. There’s also an image in the mix, and if you don’t have your own (although you probably do), I’m using this one:

Image for Tutorial

Visualisation of words

The page is without styling, and so when viewed in a browser, looks rather lacklustre. You can check it out here.

So now we’ve got to make it pretty, but how do we do that? Why with CSS, of course.

We’ll add a line to the <head> element, just underneath the <title> element:

<link rel="stylesheet" href="style.css">

What this does is tell the browser to load a stylesheet to use when rendering a page. We put CSS in the file specified in the href attribute of the <link> tag. While it’s possible to include CSS in a page directly, remember what we said about separating content from presentation. By putting all the presentation in style.css, we can actually apply this style to several pages at once, and only have to change the styles in one file to have them propagate to all our pages.

Now create a file called style.css and start editing it in a text editor. We’ll have to learn a little bit about how CSS works before we can actually apply the styles we want to our webpage.

A stylesheet is essentially a collection of instructions for how to present a webpage. In order to style something on a page, we need to know three things:

  1. What we want to style – A paragraph? An image? A single word?
  2. What we want to change about it – The colour? The background? The position? The size?
  3. What we want to change it to – Make it red? Move it lower? Make it larger?

We specify these things in CSS using the ‘selector’ (for number 1), ‘properties’ (for number 2) and ‘values’ (for number 3). The basic syntax of a stylesheet looks like this:


ruleset1 {
    property1: value1;
    property2: value2;
}
ruleset2 {
    property1: value1;
    property2: value2;
}

Styles are applied as property-value pairs known as CSS declarations. A CSS declaration contains a property and a value, separated by a colon (:). The properties and values that can be used vary for different elements, but some basic properties like font-family, font-size, color, background-color, width, height, etc. are rather easy to grasp. An example CSS declaration is

font-size:11pt

It (rather obviously) sets the font-size to 11pt. Another example is

background-color:#000

It sets the background colour to black – the colour with the hexadecimal code #000. We could also write #000000, which is the full form of the hexadecimal code, or rgb(0, 0, 0), or we could type the more human-friendly background-color:black. When dealing with colours, it’s best to just use a colour picker and let it figure out the right CSS colour code.

We’ll learn about a bunch of properties (and their values) later.

So how do we go and actually apply these declarations to an HTML element? We use a selector for this. A selector can apply to a particular tag, or an element with a particular class or ID, or when some special condition (like mouse-hovering) occurs. An example of a selector is

body

Simply the word ‘body’ is a selector that applies to any tag called body. There happens to be only one of these per page, but if we had more, it’d apply to all of them. Another example is

.bestclass

A period (.) followed by a class name is a selector that applies to any element with a class attribute that contains the name. So if I have something that looks like this:

<p class="bestclass">This is the best class</p>
<div class="otherclass bestclass">So is this</div>
<a href="#" class="nottheclass">Still looks normal</a>

Then the selector will apply to the first two elements, but not the last one. Remember that the class attribute only needs to ‘contain’ the particular class. Even though the div has a class attribute of ‘otherclass bestclass’, the .bestclass selector still applies. A selector like this

#bestid

Will only apply to the element with the exact id attribute of ‘bestid’. Since IDs are unique in a page, this can apply to at most one element.

Selectors can also select elements based on the hierarchical position of an element:

.bestclass a

Will select every ‘a’ element that is a child (but not necessarily a direct child) of an element with a class name that contains ‘bestclass’.

And some pseudo-element selectors exist, for example:

a:hover

Will select any ‘a’ element that has the cursor hovering over it.

Lots of other selectors exist, but these will do most of the time. You can look at others here.

Going back to this:


ruleset1 {
    property1: value1;
    property2: value2;
}
ruleset2 {
    property1: value1;
    property2: value2;
}

A ruleset is a comma-delimited list of selectors, and following a ruleset is a declaration block, denoted by a pair of curly braces containing a list of CSS declarations, with each CSS declaration ending with a semicolon. The declaration block will apply to any and every one of the selectors in the ruleset.

So let’s finally add some CSS to our style.css which we created what seems like ages ago.


body {
    font-size:11pt;
    margin:0;
}
.page-center {
    margin:auto;
    width:90%;
}
header {
    margin:10px;
}
nav {
    text-align:center;
}
nav ul li {
    display:inline-block;
    margin:0 10px;
}
.content-title {
    background-color:#000;
    color:#FFF;
    padding:10px;
    text-align:center;
}
footer {
    color:#555;
    font-size:0.8em;
}

We’ll also need to make some changes to our HTML, and also go through what this all means. That’ll happen in Part 6, where we’ll make our page look like this and finaly this.

Comments: none yet | Filed under: tutorials | Tagged: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *