Tutorials

CSS Specificity

Posted By:
Matt
Posted On:
November 6th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
3 Comments

The second key feature of CSS that makes it so powerful is Specificity. Specificity is how specific your selectors are. p {color: #000;} will make everything in <p> tags black, body p {color: #F00;} is more specific and it will make everything in <p> tags red no matter where the selector is called in the style sheet.

Getting More Specific

To make a CSS selector more specific add more HTML elements or attributes to the selector. p {color: #000;} selects all <p> tags, not very specific. To get more specific we can target the <div> the <p> tags are in (let’s pretend they are in a DIV with an ID of “Header”).

The HTML


<div id="Header">
  <p>This is the paragraph text.<p>
</div>

The CSS


p {
color: #000;
}


#Header p {
color: #F00;
}

Everything in <p> tags will be black except for the stuff in the <p> tags inside <div id="Header">, that will be red. Specificity allows you to use less classes and IDs to target HTML elements. If you were using the “Header” div already for other purposes and you wanted only the <p> tags inside that div to be red, why add another class when you can just get more specific?

A Crazy Example

Here’s a crazy example that shows you just how you’d avoid writing out a bunch of CSS just to change one property of one tag in one div.

Let’s pretend you want everything in <p> tags to be black and 12px big with a padding of 5px and a line height of 24px. You also want everything in <p> tags in the “Header” div to be red and everything in <p> tags in the “Footer” div to be white. Instead of writing the font size, padding and line height out 3 times, just do it once and use specificity to change the other colours.

The Crazy CSS


p {
color: #000;
font-size: 12px;
padding: 5px;
line-height: 24px;
}


#Header p {
color: #F00;
}


#Footer p {
color: #FFF;
}

Everything in <p> tags in the “Header” and “Footer” divs will keep the padding, font size and line height but the colour will be over-written because those selectors are more specific.

Conclusion

Specificity will save you time and bytes. It will make your CSS easier to follow and it will prove to all of your friends that you understand CSS better than them.

CSS: The Cascade

Posted By:
Matt
Posted On:
November 4th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

Most people new to CSS think it’s great for changing font sizes and colours. It is. But as you start to learn more about CSS you eventually realize that it’s a lot more powerful than it seems. The two key features of CSS that make it so powerful are The Cascade and Specificity. Here’s everything you need to know about the Cascade.

The Cascade Within A Style Sheet

The C in CSS stands for Cascading. Cascading means the CSS is read from top to bottom and whatever property value is called last is the property value that will be used. Here’s an easy example:


p {
font-size: 12px;
}
p {
font-size: 14px;
}

The second font size will overwrite the first one and the text will be 14px.

The Cascade Within A Document

The cascade works within a style sheet as well as outside of style sheets, within a document. If you call two style sheets in the head of your HTML, the cascade works from the top to the bottom and from the first style sheet to the second. If you have p {font-size: 12px;} in your first style sheet and p {font-size: 14px;} in your second style sheet, the font size of your <p> tags will be 14px.

The cascade also applies within the three different places you can declare styles, a style sheet called in the head of your HTML, styles declared directly in the head and inline styles. The cascade works in the order I just listed. Inline styles will overwrite styles declared in the head which will overwrite styles within style sheets.

Conclusion

The Cascade itself may not seem all that useful when you first look at it but when it’s used in combination with Specificity the true power of CSS is unleashed (haha). Next time, Specificity.

CSS Selectors

Posted By:
Matt
Posted On:
October 24th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

Now that you know the basics of CSS we’re gonna get into some of the different ways you can select HTML elements.

Selecting Elements Directly (Type Selectors)

You can use CSS to select elements directly. If you want to target all <p> tags your selector will just be p, like this:


p {
font-size: 12px;
}

This will give all <p> tags a font size of 12px.

Selecting Classes and IDs

If you don’t want to select all <p> tags you can give one or some of the <p> tags classes, <p class="SoCool">. You can use the above selector to give all <p> tags a font size of 12px and then you can use the class to select only the <p> tags with the class of “SoCool” and make them pink (pink is cool).


p {
font-size: 12px;
}

p.SoCool {
color: pink;
}

The dot between the p and SoCool means “with a class of”. So all <p> tags with a class of SoCool will be pink. IDs work the same way but instead of a dot you use a hash (#). Let’s pretend SoCool was an ID instead of a class:


p {
font-size: 12px;
}

p#SoCool {
color: pink;
}

Just remember, you can only use an ID once on a page so if you need more than one <p> tag to be an awesome shade of pink, use a class instead of an ID.

Descendant Selectors

You can select HTML elements based on the HTML elements they are inside. If you want to target every <p> tag that’s in a <div class="SoUnCool"> your CSS would look like this:


div.SoUnCool p {
font-size: 10px;
}

The CSS above says “All <p> tags inside a <div> with a class of “SoUnCool” should have a font size of 12px.”. You can get very specific with CSS selectors:


html body div#SoCool div.SoUnCool p {
font-size: 10px;
}

I’ll get into why you’d want to be more specific or less specific in a different article.

Child Selectors

You can select elements based on their parent elements.


div > p {
font-size: 10px;
}

This says that any <p> tag that is directly inside a <div> should have a font size of 10px.

The Difference Between Descendant and Child Selectors

The difference between parent selectors and descendant selectors is slight but important. Parent selectors select only those elements that are directly inside them, Descendant selectors select all elements inside a specific element. Here’s an example:


<div>
  <p>The first paragraph.</p>
  <span>
    <p>The second paragraph.</p>
  </span>
</div>

With a child selector like this div > p, you would select only the first paragraph because it is a direct child of the <div>. The second paragraph is not a direct child so it would remain untouched. With a descendant selector like this div p you would select both the first and second paragraphs as they are both inside the <div>. The descendant selector doesn’t care how far inside the <div> the paragraphs are, the child selector will only go down one level.

Adjacent Sibling Selectors

The final selector is probably the least used selector (in my opinion) but it can be very useful in certain situations. The sibling selector selects elements that are directly beside each other.


h2 + p {
margin-top: 0;
}

This says that any <p> tag that directly follows an <h2> tag should have no top margin. If you have a bunch of <p> tags following an <h2> tag only the first <p> tag will be changed.

Conclusion

Now you know about the different types of selectors available in CSS 2.1 that work in all major browsers. As you gain more CSS experience knowing which selector to use when will become easier and you’ll be a pro, almost.

Using Multiple CSS Classes

Posted By:
Matt
Posted On:
October 22nd, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

I get the feeling that it might not be common knowledge that you can give HTML elements multiple classes and use those classes to target those elements using CSS. I find multiple classes useful in specific situations, they can really save on the amount of CSS you have to write if you use them properly. Here’s the HTML for multiple classes:

<div class="class1 class2 class3" id="id1"></div>

The code above has 3 classes separated by spaces. You’ll probably only usually use 2 classes at once. I’d use 2 classes in a situation where I need to apply one class that sets the font size, color and line height on a bunch of elements and I’d like a couple of them to also be a different color. One class has all of the formatting and the second class changes the color. This saves me writing 2 separate classes with all of the same properties.

The classes work the same as any class. Whichever one is called last or whichever one has the most specific selector is applied. Multiple CSS classes are a simple thing that will save you a bunch of mark up and make people ask "Can you do that? Its that legal?!".

How To View and Save CSS and HTML Code

Posted By:
Matt
Posted On:
October 19th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

Save Page AsIf you got to this post by searching something along the lines of “how to steals html codes” and you have no intention of learning how to actually make a website for yourself just get lost, you’re a lazy asshole and you’ll go nowhere in life. If you’re trying to learn how to make websites because you want to make a career for yourself and create something you can be proud of then you’re a good dude, read on.

I’m going to show you how to steal someone’s code. I’m not showing you this so that you can be a lazy idiot and steal someone’s website, I’m showing you because I find that the best way to learn something is to see how other people do things. When I was first learning I was always copying interesting layouts from the CSS Zen Garden and messing around with them on my own computer, trying to figure out how they did what they did.

All you need is Firefox. While on the web page you want to “steal” select File > Save Page As (Ctrl+S). Make sure the “Save As Type” option is set to “Web Page, complete” and hit “Save”. Pretty obvious right? Now you have the site saved on your hard drive. It’s probably best to only do this with .html pages. Unless you have PHP or ASP running on your local server, those types of pages won’t work on your computer.

With this website up and running on your computer you can change the CSS, have a look at the images and see how they cut them up and how they used background images. You can change the HTML around, add sections, delete sections, see what happens.

Have fun, learn something, don’t steal. Copyright is automatic upon creation.

An Introduction To CSS

Posted By:
Matt
Posted On:
October 18th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

Now that you understand the basics of XHTML and how to use DOCTYPES, divs, spans and attributes you’re ready for an introduction to CSS.

What Is CSS?

CSS stands for Cascading Style Sheets and is a language that describes how an XHTML document should be displayed.

Where Does CSS Go?

CSS can be used 3 ways. It can be a separate file with a .css extension, it can be code between <style> tags in the head of an XHTML document, and it can be written inside an XHTML tag (this is called “inline”).

Each of the above 3 options are perfectly valid and no matter which option you use the actual CSS is always the same. 99% of the time you’ll be making a separate .css file. With a separate file you can attach it to any XHTML page and if anything needs to change you only have to change it once, in the .css file.

How Do You Link To A Style Sheet?

Let’s get into some actual CSS code. We’ll start with a linked .css file because that’s the way you’ll do it most often. Here’s how you link a CSS file from an XHTML document.

In the <head> section of your XHTML document add a link to your style sheet.

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

“Rel” is the relationship of the document you are linking to, in this case it is the style sheet. “Type” is the type of document you are linking to, in this case it will contain text and css. “Href” is the location of the file you are referencing. “Media” is the type of media you would like your style sheet to format your XHTML document for. We’ll get more into the media type a little later, just leave it as “screen” for now.

Here’s the code from my last XHTML tutorial with the style sheet link in the head:


<html>
  <head>
  <link rel=”stylesheet” type=”text/css” href=”stylesheet.css” media=”screen” />
  </head>
  <body>
    <div id=”header”>
      <h1>Idiot Banter</h1>
      <h2>A blog about Stuff and Things</h2>
      <ul>
        <li><a href=”/blog”>Blog</a></li>
        <li><a href=”/about”>About</a></li>
      </ul>
    </div>
    <h3>The Blog Post Title</h3>
    <p>This is our blog paragraph and I think it’s pretty great.</p>
    <dl>
      <dt>Posted By:</dt>
      <dd>Matt</dd>
      <dt>Posted On:</dt>
      <dd>Tuesday, August 14th, 2007</dd>
    </dl>
  <body>
<html>

How Do You Write CSS?

Let’s write some CSS!

Create a blank file in Dreamweaver, Notepad or TextEdit, copy the XHTML code above and paste it in, save the file as index.html.

Create a blank file in Dreamweaver, Notepad or TextEdit and save it as “stylesheet.css” in the same folder as your index.html file. Everything we do from now on will happen in stylesheet.css but you’ll see your changes in the index.html file. Open index.html in Firefox, open stylesheet.css in the editor of your choice (Dreamweaver, Notepad, TextEdit, BBEdit etc….) and let’s get started.

In stylesheet.css type:

body {
background-color: #071C2D;
}

Save it and refresh (F5) your index.html file in Firefox. If the background is dark blue you did it, you wrote your first bit of CSS! Nice! Imagine you had this style sheet linked to every page on a giant website. In the minute it took you to change that background colour using a style sheet you would have just updated the background colour throughout your entire website. Much better than updating all 100 pages separately.

What Did You Just Do?

Here’s how CSS works. The first part (”body”) is a selector. You’ve selected the body tag which surrounds the entire website. The second part “background-color” is a property and “#071C2D” is a property value, in this case it’s a hexadecimal colour code for a shade of dark blue. So you basically said “Make the background colour of the body dark blue”. Notice that all properties for each selector are surrounded by {}, each property is followed by :, and each property value is followed by ;. For example: selector { property: propertyValue;}.

Let’s Get Crazy

Here are a few styles to add to your style sheet that will make this little fake blog we have look a lot fancier. I won’t explain each one but feel free to experiment with your own colours and leave a comment if you run into any problems.

body {
margin: 0;
padding: 0;
background-color: #071c2d;
color: #cbcaca;
font-size: small;
}

h1 {
color: #aedc3a;
}

h2 {
color: #ffffff;
}

Paste that into your stylesheet.css file, save it, refresh index.html in Firefox and see what you get. Not bad. Play around with that to get a feel for how CSS works.

Conclusion

Basic CSS is pretty simple. If you link to the style sheet properly and stick to the “selector { property: propertyValue;}” rules, you’re on your way. This is just the tip of the ice berg, from here we will cover more complicated selectors, more properties and get into the cascade and how to use it to your advantage.

XHTML DOCTYPES, Divs, Spans and Tag Attributes

Posted By:
Matt
Posted On:
August 30th, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
No Comments

In the first article in this series I gave a basic overview of XHTML and how to mark up a basic blog. That was just a the beginning. What I’m about to show you will give you everything you need to write semantic, accessible XHTML.

DOCTYPES

In order for a web browser to display your document properly you need to tell it what type of document you’re showing it. This is called a DOCTYPE, short for document type declaration. A DOCTYPE is really just a link to a file on the W3 website that tells the browser how to treat the document. Using a proper DOCTYPE ensures your XHTML will be treated as you expect it to be treated. Without a DOCTYPE most browsers revert to quirks mode and can be (arguably) quite unpredictable. Here’s what a DOCTYPE looks like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You really don’t have to worry about memorizing any of that. Whenever I need one I just grab it from A List Apart. If you’d like to know the technical ins and outs of DOCTYPEs there’s an amazing article at A List Apart. I’m really just stressing that you need a DOCTYPE and that it should be placed first, at the very top of your document.

Tag Attributes

You already know a few basic XHTML tags and how to use them but there’s more you can do with those tags. Some tags allow you to add attributes. An attribute is basically more information about the content you are describing. You have already seen an example of an attribute when you made a link. The href of a link is an attribute, it’s information about where the link should go.

Anchor links are the most common place to use attribute tags. You need an href attribute to tell the link where to go. You can use a title attribute to provide more information about where the link is going. And, unless you are using an XHTML Strict DOCTYPE you can use the target attribute to tell the browser how it should open the link. Here’s what an anchor link would look like using all of the attributes:


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

You have 4 options for the target attribute: _blank, _parent, _self, _top. _self is the default and it opens the link in the same window, you don’t have to specify _self, the browser assumes it if you don’t specify anything else. _blank will open the link in a new browser window and to be honest, that’s really the only one I ever use.

Divs & Spans

Two more very important XHTML tags that are slightly more about presentation than they are about structure are <div> and <span> tags. Div tags represent divisions or sections of content. If we take a look at our blog example we may want to outline the header section (page titles and menus) with some divs.


<html>
  <body>
    <div id=”header”>
      <h1>Idiot Banter</h1>
      <h2>A blog about Stuff and Things</h2>
      <ul>
        <li><a href=”/blog”>Blog</a></li>
        <li><a href=”/about”>About</a></li>
      </ul>
    </div>
    <h3>The Blog Post Title</h3>
    <p>This is our blog paragraph and I think it’s pretty great.</p>
    <dl>
      <dt>Posted By:</dt>
      <dd>Matt</dd>
      <dt>Posted On:</dt>
      <dd>Tuesday, August 14th, 2007</dd>
    </dl>
  <body>
<html>

A div is a block level element which means it’s perfectly suited as a container for other elements. A span is an inline element which means it can live inside block level elements as well as inline elements. I realize this is getting a little complicated but it’s really not. Use a div to group multiple elements together, like a heading and a list as we did above. Use a span to highlight a word or two in a paragraph or list like this:

<p>Some text is the same and some might be <span>different</span>.</p>

I suppose now might be the time to mention <strong> and <em> tags. Strong and Em tags indicate emphasis. Strong indicates bold and shows up as bold. Em stands for emphasis and shows up as italics. They are used like any other tag:

<p>Some text that is <strong>strong</strong> and some with <em>emphasis</em>.</p>

Since there are specific tags for strong/bold and emphasis/italics a span shouldn’t be used for either of those. There’s no tag that specifically makes text pink so you’d use a span combined with CSS to create that wild effect.

Conclusion

DOCTYPEs, Divs, Spans and Attributes are all pretty simple but very important. DOCTYPEs tell the browser how it should handle your code. Divs indicate divisions or sections. Spans suggest different parts of the same element. Attributes give you more tools to describe the content you are marking up. Next up: Ids, Classes and some basic CSS.

A Beginners Guide To XHTML

Posted By:
Matt
Posted On:
August 21st, 2007
Posted In:
CSS & XHTML, Tutorials
Comments:
8 Comments

XHTML stands for eXtensible HyperText Markup Language and it’s the first thing you should learn if you’d like to make a website. Don’t let the long weird name full of words you’d never normally use scare you off. XHTML is super easy to master if you think of it the right way.

XHTML is used to describe content, it’s as simple as that. If you have a paragraph, mark it up as a paragraph. A list? Mark it up as a list. Let’s use a simple blog as an example.

The best program to use to write XHTML is Notepad or Text Edit. Open a new file and copy and paste the XHTML code as we go along. Save it as YourSite.html and if you right click on the file you should be able to open it in a web browser and see what you have so far.

The first thing to do in your XHTML file is to add some tags that tell the web browser that this is an HTML file. These tags will be the first and lat things in your file. Here’s what they look like:

<html></html>

Inside the HTML tags you need tags to let the web browser know that this is the body of the document. Here’s what they look like:

<body></body>

A blog website has a name and that name is the most important header on the page. This website’s name is Idiot Banter so we’ll mark it up as a header: <h1>Idiot Banter</h1>. The “h” stands for “header” and the 1 signifies it’s importance. There are 6 levels of headers <h1> through <h6>. Some believe you should only ever have one h1 on a page but that discussion is a little advanced for right now.

So the title of the website is an h1 and if the site has a tag line we’ll make that an h2. It’s also a title but it’s less important than the main title. Here’s how you mark it up: <h2>A blog about Stuff and Things</h2>. So far so good, but here’s where it gets a little complicated.

After the title and the tag line your site probably has a menu. No sweat, a menu is just a list of links. Don’t worry about what it’s eventually going to look like, just concentrate on getting everything marked up properly first. Let’s mark up a link.

You mark up a link with an <a> tag. The “a” stands for “anchor”. I would assume this is because you’re anchoring your ship to that other website/graphic/media file etc…. A link to this site would look like this: <a href="http://www.idiotbanter.com">Idiot Banter</a>. That looks a little confusing so let’s break it down. You have whatever you’d like to link surrounded by <a> tags: <a>Idiot Banter</a>. The <a> tags need parameters because parameters tell it what to do. The most important parameter is “href”. “href” stands for Hypertext Reference and it tells the link where to go. If you’re linking to a website outside of yours you need http:// in front of the address. If you’re linking to a page within your website you don’t need the http://, you’d just write /about.html. There are a few other parameters which can be useful but we’ll cover those later.

We know a menu is a list of links so let’s mark up a list. There are three types of lists, ordered lists, unordered lists and definition lists. An ordered list <ol> has numbers and an unordered list <ul> has bullets. Definition lists <dl> are a slightly different story and we’ll get to them shortly. Use an ordered list when your list has a specific order, like a track listing on an album, and use an unordered list when there is no specific order, like a menu on a website. We’ll use an unordered list. To start marking up a list we’ll use the appropriate list tag: <ul> </ul>. Inside a list are list items <li> </li> and inside those list items are our links for the menu. Here’s what our menu looks like when you put it all together:


<ul>
  <li><a href="http://www.idiotbanter.com">Idiot Banter</a></li>
  <li><a href="http://www.google.com">Google</a></li>
</ul>

And here’s what we have for the entire site so far:


<html>
  <body>
    <h1>Idiot Banter</h1>
    <h2>A blog about Stuff and Things</h2>
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </body>
</html>

Two headings and a list of links (our menu). Now we’ll need some blog posts.

Start by thinking about what makes up a blog post. Blog posts have a heading and the post which is made up of paragraphs. Blog posts also usually have a date they were posted and who they were posted by. Let’s get started.

We’ve done headings before and we’ll make these one’s <h3>s since they aren’t as important as the site name and tag line. Here’s the markup for the blog title:

<h3>The Blog Post Title</h3>.

Paragraphs are easy, they just need <p> tags around them. Here’s the markup for a paragraph:

<p>This is our blog paragraph and I think it's pretty great.</p>.

All we have left are the date the blog was posted and the name of the person who posted it. Let’s mark this up as a definition list <dl>. Inside a definition list you have a definition title <dt> which is what you are defining, and you have a definition description <dd> that defines the definition title. We’ll have 2 titles and 2 descriptions for this example. The first title is “Posted By:” and it’s description is “Matt”. The second title is “Posted On:” and the description is “Tuesday, August 14th, 2007″. Here’s how it looks when it’s marked up:


<dl>
  <dt>Posted By:</dt>
  <dd>Matt</dd>
  <dt>Posted On:</dt>
  <dd>Tuesday, August 14th, 2007</dd>
</dl>

Here’s the full blog post:


<h3>The Blog Post Title</h3>
<p>This is our blog paragraph and I think it's pretty great.</p>
<dl>
  <dt>Posted By:</dt>
  <dd>Matt</dd>
  <dt>Posted On:</dt>
  <dd>Tuesday, August 14th, 2007</dd>
</dl>

And the full website with the Headings, the menu and the blog post:


<html>
  <body>
    <h1>Idiot Banter</h1>
    <h2>A blog about Stuff and Things</h2>
    <ul>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
    <h3>The Blog Post Title</h3>
    <p>This is our blog paragraph and I think it's pretty great.</p>
    <dl>
      <dt>Posted By:</dt>
      <dd>Matt</dd>
      <dt>Posted On:</dt>
      <dd>Tuesday, August 14th, 2007</dd>
    </dl>
  <body>
<html>

Here’s what it looks like in a web browser: XHTML Example.

If you right click on that web page and select “View Page Source” or “View Source” you’ll see a bunch of other HTML at the top of the page. We’ll get to that next time, don’t worry about it for now.

That’s all there is to basic XHTML. You now know how to code XHTML for a simple blog. You know about:

  • headings <h1></h1>
  • lists <ul><li></li></ul>
  • links <a href="http://www.google.com">Google</a>
  • paragraphs <p></p>
  • and definition lists <dl><dt></dt><dd></dd></dl>

That’s a pretty good start! We’ll look at some of the more awesome parts of XHTML next time. Just remember that every tag you open needs to be closed. You’re just marking up content so that the computer understands what it is. It has nothing to do with how it looks in the end.

Show Background