HTML5 and CSS3 Part 2: Building on the Basics

Introduction

In part one of our series, we learned what HTML5 and CSS3 really mean and how they work. By the time we were done, we had already started writing working HTML and CSS. We crossed our finish line without getting sidetracked or overwhelmed. Hopefully this helped encourage you to keep learning more about HTML and CSS. If so, you are in the right place. Let's get started.

More About Styles

Right off the bat, I want to cover a couple of foundational things about styles that will be important to understanding what we are doing in this tutorial. First, you can apply styles directly in your HTML document instead of doing a separate style sheet (CSS document). To do this, you at a "style" attribute on your HTML element like so:

<h1 style="font-family:  Arial">Sample Hompeage</h1>

Notice how that looks just like CSS. If we look at the name of CSS (Cascading Style Sheets), we get an idea of why the style on an HTML element looks the same as our CSS text. The "Cascading" means that the styles stack on top of each other, with the most important (typically the one closest to the element - we will get into this in a minute) one winning out. The "Sheets" simply means the document as opposed to being in a HTML document. That leaves us with "Style". Style represents what the elements actually do. That is why when we see "style" as an attribute in HTML it is the same as an element in CSS. Both are styles being applied to an element.

So, now you know how to apply styles directly in your HTML document. Now never use them. Ever. No, I'm serious. In-line styles (applying a style attribute to a HTML element) negate the value of CSS and make your HTML document much harder to modify. They also make your HTML document more cluttered and harder to understand. There are edge cases where in-line styles might be acceptable but assume there are not and exhaust all other options before resorting to in-line styles.

We mentioned the "Cascading" part of CSS and I wanted to touch on that a bit further. There will be times when one style steps on the toes of another. For instance, above we are applying a style on our h1 that changes the font family. We already have a rule in our CSS that affects the font family of our body. Since our h1 tag is inside our body, both styles apply to it. Instead of causing an error, the font family for our h1 tag becomes "Arial". How does this work? Well, that is the nature of CSS. Styles get applied in a cascade based upon specificity. That just means that the most specific rule is the one that "wins". In our case, we applied the style that was directly attached to the h1 tag because it was specific to only that tag. That is more specific than one that is applied to the body and everything in it. The general order is (from least-specific to most-specific): element (like h1 or body), class, ID, then in-line style. For now, that is good enough for what we need to know. Later, when you are coming back to this issue and want to learn more, check out this article at Smashing Magazine: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.

Modifying Text

One of the basics elements that is included on almost every web page is text. In the last article, we looked at the very basics of including blocks of text. However, it is almost certain that you will want to modify or mark up your text in some way. In order to guide our learning, let's look at the Microsoft Word menu and try to replicate those actions in CSS and HTML:

Font Selection

If we look at the Font section of the menu, we see a dropdown for the font. This will change the font for whatever we have highlighted in the document. To do this in CSS, we first choose our section and then we specify the "font-family" like we did in our first tutorial:

body {
   font-family: 'Comic Sans MS';
}

In that example, we changed the font family for all of the text in the document (unless there is a more specific rule somewhere). That is all it takes to set a font for an item. However, not all browsers have all of the fonts installed. In order to prepare for this, you can specify multiple fonts in order of preference like so:

body {
   font-family: Arial, Helvetica, sans-serif;
}

That last font, sans-serif, is actually a generic font family. This allows this allows the browser to choose a font in that family if the first two that were specified do not work. Also note that I did not need to include quotes around the font names this time. That is because these fonts do not have spaces in their name. Computers get confused by spaces so you need to include quotes to tell the computer that "all of this stuff is together as one item".

Font Size

On our Microsoft Word menu next to the font dropdown is a dropdown for font size. To change the size of our font in CSS, we use the font-size property (stunning, I know). However, this is not as simple as you might first assume. Here are your options:

• larger/smaller - this is relative to the parent element
• xx-small, x-small, small, medium, large, x-large, and xx-large - this is relative to the font size that would be applied to this element normally
• px - this is an exact value (like 10px or 25px) that specifies the height of the font in pixels
• pt - this is like px but it applies to print CSS because it specifies the height of the font in points
• % - this is relative to the font size that would be applied to the element normally like 150% or 75%
• em - this is relative like percent where 1em is like 100%. To equate to 150%, you would use 1.5em.

Let's demo each of these options in code. Note that you would only put one of these into a rule. If you put more than one into one rule, the last one would apply (but don't do that - it is a waste):

font-size: larger;
font-size: x-small;
font-size: 14px;
font-size: 18pt;
font-size: 175%;
font-size: 0.8em;

Font Modifiers

In Microsoft Word, there are three icons that you see together: bold, italics, and underline. There are a couple of ways we can replicate these in HTML and CSS. First, if you want to apply them to an entire section via CSS, you can use a rule like so:

font-weight: bold;
font-style: italic;
text-decoration: underline;

However, you probably don't want to apply these to an entire paragraph. To apply these to just a portion of the text, you can use a "span" tag and target that tag with your CSS. A span tag does not do anything in HTML except designate a specific section of the document as being together. You use a span tag in conjunction with CSS to apply styles to that section. Let's look at this in action. First, here is a section of HTML:

<p>
   The <span class="very-important">architecture</span> of the building is what is important.
</p>

Notice that I put a class on the span tag. That allows us then to target this text in CSS like so:

.very-important {
   font-weight: bold;
   font-style: italic;
   text-decoration: underline;
}

That will make the word "architecture" bold, italicized and underlined. Maybe not the best idea aesthetically but you get the idea. Be careful using the underline, though, since links use underline to indicate that they are a link. Underlining other text might confuse your viewers.

If you have been around HTML for any length of time, you might know that you can also modify text directly in HTML. It used to be that you would use the tags b, i, and u to bold, italicize and underline. There was also strong and em for bold and italics respectively. These tags still exist in HTML but in the HTML5 specification they do not do what they used to do. Again, when you are ready to learn about contextual importance and emphatic text, read this article at Impressive Webs: http://www.impressivewebs.com/bold-italic-html5/. For now, just modify the text via CSS and a span tag. It will save you a headache.

Font Colors

The last part of our Font section of our Microsoft Word menu that I want to look at is the font color. In Word there are actually two options - the font color and the background color. You can modify these via CSS like so:

color:  red;
background-color: #00ff21;

The color modifies the foreground, which happens to be the font. The background-color modifies the background of the element (shocking, I know). Note that on the first item, I used a common name (red). There are a limited number of colors that are specified through name. To be more specific, you can use the hex number like I did on the second property. There are other options that you can use for colors, but these are the most common options.

Text Layout

Modifying the text's look is great, but sometimes you will want to change where the text goes. Looking at our Microsoft Word toolbar again, we see the Paragraph section. This shows us a number of ways that we can manipulate text positioning in Microsoft Word. Let's do the same things in CSS and HTML.

Lists

Typically in documents, we use bullet-point lists and numbered lists depending on our need. In HTML, we can do the same thing through unordered lists and ordered lists respectively. Let's look at the HTML for both and then we can discuss the specifics:

<ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ul>

<ol>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ol>

When you run this code in the browser, you will get the following results:

When you look at the HTML to create these two lists, you see that they are basically the same. The difference is the outer tag. For an unordered list, you use the tag ul (any guesses why?). For an ordered list, you use ol (please tell me you know why). In both cases, each list item is wrapped in a li (I'm not explaining that one).

The great thing about CSS, though, is that the lists don't need to look like traditional lists. One typical way you will see CSS used to alter lists is to turn them into navigation menus. List items become menu options. Nested lists become sub-menus.

Text Alignment

By default, we left-align text. However, there may be occasion where you want to center or right-align text. To do this, use the CSS property text-align. The standard options are left, right, center or justify. So, to right-align text, you would use the following CSS:

text-align: right;

Pretty simple, huh?

Other Tags

OK, so we've pretty much used up our Microsoft Word menu example. We could use the other menus but by now you probably feel like you are in a MSWord 101 class. Instead, let's look at a few other popular tags in HTML that you will probably use a lot.

Links

One thing that almost every web page has is links to other pages. Whether you are linking to another page on your site or if you are linking to an external resource, most pages take advantage of the link tag. After seeing ul, ol, li and all of the other obvious tag names, you are probably thinking that the link tag will be l or link, right? Nope. It is "a". Get it? Let me explain. It stands for anchor. Understand now? Didn't think so. It isn't the most intuitive tag in the book. In fact, it gets worse in the fact that "link" is actually used for a different purpose: bringing in resources. We saw that when we "linked" our style sheet. But, let's get back on track. Here is what an anchor tag looks like in HTML:

<a href="http://www.google.com" title="Google homepage" target="_blank">Google</a>

I've included three attributes in this tag. You only technically need the href attribute (the URL of the website to go to) but the title attribute's value gets displayed when you hover over the link and the target tells the browser where to open the link. In this case, "_blank" for a target tells the browser to open this link in a new tab/window. I thought it would be good to show you these attributes so you know what could be done. The final piece is the text between the tags. This is what actually gets displayed on the web page. In this case, it would be just the word Google. You can put just about anything between the anchor tags, including a picture or a whole line of text. It all depends on what you want to turn into a clickable link.

In the above example, I used an absolute link. That means I put the entire path including the http. However, there are other types of links. There are a number of different ways to do relative links. For instance, you could include just the html page, which implies that the page is in the same folder as the current page. You could also include a path like "work/hard.html" which would be a page that is in a folder called work. That work folder would be at the same level as the current page. Another thing you can do with your links is include the ID of a tag at the end of the url like so: "work/hard.html#breaks". That would go to the hard.html page and then scroll down to the element that has the id attribute that has a value of "breaks". The final anchor tag type we will discuss is the mailto link. Instead of using http: in the href attribute, you use mailto: and then an email address like so:

<a href="mailto:bill@microsoft.com">Email Bill</a>

This would create an email that would be addressed to bill@microsoft.com from the current user. These aren't always reliable and they are a good way to give your email address to a spam bot but they can be useful in some situations, especially if they are on a private web server (like an intranet).

Tables

Tables are used to display sets of data together in orderly columns. They have been used for laying out text on web pages but that is a misuse of the table. A table contains a number of parts. Let me show you, since I think it will make sense when you see it:

<table>
   <thead>
       <tr>
           <th>First</th>
           <th>Second</th>
           <th>Third</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>First data</td>
           <td>Second data</td>
           <td>Third data</td>
       </tr>
       <tr>
           <td>First data</td>
           <td>Second data</td>
           <td>Third data</td>
       </tr>
   </tbody>
</table>

Basically, the table tag wraps the entire thing. Then you have a thead section that is the header and a tbody that contains the actual data. For both sections, you need a tr first (table row) and then the actual data. In the header, we use th for column headers and then in the body we use td for the data that goes in those columns. In the thead and the tbody, you can have multiple rows.

Images

How could we get this far before we discussed images? I'm sure you have been dying to put your kitten pictures on your fancy new website and you just needed to know how. Well, never fear, it is that time. First, the HTML:

<img src="kittens.png" alt="Cute cats" />

OK, so you've figured out that the image tag is called img and it does not have a closing tag. The src probably looks familiar too. It works almost exactly like the href attribute of the anchor tag in that it can do relative or absolute paths. The difference is that this path is the "source" (get it) of the picture. The alt displays in case the picture cannot load. It can also be used by screen readers for those who cannot see.

Best Practices

If you are reading this, you are doing well. You got beyond the basics of HTML and got into a bit more of the good stuff. Before we are done, though, I want to go over a few key things that I think are important.

Comments

When you are writing code, comments are important for telling the next person (or you in six months) what is going on in a particular document. HTML is very similar. In general, you don't want to overload your HTML with comments but it is a good idea to identify main sections of your HTML so it is easy to skim through later. To leave a comment, use the following tags:

<!-- This is a comment -->

Note that these aren't really tags but they function like tags. You can comment a single line or multiple lines. Just don't nest comments. That doesn't work well. The first close comments "tag" closes the outer comment, which causes malformed HTML.

Readability

Since we just got finished talking about comments, we should also discuss readability of your HTML and CSS. First, it is best practice to indent your HTML based upon the nesting level. For instance, let's look at our table again:

<table>
   <thead>
       <tr>
           <th>First</th>
           <th>Second</th>
           <th>Third</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>First data</td>
           <td>Second data</td>
           <td>Third data</td>
       </tr>
       <tr>
           <td>First data</td>
           <td>Second data</td>
           <td>Third data</td>
       </tr>
   </tbody>
</table>

Note that since thead is a child of table, it is indented further than table. Since tbody is a sibling of thead, it is indented at the same level. Get it? Do it.

Spacing is also important. White space gets removed when a page is parsed, so don't be afraid to add an extra line break where it seems appropriate. Typically you should think about doing so to separate logical sections in your HTML (like we do with paragraphs). Doing so makes our HTML more readable.

Testing

All browsers are not the same. We discussed this in our last tutorial. As a result, you should test your HTML out in multiple browsers (at least Internet Explorer, Chrome, Firefox and Safari). Make sure that things look the way you want in all of the browsers. Sometimes font sizes might be a bit different, causing weird line wraps or other issues like that. Web Matrix makes this testing easier by allowing you to run your website on multiple browsers at once with a click of a button. Note that the Run button in Web Matrix has a down arrow at the bottom of it. Click that and you will see every browser you have installed. You can use the "Open in all" option to run your site on all installed browsers at once. This can make testing easier.

Also, be sure to test the different screen resolutions to be sure your site looks the way you want it to. The quick way to do this is to just resize the browser windows to different sizes to see how your site responds.

Conclusion

Well, we got beyond the basics of HTML and CSS. We didn't get sidetracked along the way and again we crossed that finish line intact. HTML and CSS aren't really that scary, are they? When I throw new things at you, typically it is just a new opening and closing tag. While knowing all of the tags can seem like an overwhelming list, actually using them is fairly simple. As a result, you just need to keep a list of what you have learned in order to use it again. Hopefully you enjoyed this tutorial. Come back soon for part three.