CSS Starter Guide - Lesson 3: More on selectors

Lesson 3: More on selectors

Element selectors-Use the name of the element to apply styles to it. p{} selects all <p> elements.

Class selectors-Selects all elements that have a class attribute of a certain name. Class name is preceded with a dot ('.').

<p class="myClass">text</p>
.myClass{}

Id selectors-Selects an element with a certain id attribute. Only one element in a page can have the same id attribute. Id is preceded by pound sign('#').

<p id="myId">text</p>
#myId{}

Specificity-Certain types or combinations of selectors can help you drill down to the exact element(s) that you want so that you can make the right kinds of changes. Selectors in increasing specificity:

• Element selectors
• Class selectors
• Id selectors

Combining Selectors-You may want to stack selectors to get the kind of precision that you need. I usually give unique regions of my pages an id attribute. Consult the code below:

<div id="header">
  <h1>page Title</h1>
  <ul class="nav">
    <li><a href="#">Home</a>
    <li><a href="#">Contact</a>
  </ul>
</div>

I would like all my navigations to have the same color:

.nav{color:white;}

I can increase the specificity a little by putting the element that I know will have the nav class:

ul.nav{color: white;}

But I would like to have the nav in the header to not have the bullets that are default for list items, so I select the nav that's in the header:

#header ul.nav{list-style: none;}

I would also like to make sure that the nav displays inline, like tabs, so I select all li elements that are children of ul elements with a class attribute of nav that are in the div with the id attribute of header.

#header ul.nav li{display: inline;}</code>

Quite a mouthful but it makes sense. If I had skipped any of those selectors I might grab the wrong elements so I want to make sure I'm using the right kind of specificity.

When you've gone too far-While making sure you are specific in your selectors, it is possible to go a little overboard. You start throwing gobs of classes and ids into your markup and you are going to find that your CSS and HTML are going to end up bloated and harder to maintain.

CSS Starter Guide - Lesson 2: The Box Model

Lesson 2: The Box Model

Every html element has an invisible box around it that determines how the elements and text inside it are displayed. The starting styles of any element are determined by the browser. This is important to remember because you may struggle with a css bug in a browser and forget that other properties are effecting the element. Firebug can help with this somewhat. Using the inspector you can see the layout properties of the element and decide if you should override them.

CSS Starter Guide - Lesson 1: Elements,Properties, and Selectors--Oh My!

Lesson 1: Elements,Properties, and Selectors--Oh My!

You should go through the tutorial on http://w3schools.com if these words aren't familiar to you, but I'm gonna put a mini-glossary here in case you don't have the terminology down.

Example HTML: <p>some paragraph</p> Example CSS: p{color: red;}

Element-Any HTML or XML tag and it's closing tag. Sometimes referred to as a node.

<p></p>

Properties-A CSS style attribute. There are lots of properties so either get a reference book or keep a online reference handy. color: red; Selector-In CSS this precedes the list of properties in the curly braces. Basically it links the CSS properties to elements. p{}

CSS Starter Guide - Getting Started

Getting Started

Knowledge

Before starting with CSS you should have a good knowledge of XHTML. It's a lot like HTML but a few extra rules must be followed.

Tools

Unfortunately there aren't a lot of good CSS design tools. Most of the ones that "help" with some WYSIWYG editor either limit what you can do or don't do what you want them to. And in my experience most of them don't create good code. Even Blogger here generates a bunch of crap markup.

TextPad It's free to try and you can use it indefinitely without purchasing it--Although if you like it you should purchase it to show your support. While you're at it download the syntax definitions for CSS and any other languages you want. If you want a little more there's a couple programs that may cut it.

CSSEdit2 This looks like the best one I've seen. I haven't been able to try it out much since I don't have a mac, but I like the features.

Stylemaster This one's alright, the best I've seen for Windows. It has documentation on CSS properties built in so you don't need to leave the client to look up stuff, which is a handy feature.

Firebug The best tool to ever made for debugging web pages. It's an add-on for Firefox(best browser in the world) so not as good at debugging IE problems, but for javascript and CSS problems it's great.

Web Developer Another add-on for firefox. I don't use it much since discovering Firebug but still handy at times.

Opera Another Standards Compliant Browser. Good to check your site with to make sure you're following standards. A little more strict than FF in my experience, so you can use it when debugging to see if IE is the problem or if it's Firefox.