Building a Website From Scratch | Part 2 – Get Some Style

This is the second of a series of posts I will be doing on building a website from scratch.  In the first post we covered how to slice a graphic design to prep it for conversion to a web layout.  This installment will be more of a preparation for the work to come, rather than an example of what to do.  I will be giving a crash course on a little something I like to call Cascading Style Sheets (CSS for short).  Like most aspects of web development, CSS is a large topic in and of itself.  So, I will be just giving enough of a taste of it to learn what we will need to build our website.  So let’s get to it!

What is CSS?

That is a great question, thanks for asking…  Cascading style sheets (CSS) is a way of defining positioning, look and feel of HTML elements.  Using CSS, you, the developer, can make a broad definition that says, "Gee, I really want all the <h1> elements on the page to be extra big and bold."  Of course, CSS is much more succinct than that, saying the same thing with this:

If you’ve ever looked at a website before, and I’m going to take a completely random guess that you have, you’ve seen CSS in action.  CSS, when done right, defines how everything on a page will look.

What’s with the ‘Cascading’?

With a name like ‘Cascading Style Sheets’, there must be some significance to the word ‘Cascading’, right?  Well, of course there is.  Man, you have some great questions today.  When a CSS style is defined, it can apply to more than just the specific element you are targeting.  In essence, the style ‘cascades’ down to anything that is contained within the element you are targeting.  At first glance, that may seem lame.  I assure you that it is not.  How about an example.  Let’s say that we want to make all paragraph text 12 pixels tall.  We do that by saying this:

Now, within our paragraphs, we have hyperlinks that we also want to have 12 pixels tall.  That’s where the cascading part comes in.  Let’s say our HTML markup looks like this:

This structure has a <p> tag as the outer element, with an tag within it.  With our style applied to the <p> tag, that means anything within the <p> tag will also have a font-size of 12px.  (Well, that is not totally true, but we will get to that shortly.  For now, assume that it is true.)  So, by applying a style to the <p> tag, everything within it gets the same style applied, ensuring uniformity.  Are you starting to see the power?  We can quickly apply styles and shape the look of a site with broad strokes.

Where do I put these ‘style’ things?

CSS can be defined in several ways: inline on an element, in an internal style sheet, or in an external style sheet.  Each of these definitions look pretty much the same at the style level.  What really separates them is their scope.

An inline definition on an element is only good for that particular element.  It looks like this:

This is usually something you’ll want to try to avoid using, for a few reasons.  The most obvious being that it would be way too much work to style a website one piece at a time.  The lesser obvious reason is that at some point down the road you may want to change the way your site looks.  Ouch.  Every element now needs to be changed.  Finally, and possibly most importantly (depending on your point of view), using the inline element style marries your markup with your presentation.  Not a good thing.  Any good developer understands the need for ‘separation of concerns’.  When you use an inline element style, you take your clean markup, which contains your content, and make a sloppy mess out of it.  It makes the code more difficult to read because there is all this extra stuff added to every tag.  Of course, inline style elements don’t have to be used on every element, but I think you get the point.  I have, however, found a good use for inline element styles: quick and dirty layout tweaks.  Sometimes you find yourself needing to make temporary changes or changes that you aren’t sure if you will use long-term.  Bam!  Inline element styles to the rescue.  Put your change to the test and see if it is worthy of living on.  Then, remove the inline style and place the style definition into one of the other options.

The internal style sheet has a slightly more broad scope: a single page.  One of those bad boys looks like this:

Notice that it is placed within the <head> of the page.  I have only shown one element defined in the example, but you can have as many as your heart desires.  The difference between the internal style sheet and the inline element style is that the internal style sheet applies to all elements on the page.  With the example above, we have defined all contents of <p> tags to have a font-size of 12px and a normal font-weight.  Since we are defining things a whole page at a time, this is a little more useful than the inline element style, but is still limited as a whole.  We can still have the clean separation of markup and presentation using internal style sheets, but they are still hard-coded into the page.  Thus, putting a new face on your site is still a fairly tedious task.  These guys still have their place, however.  I have found that they are most useful for browser-specific hacks (which is outside the scope of this discussion).

The external style sheet is where you’ll probably want to play the most.  An external style sheet is an external file with the extension .css, containing all the style definitions for the entire site.  Here’s an example of a style definition in an external style sheet:

Notice how the style definition itself looks exactly like the internal style sheet, but there are no other tags involved.  That’s due to the fact that the external style sheet is an entirely separate file.  To get it into your site, you have to include it at the top of every page that it applies to like so:

Notice how the include is located within the head of the document.  Inside that , you can also define an attribute for ‘media’, which is really cool.  What that does is give you the ability to have completely different style sheets for different media types, like screen or print.  You can also include more than one style sheet, if you like, giving you the ability to separate your style definitions into logical groups.

The external style sheet is really where you should put your style definitions.  Using the external style sheet gives you the power to define, in one single location, the look and feel for an entire website.  It also gives you the power to completely change the look and feel of a website by simply including a different style sheet.  A great example of that is CSS Zen Garden, where you can see the same exact markup completely transformed by simple swapping out style sheets.

Cascading – Revisited

Now that you have learned about the three different ways to define style, you might suddenly have images of multiple style definitions for a single element type.  Not to worry, that’s where the cascading comes back into the picture.  Let’s say we have an external style sheet that defines the style for <p> like so:

And, let’s also say that there is an internal style sheet that defines the style for <p> like so:

What happens now?  There you go with the great questions again!  The answer is that the internal style sheet definition is used.  Here’s why: proximity rules the day.  Here, proximity is more of a conceptual thing, rather than a physical thing.  Basically, whatever is closer to the element wins.  The external style sheet is the ‘furthest’ away because it is potentially site wide.  The internal style sheet is the ‘middle man’ because it is at the page level, ‘closer’ than the external style sheet, but ‘farther’ than the inline element style.  And, in case you didn’t guess it, the inline element style is the ‘closest’.

You see, with the cascading part of cascading style sheets, a definition cascades down to all affected elements until it is overridden by another closer or more specific definition.  The cool part about that is that you can make some broad definitions such as:

This style will apply to everything within the <body> tag (basically everything visible on the page).  The you can add a more specific definition such as:

Now, anything inside a <p> tag will have a font-size of 14 px and a normal font-weight.  At least, it will unless it is further overridden.

Selectors

We’ve already dabbled in the topic of selectors, with our examples of ‘p’ and ‘body’.  As the name implies, this is what you use to select things to style.  There are three basic ways to select an element: by element type, by class, and by element id.

Selecting by element type is what we have already seen.  Basically, you just start the line with the type of element you want to select:

You can further elaborate on this by getting attributes involved as well:

The previous example selects all elements that are <input type="button">.  Consider the element selector to be the broad stroke to start painting on the canvas.  You lay the foundation and then move on to some detail.

The class selector is where you can start getting a little more detailed.  Actually, you can be as detailed as you want with it.  It requires involvement on the markup side as well.  First, the markup:

Next, the style:

Notice how the selector begins with a dot.  That is how classes are selected.  In the previous example, we selected a class of "container".  It doesn’t matter what element type has that class, it could be a <div>, a <span> or a <p>, they all would get selected.  Unless we do a combination:

What that is selecting is all <div>s that have the class "container".  In fact, say we have both of those styles together in our sheet like so:

What this is saying is all elements with the class "container" will have the given background, height, and width.  But, only <div> tags that have the class "container" will also have the given color.

We can also apply multiple classes to the same element:

This would apply the styles defined in both the "container" class and the "bold" class.  If there is any overlap, the last class wins ("bold" in this case).

The last basic selector is the id selector:

With the selector:

Notice the difference between the class selector (.container) and the id selector (#key). Where the class starts with a dot, the id starts with a pound sign (#).  Since an id can only be used once per page, the id selector is good for using in laying out the site’s design framework.  Elements that serve a single purpose can be given an id and styled accordingly.  Elements that can show up repeatedly can be given a class.  Plus, we can use them in combination like we did with the element and class selectors.

With the selector:

This works great when you start dynamically messing with classes using javascript because you can define the basic styles on the id and have some styles change based on the class it has:

Notice how the width and height never changes, but the color changes depending on whether the class "bold" or the class "mellow" is applied.

The last thing I want to talk about before letting you take a rest is child selectors.  Child selectors are when you use combinations of the basic three selectors in a particular order.  Say we have the following markup:

You may find yourself wanting to give special styles to only those elements inside the "container" class.  Well, never fear, child selectors are here!  Here’s how you accomplish it:

You first start with the outer element, class or id, then add a space and put the inner element, class or id.  That basically says, all <h1> elements inside an element with the class "container" act a special way and all <p> elements inside an element with the class "container" act an equally special (but different) way.  You don’t have to stop there, you can go as deep as you like:

With the style:

Are you starting to see the power?  I hope so, because I’m about out of breath here.

Conclusion

I’ve barely scratched the surface here with cascading style sheets.  Hopefully I’ve given you enough of an understanding to be able to begin applying it to our website as we move forward to the next steps.  I told you how CSS is defined, what it does and how to control what it does.  To learn more you can start with W3 Schools.  For some more advanced topics, A List Apart is a fantastic blog.  As we move through this blog series, you will be exposed to more and more CSS.  You’ll see plenty of examples of selecting elements as well as properties that can be used.  See you next time!

Share

2 thoughts on “Building a Website From Scratch | Part 2 – Get Some Style”

Comments are closed.