Your first web site Part 4 - Styling the template with CSS

From Web Education Community Group
Revision as of 19:45, 23 August 2011 by Cmills (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Surfing the web is easy, creating the web is too!

Introduction

Now we’ve gone through how the Web works, given you a reasonably detailed insight into structuring your content with HTML, and the basics of CSS, let’s take you through some real examples of CSS usage, so you can get more of an idea of how to start using CSS in your own web pages.

In this article I’ll go through all the CSS needed to style the sample web page template that accompanies this series — download it now if you haven’t already. The end result here will be very simple and a bit boring, but it’ll be clean and neat and understandable. Nothing too fancy for now.

The table of contents of this article is as follows:

Year zero: our template, unstyled

As a recap, without any style attached to the HTML page, it will look like so in a browser:

the template with no CSS applied to it

To see this, check out the example in the 0-nostyle folder inside the download zip, or check out version 0 live here.

The information is all there, but this looks a bit ugly, and could certainly do with a good deal of improvement. In each of the subsections below, I will add another section to the CSS, and explain what’s going on. I personally find it easier to do it this way — build the CSS up in stages, solving a new problem at each point. I have left comments in the CSS file to make things easier for you as well.

You can leave comments for yourself and others to explain what’s going on in your code, in both HTML and CSS. In HTML, anything wrapped inside <!-- and --> will not be displayed in the browser when the page is loaded, and can only be seen in the source code. Similarly, in CSS, anything wrapped inside /* and */ will be completely ignored by the browser.

Setting some general rules for the entire page

First of all, it’s a good idea to set rules that you want to apply to the entire page. Note that many rules, such as the ones below, will affect every element in the page when applied to the body element. The first CSS section is as follows:

<code>body {
  font-family: Helvetica, Arial, "Trebuchet MS";
  background-color: purple;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman";
  color: purple;
}
</code>

the page will now look like this in a browser:

the template with general rules added

To see this, check out the example in the 1-generalrules folder inside the download zip, or check out version 1 live here.

Here we can observe the following:

  • The font-family property tells the body and heading elements that all text inside them should be displayed in the fonts specified
  • The background-color property specifies the background colour that the target element should be; in this case the background of the whole body is set to purple
  • The color property sets the color of any text inside the target element(s) — in this case, all headings are set to purple

This still doesn’t look great — we’ve sorted the text out a bit and added some colour, but now the headings have disappeared because they are set to the same colour as the background! Bear with me — we’ll sort this out in the next section

Centering the content, and making it more readable

Next up, we will stop the content having a purple background, make the column narrower, and center it (and the top level heading) on the page, all of which should make it more readable. The next CSS section is as follows:

<code>div#wrapper {
  width: 70%;
  min-width: 600px;
  margin: 0 auto 0 auto;
  padding: 10px 40px 40px 40px;
  border: 2px solid black;
  background-color: white;
  line-height: 1.5em;
  font-size: 0.9em;
  color: black;
}

h1 {
  text-align: center;
  font-size: 3.5em;
  line-height: 1em;
}</code>

The page will now look like this:

the template with content centered, and more styling added

To see the page in action with the new CSS for yourself, check out the example in the 2-centering folder inside the download zip, or check out version 2 live here.

Bit by bit, the above CSS rules are doing the following:

div#wrapper: This rule is being applied to the div with the id attribute of value wrapper, so will affect all of the content that this div is wrapped around:

  • The width property is telling the div with an id attribute of wrapper that it should always occupy 70% of the width of the element it is sat directly inside, namely the body element
  • min-width is saying that the narrowest width the content can reach is 600 pixels
  • margin sets the amount of space that should be left around the outside of the div element. The 4 values always set the top, right, bottom and left margin of the element, in that order. There is no margin being given to the top and bottom sides of the div, and the left and right sides are assigned a margin of auto. This means that they will automatically share all the available space not being taken up by the element itself. In this case, the div is taking up 70% of the available width, leaving 30% left, so 15% margin is set on each side of the div. 70% + 15% + 15% = 100%
  • padding sets the amount of space that should be left between the border of the div, and the content sitting inside it. In this case I have put 10 pixels of padding on the top and bottom, and 40 pixels on other sides
  • The border property sets the nature of the border around the div. In this case I am giving it a 2 pixel-wide, solid, black border
  • The background-color property sets the colour of all text appearing inside the div element to white. This is actually the default, but I had to set it explicitly here because body — the div’s parent element — had its background colour set to purple, and the div would inherit this purple color from there, if we didn’t explicitly change it here. You can change this property to change the background colour if you like.
  • line-height sets the height of the lines of text. 1em or 100% would be the default, but in this case I have set it to 1.5 times the default, to aid readability.
  • font-size set the size of the font. 1em or 100% is the default, and I am setting it to 90% of the default.
  • The color property sets the colour of all text appearing inside the div element to black. This is actually the default, but you can change this property to change the text colour if you like.
  • Last of all here, I have overridden the line height and font size of the main heading so it is nice and big, and set it to be aligned in the center.

h1: This rule is applied to the h1 element on the page, and introduces this new property:

  • text-align aligns the element selected by the rule inside its parent element — you can choose left, center, right, or justified as a value.

Styling the bullets

Now to do a bit of simple styling on the bulleted lists on my page. The next CSS rule is as follows:

<code>ul li {
  padding: 2px 2px 2px 2px;
  list-style-type: square;
}</code>

The bullets now change, as this before and after shot shows:

the bullets before the new style


the bullets after the new style

To see the page in action with the new CSS, check out the example in the 3-bullets folder inside the download zip, or check out version 3 live here.

Here I am giving every list item on the page a padding of 2 pixels on every side. In addition to that:

  • I am using the list-style-type property to change the bullet style from the default round bullets to square bullets.
  • I have specified ul li, not just li, because I want to style only li elements inside uls, and no li elements inside ols. We don’t want to change our numbered bullets into square bullets!

Styling the grades table

The grades table is pretty much unreadable at the moment, so we need to do some work here! The CSS to style the table looks like so:

<code>table {
  border: 3px solid lightgray;
  border-collapse: collapse;
}

td {
  padding: 7px 7px 7px 7px;
}

th {
  background-color: purple;
  padding: 10px 7px 10px 7px;
  color: lightgray;
  text-transform: uppercase;
}

tr.even {
  background-color: lightgray;
}
</code>

Again, a before and after shot captures the difference perfectly:

the table, before styling


the table, after styling

To see our shiny new table style, check out the example in the 4-table folder inside the download zip, or check out version 4 live here.

This latest group of CSS rules does the following — it may look complicated, but it really isn’t that bad:

  • First of all we have a rule that selects the table element, and puts a solid 3 pixel light gray border around it.
  • border-collapse: collapse; is then used to get rid of the spacing in between the table cells. This makes life a lot easier when styling tables
  • Then we take the normal table cells (td) and give all of them padding of 7 pixels on all sides
  • Next we take the column headings (th) and give them slightly more padding on the top and bottom than normal table cells (see the two values of 10 pixels) and set their background colour to purple, to make them stand out more
  • The text color is then set to light grey, as the black text was hard to read against the purple background
  • text-transform: uppercase; is now used to make all the heading text display as uppercase
  • Lastly, we give the one table row (tr) that has a class attribute of even a light gray background color. This technique is called zebra-striping, and it aims to make alternating table rows easier to read by making them different colours

Making paragraphs neater

We are really starting to get our text under control now, but let’s just add a bit more typograhic flair to our paragraphs, to make them look better.

The next CSS section looks like so:

<code>p {
  text-align: justify;
  margin-bottom: -10px;
  line-height: 0.5em;
}

p:first-letter {
  margin-left: 10px;
}

p.first:first-letter {
  margin-left: 0px;
}</code>

Now for the look of the paragraphs, before and after these CSS rules are applied:

paragraph styles before these styles are applied


paragraph styles after these styles are applied

With these styles in action, our paragraphs now look like the example seen in the 5-paragraphs folder inside the download zip; you can also check out version 5 live here.

We have some new stuff, but again there’s nothing too complicated going on here:

  • First we select all paragraphs on the page (p) and set the text-align so it is justified, meaning that all lines will be exactly the same length, which can look neater when the lines and words are fairly short. We have also set a negative bottom margin on the paragraphs, to pull them a bit closer together, and set line-height to a smaller value, so the lines are a bit closer together and the paragraphs look a bit less fragmented.
  • Next we set a 10 pixel margin on the left of the first letter of all paragraphs (:first-letter here is a pseudo class — don't worry about what that means for now)
  • Next we get rid of that 10 pixel first letter left margin we set in the point above, but ONLY for paragraphs with a class attribute of value first. So basically we’re indenting the first letter of all paragraphs except the first one after each heading or other feature. This is a common text styling seen in print publications

Styling the profile box

At the moment, the div with an id of profile — which contains the image and the contact details — looks rather scruffy, so I will put it all into a neat little box and tidy it up, in this section and the next.

First, the CSS to style the box:

<code>div#profile {
  width: 35em;
  margin: 1em auto 1em auto; 
  font-size: 80%;
  background-color: lightgray;
  border: 1px solid black;
}

div#profile li {
  list-style-type: none;
  text-align: right;
  margin-right: 6%;
  line-height: 1.3em;
}</code>

This CSS does the following:

  • It selects the div and forces it to makes its font size smaller, gives it a background color of light grey, gives it some padding, and gives it a solid black border.
  • We also use the percentage and margin auto trick to make this profile div be centered inside the main content div; this time it will always be 35em in width
  • It then selects the list items (li) inside the div, gets rid of the bullets off them altogether, right-aligns the bullet text, uses some right hand margin to stop the bullets from being glued to the right hand edge of the box, and reduces the line height so that it looks less fragmented when bullet text wraps on to multiple lines (add some more text to force wrapping and you'll see what I mean)

With these styles in place, our template now looks like the example seen in the 6-profile folder inside the download zip; you can also check out version 6 live here.

The following shows a shot of the profile box, before and after the new styles are applied:

before the profile box is styled


after the profile box is styled

This looks a bit off still — something needs to be done. We will fix this in the next section.

Floating the image

Now for one final touch — we will float the image to the left of the contact details inside the profile, as it currently looks a bit untidy.

Floating means bringing one element and its contents alongside an element lower down, so they appear alongside each other, not on on top of another.

The CSS to do this is pretty simple:

<code>img {
  float: left;
  border: 1px solid black;
  margin-left: 6%;
  margin-top: 2.8em; 
}</code>
  • Applying float: left to the image means that it comes alongside the contact details, to the left
  • I have also given the image a black border to make it look neater, some left margin so that it sits the same distance away from the left edge as the profile bullets are sitting from the right edge, and some top margin to vertically center it.

That’s it, my work here for now is done! The final document styling looks like so:

the final page styling

You can check this example out for yourself in the 7-finishedexample folder inside the download zip; you can also check out version 7 live here.

Making your own style modifications

So now it’s over to you!

As with the HTML, I’d like to encourage you to start playing with the CSS, either modifying this template to suit your needs, or creating something completely new. To give you some ideas on where to start, I’ve assembled the following tips:

  • Until you get a bit more confident with what you are doing, stick to changing the values of the properties (the bits just after the colon and before the semi-colon), rather than adding new ones, or adding entire new rules.
  • When experimenting with changing rules and properties, change them and test how they alter the look of the web page one at a time. That way if something doesn’t look how you expected it you know exactly where to change it back.
  • If you can’t see why something isn’t working, then check the code is correct, ie curly braces round the properties, semi colon at the end, etc.
  • Try changing the value of the background-color and color properties, to add a splash of colour to your page. Try adding colours to other rules, to see what you can come up with
  • Try increasing or decreasing the size of the text, by changing the values of the font-size properties.
  • Change the fonts used on your page by changing the value of the font-family properties. Check out this list of the fonts you can use on the Web, plus an explanation of why
  • Change the style of the paragraphs further, by changing the text-align between left, center, right and justified. Use letter-spacing with a value of a small number of pixels (say 1px) to increase the spacing between letters
  • Change the width of the borders (increase or decrease the pixel value), and their style (try changing solid to dotted, dashed, groove or ridge, for example).
  • Alter the amount of white space around things by increasing or decreasing the margin and padding values
  • Try changing the list-style-type value to circle or lower-roman; read more about styling lists.

Remember the undo command (Ctrl + Z on Windows and Linux, or Cmd + Z on Mac), which can often be a life saver if you start to go wrong, and things aren’t working as you want. Always keep regular backup copies at various stages, so that if you go totally wrong and can’t get back to a point where everything worked, you can always ditch the current code and go back to a previous copy.

Summary

So that’s it for the CSS in this article series — I have now given you the basics of how CSS works, and shown you how to do some useful things with it, which will be enough to get you started on the road to experimentation and eventually mastery of the subject.

For more information on what CSS properties and selectors you can use in your designs, and what values the CSS properties seen here can have, check out the CSS section of the Opera Web standards curriculum.

There is one piece of the puzzle missing — how to actually get your wonderful web page on to the web for all to see. This is what I will deal with next, in the final article of the series.