Andrea's Blogger Templates

How To Remove 'Showing Post With Label' Message From Blogger

2013-08-16T05:46:00.001-07:00

Steps To Follow To Remove "Showing post with label XXXXXXX" From Blogger:-

1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.

3--> Click Expand Widgets

4--> Search for codes gven below

IE and the box model

2012-09-08T10:37:00.001-07:00

Unfortunately, older versions of Internet Explorer, along with IE 6 in quirks mode, use their own, nonstandard box model. Instead of measuring just the width of the content, these browsers take the width property as the sum of the width of the content, padding, and borders. This actually makes a lot of sense, because in the real-world boxes have a fixed size, and the padding goes on the inside. The more padding you add, the less room there will be for the content. However, despite the logic, the fact that these versions of IE disregard the specification can cause significant problems. For instance, in the previous example the total width of the box would only be 90 pixels in IE 5.x. This is because IE 5.x will consider the 5 pixels of padding on each side as part of the 70-pixel width, rather than in addition to it (see Figure 3-3).

The CSS 3 box-sizing property allows you to define which box model to use, although this feature is unlikely to be widely used except in some very specific circumstances.

Figure 3-3. IE’s proprietary box model can cause elements to be smaller than intended.

Luckily, there are several ways you can tackle this issue, the details of which can be found in Chapter 9. However, by far the best solution is to avoid the problem altogether. You can do this by never adding padding to an element with a defined width. Instead, try adding padding or margins to the element’s parent or children.

Box model recap

2012-09-08T10:07:00.001-07:00

The box model is one of the cornerstones of CSS and dictates how elements are displayed and, to a certain extent, how they interact with each other. Every element on the page is considered to be a rectangular box made up of the element’s content, padding, border, and margin (see Figure 3-1).

Figure 3-1. An illustration of the box model

Padding is applied around the content area. If you add a background to an element, it will be applied to the area formed by the content and padding. As such, padding is often used to create a gutter around content so that it does not appear flush to the side of the background. Adding a border applies a line to the outside of the padded area. These lines come in various styles such as solid, dashed, or dotted. Outside the border is a margin. Margins are transparent and cannot be seen. They are generally used to control the spacing between elements.

CSS 2.1 also contains the outline property. Unlike the border property, outlines are drawn over the top of an element’s box, so they don’t affect its size or positioning. Because of this, outlines can be useful when fixing bugs, because they won’t alter the layout of your page. Outlines are supported by most modern browsers including IE 8 but are not supported in IE 7 and below.

Padding, borders, and margins are optional and default to zero. However, many elements will be given margins and padding by the user-agent style sheet. You can override these browser styles by setting the element’s margin or padding back to zero. You can do this on a case-by-case basis or for every element by using the universal selector:

* {
margin: 0;
padding: 0;
}

Just remember that this technique is fairly indiscriminant, so it can have adverse effects on elements like the option element. As such it’s probably safer to zero down the padding and margins explicitly using a global reset.

In CSS, width and height refer to the width and height of the content area. Adding padding, borders, and margins will not affect the size of the content area but will increase the overall size of an element’s box. If you wanted a box with a 10-pixel margin and a 5-pixel padding on each side to be 100 pixels wide, you would need to set the width of the content to be 70 pixels (see Figure 3-2):

#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}

Figure 3-2. The correct box model

Padding, borders, and margins can be applied to all sides of an element or individual sides. Margins can also be given a negative value and can be used in a variety of techniques.

Visual Formatting Model Overview

2012-09-08T09:44:00.002-07:00

Three of the most important CSS concepts to grasp are floating, positioning, and the box model. These concepts control the way elements are arranged and displayed on a page, forming the basis of CSS layout. If you are used to controlling layout with tables, these concepts may seem strange at first. In fact, most people will have been developing sites using CSS for some time before they fully grasp the intricacies of the box model, the difference between absolute and relative positioning, and how floating and clearing actually work. Once you have a firm grasp of these concepts, developing sites using CSS becomes that much easier.

In this chapter you will learn about

The intricacies and peculiarities of the box model
How and why margins collapse
The difference between absolute and relative positioning
How floating and clearing work

Let's See:
Box model recap

Removing comments and optimizing your style sheets

2012-09-05T12:47:00.000-07:00

Comments can increase the size of your CSS files quite considerably. Therefore, you may want to strip comments from your live style sheets. Many HTML/CSS and text editors have a search-and-replace option, making it pretty easy to remove comments from your code. Alternatively, you could use one of several online CSS optimizers such as the one found at www.cssoptimiser.com Not only does an optimizer remove comments, but it also strips out whitespace, helping to shave off a few extra bytes from your code. If you do choose to strip comments from your live style sheets, remember to retain a commented version for your production environment. The best way of managing this process is to create a deployment script that strips comments automatically when you make your changes go live. However, as this is an advanced technique, it’s probably best left to fairly large, sophisticated sites.

Instead, the best way of reducing file size would be to enable server-side compression. If you are using an Apache server, talk to your hosts about installing mod_gzip or mod_deflate. All modern browsers can handle files compressed with GZIP, and decompress them on the fly. These Apache modules will detect whether your browser can handle such files, and if it can, send a compressed version. Server-side compression can reduce your HTML and CSS files by around 80 percent, reducing your bandwidth and making your pages much faster to download. If you don’t have access to these Apache modules, you still may be able to compress your files by following the tutorial found at http://tinyurl.com/8w9rp.

Note to self

2012-09-05T12:39:00.001-07:00

With large, complicated projects, it is often useful to annotate your CSS files with temporary comments to aid development. These could be reminders of things you need to do before launch or look-up tables for common values such as column widths.

If there are a lot of colors in your design, you will probably find yourself constantly flicking back and forth between your graphics application and text editor to check hex values. This can be a pain at times so several people have suggested the need for CSS variables. While this is an interesting idea it would take CSS one step closer to a proper programming language and potentially alienate non-programmers. As such, I tend to use a low-fi approach instead. All I do is add a little color look-up table at the top of my style sheet so I can constantly refer to it during development. Once I’m finished developing the page, I’ll usually strip this out.

/* Color Variables

@colordef #434343; dark gray
@colordef #f2f6e4; light green
@colordef #90b11f; dark green
@colordef #369; dark blue
*/

To make your comments more meaningful, you can use keywords to distinguish important comments. I use @todo as a reminder that something needs to be changed, fixed, or revisited later on, @bugfix to document a problem with the code or a particular browser, and @workaround to explain a nasty workaround:

/* :@todo Remember to remove this rule before the site goes live */
/* @workaround: I managed to fix this problem in IE by setting a small
negative margin but it's not pretty */
/* @bugfix: Rule breaks in IE 5.2 Mac */

In programming terms, these keywords are called gotchas and can prove very helpful in the later stages of development. In fact, all these terms form part of a project known as CSSDoc (http://cssdoc.net) that aims to develop a standardized syntax for commenting your style sheets.

Structuring your code

2012-09-05T12:25:00.000-07:00

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance. At Clearleft, we usually start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.

Once the general styles are covered, we start to get a little more specific and tackle our helper styles. These are general classes that are used across the site and include things like forms and error messages. We then move onto structural elements like layout and navigation.

As we move through the style sheet, we slowly layer styles on top of each other, getting more and more specific as we go. Now that the page furniture is out of the way, we turn our attention to page-specific components. Lastly we include any overrides and exceptions at the bottom of the document. The whole document structure ends up looking like this:

General styles

Body styles
Resets
Links
Headings
Other elements

Helper styles

Forms
Notifications and errors
Consistent items

Page structure

Headers, footers, and navigation
Layout
Other page furniture

Page components

Individual pages

Overrides

I use a large, stylized comment block to visually separate each section.

/* @group general styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* @group helper styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* @group page structure
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* @group page components
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* @group overrides
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

Not everything naturally falls into a well-defined block, so some judgment is required. Keep in mind that the more you can break up and objectify your code, the easier it is to understand and the quicker you can find the rules you are looking for.

Because my style sheets tend to have a similar structure, I save time by creating my own precommented CSS templates to use on all my projects. You can save even more time by adding a few common rules that you use in all of your sites, to create a sort of prototype CSS file. That way, you will not have to reinvent the wheel each time you start a new project.

Applying styles to your document

2012-09-05T11:57:00.000-07:00

You can add styles directly to the head of a document by placing them between style tags; however, this is not a very sensible way to apply styles to a document. If you want to create another page using the same styles, you would have to duplicate the CSS on the new page. If you then wanted to change a style, you would have to do it in two places rather than one. Luckily, CSS allows us to keep all our styles in one or more external style sheets. There are two ways to attach external style sheets to a web page. You can link to them or you can import them:

You do not have to confine importing to an HTML document. You can also import one style sheet from another style sheet. This allows you to link to your basic style sheet from the HTML page and then import your more complicated styles into that style sheet:

@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);

Breaking your CSS into multiple style sheets used to be a common approach and was the method I recommended in the first edition of this book. However, recent browser benchmarking has shown that importing style sheets can be slower than linking to them.

There are two other speed related problems when using multiple CSS files. First off, multiple files will result in more packets being sent from the server, and it’s the number, rather than the contents, of these packets that affects download time. Furthermore, browsers are only able to download a limited number of concurrent files from the same domain at any one time. For older browsers, this limit used to be a paltry two files, although modern browsers have upped this to eight. So in an older browser, if you have three style sheets, you would have to wait for the first two files to download before it starts downloading the third. Because of these reasons, a single, well-structured CSS file can help improve download speeds considerably.

A single CSS file also allows you to keep all your code in one place. I used to recommend splitting up your code for easy maintenance. However, it was always difficult to decide if a specific declaration related to the layout or the typography of the site. Often, it could relate to both, and you’d end up making arbitrary decisions where to put them. This approach also meant having to keep multiple style sheets open and continually swapping between files. With features like code folding being built into most modern CSS editors, it’s now much easier to edit a single page than it used to be. So for these reasons, I tend to prefer a single CSS file over several smaller ones. That being said, it really does depend on the site in question, so there are no hard and fast rules here.

When writing your own style sheets, you will have a good idea how they are structured, what problems you have encountered, and why things have been done a certain way. But if you come back to that style sheet in six months, there is a good chance you will have forgotten much of this. Additionally, you may need to hand your CSS to somebody else for implementation, or another developer may have to edit your code in the future. It is therefore a good idea to comment your code.

Adding comments in CSS is very simple. A CSS comment starts with /* and ends with */. This type of commenting is known as C-style commenting, as it is the type of comment used in the C programming language. Comments can be single or multiline and can appear anywhere within the code.

/* Body Styles */
body {
font-size: 67.5%; /* Set the font size */
}

If your CSS files become very long, finding the style you want can be difficult. One way to speed things up is to add a flag to each of your comment headers. A flag is simply an extra word preceding your header text that does not naturally appear in your CSS files. A search for your flag followed by the first couple of letters in your comment header will take you right to the part of the file you’re looking for. So in this example, a search for “@group typ” will take you straight to the typography section of your style sheet:

/* @group typography */

If you happen to use the OS X editor, CSS Edit, this format is used to create a simple yet effective means of navigating your style sheet.

Planning, organizing, and maintaining your style sheets

2012-09-05T11:47:00.005-07:00

The larger, more complicated, and graphically rich your sites become, the harder your CSS is to manage. In this section, I will look at ways to help you manage your code, including grouping your styles into logical sections and adding comments to make your code easier to read.

Applying styles to your document
Structuring your code
Note to self
Removing comments and optimizing your style sheets

Inheritance

2012-09-05T10:57:00.001-07:00

People often confuse inheritance with the cascade. Although they seem related at first glance, the two concepts are actually quite different. Luckily, inheritance is a much easier concept to grasp. Certain properties, such as color or font size, are inherited by the descendants of the elements those styles are applied to. For instance, if you were to give the body element a text color of black, all the descendants of the body element would also have black text. The same would be true of font sizes. If you gave the body a font size of 1.4 ems, everything on the page should inherit that font size. I say should because IE for Windows and Netscape have problems inheriting font sizes in tables. To get around this, you will either have to specify that tables should inherit font sizes or set the font size on tables separately.

If you set the font size on the body, you will notice that this style is not picked up by any headings on the page. You may assume that headings do not inherit text size. But it is actually the browser default style sheet setting the heading size. Any style applied directly to an element will always override an inherited style. This is because inherited styles have a null specificity.

Inheritance is very useful, as it lets you avoid having to add the same style to every descendant of an element. If the property you are trying to set is an inherited property, you may as well apply it to the parent element. After all, what is the point of writing this:

p, div, h1, h2, h3, ul, ol, dl, li {color: black;}

when you can just write this:

body {color: black;}

Just as sensible use of the cascade can help simplify your CSS, good use of inheritance can help to reduce the number and complexity of the selectors in your code. It you have lots of elements inheriting various styles, though, determining where the styles originate can become confusing.

Adding a class or an ID to the body tag

2012-09-02T03:42:00.001-07:00

One interesting way to use specificity is to apply a class or an ID to the body tag. By doing this, you can then override styles on a page-by-page or even a site-wide basis. For instance, if you wanted all your news pages to have a specific layout, you could add a class name to the body element and use it to target your styles:

body.news {
/* do some stuff */
}

<body class="news">
<p>My, what a lovely body you have.</p>
</body>

Sometimes, you’ll need to override these styles on a particular page, such as your news archive page. In this case, you can add an ID to the body tag to target that specific page.

body.news {
/* do some stuff */
}

body#archive {
/* do some different stuff */
}

<body id="archive" class="news">
<p>My, what a lovely body you have.</p>
</body>

Using a class for the type of page and an ID for the specific page gives you a huge amount of control over the design and layout of your site. As such, this is one of my favorite techniques for writing maintainable code.

Using specificity in your style sheets

2012-09-02T03:33:00.000-07:00

Specificity is very useful when writing CSS, as it allows you to set general styles for common elements and then override them for more specific elements. For instance, say you want most of the text on your site black, except for your intro text, which you want gray. You could do something like this:

p {color: black;}
p.intro {color: grey;}

This is fine for smaller sites. However, on larger sites you will find more and more exceptions will start to creep in. Maybe you want to have the introductory text on your news stories blue and the introductory text on your home page on a gray background. Each time you create a more specific style, you will probably need to override some of the general rules. This can lead to quite a bit of extra code. It can also start to get very complicated, as one element may be picking up styles from a variety of places.

To avoid too much confusion, I try to make sure my general styles are very general while my specific styles are as specific as possible and never need to be overridden. If I find that I have to override general styles several times, it’s simpler to remove the declaration that needs to be overridden from the more general rules and apply it explicitly to each element that needs it.

The cascade and specificity

2012-08-31T15:15:00.002-07:00

With even a moderately complicated style sheet, it is likely that two or more rules will target the same element. CSS handles such conflicts through a process known as the cascade. The cascade works by assigning an importance to each rule. Author style sheets are those written by the site developers and are considered the most important. Users can apply their own styles via the browser and these are considered the next most important. Finally, the default style sheets used by your browser or user agent are given the least importance so you can always override them. To give users more control, they can override any rule by specifying it as !important even a rule flagged as !important by the author. This is to allow for specific accessibility needs such as using a medium contrast user style sheet if you have a certain forms of dyslexia.

In This Section

Using specificity in your style sheets
Adding a class or an ID to the body tag

So the cascade works in the following order of importance:

User styles flagged as !important
Author styles flagged as !important
Author styles
User styles
Styles applied by the browser/user agent

Rules are then ordered by how specific the selector is. Rules with more specific selectors override those with less specific ones. If two rules are equally specific, the last one defined takes precedence.

Specificity

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors. However, if you have fewer than 10 selectors in a specific selector, you can calculate specificity in base 10 for simplicity’s sake.

The specificity of a selector is broken down into four constituent levels: a, b, c, and d.

If the style is an inline style, a equals 1.
b equals the total number of ID selectors.
c equals the number of class, pseudo-class, and attribute selectors.
d equals the number of type selectors and pseudo-element selectors.

Using these rules, it is possible to calculate the specificity of any CSS selector. Table 2-1 shows a series of selectors, along with their associated specificity.

**Table 2-1. Specificity examples**
Selector	Specificity	Specificity in Base 10
Style=""	1,0,0,0	1000
#wrapper #content {}	0,2,0,0	200
#content .datePosted {}	0,1,1,0	110
div#content {}	0,1,0,1	101
#content {}	0,1,0,0	100
p.comment .dateposted {}	0,0,2,1	21
p.comment{}	0,0,1,1	11
div p {}	0,0,0,2	2
p {}	0,0,0,1	1

At first glance, all this talk of specificity and high but undefined based numbers may seem a little confusing, so here’s what you need to know. Essentially, a rule written in a style attribute will always be more specific than any other rule. A rule with an ID will be more specific than one without an ID, and a rule with a class selector will be more specific than a rule with just type selectors. Finally, if two rules have the same specificity, the last one defined prevails.

Specificity can be extremely important when fixing bugs, as you need to know which rules take precedence and why. For instance, say you had this set of rules. What color do you think the two headlines will be?

#content div#main-content h2 {
color: gray;
}
#content #main-content>h2 {
color: blue;
}
body #content div[id="main-content"] h2 {
color: green;
}
#main-content div.news-story h2 {
color: orange;
}

#main-content [class="news-story"] h2 {
color: yellow;
}
div#main-content div.news-story h2.first {
color: red;
}

<div id="content">
<div id="main-content">
<h2>Strange Times</h2>
<p>Here you can read bizarre news stories from around the globe.</p>
<div class="news-story">
<h2 class="first">Bog Snorkeling Champion Announced Today</h2>
<p>The 2008 Bog Snorkeling Championship was won by Conor Murphy
with an impressive time of 1 minute 38 seconds.</p>
</div>
</div>
</div>

The answer, surprisingly, is that both headlines are gray. The first selector has the highest specificity because it’s made up of two ID selectors. Some of the later selectors may look more complicated, but as they only contain one ID, they will always lose out against the more specific selectors.

If you ever come across a CSS rule that just doesn’t seem to be working, you could be suffering from a specificity clash. Try making your selectors more specific by adding the ID of one of its parents. If that fixes the problem, you’ll probably find that there is a more specific rule somewhere in your style sheet overriding what you’re trying to do. If that’s the case, you’ll probably want to go back through your code and clean up the specificity clashes to keep your code as lean as possible.

Attribute selectors

2012-08-30T15:45:00.000-07:00

As the name suggests, the attribute selector allows you to target an element based on the existence of an attribute or the attribute’s value. This allows you to do some very interesting and powerful things.

For example, when you hover over an element with a title attribute, most browsers will display a tooltip. You can use this behavior to expand the meaning of things such as acronyms and abbreviations:

<p>The term <acronym title="self-contained underwater breathing
apparatus">SCUBA</acronym> is an acronym rather than an abbreviation
as it is pronounced as a word.</p>

However, there is no way to tell that this extra information exists without hovering over the element. To get around this problem, you can use the attribute selector to style acronym elements with titles differently from other elements—in this case, by giving them a dotted bottom border. You can provide more contextual information by changing the cursor from a pointer to a question mark when the cursor hovers over the element, indicating that this element is different from most.

acronym[title] {
border-bottom: 1px dotted #999;
}

acronym[title]:hover, acronym[title]:focus {
cursor: help;
}

In addition to styling an element based on the existence of an attribute, you can apply styles based on a particular value. For instance, sites that are linked to using a rel attribute of nofollow gain no added ranking benefit from Google. The following rule displays an image next to such links, possibly as a way of showing disapproval of the target site:

a[rel="nofollow"] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}

All modern browsers including IE 7 support these selectors. However, because IE 6 doesn’t support attribute selectors, you could potentially use them to apply one style to IE 6 and a different style to more capable browsers. For instance, Andy Clarke makes use of this technique by presenting black and white version of his site to IE 6 (see Figure 2-3) and a color one to all other browsers (see Figure 2-4).

Figure 2-3. Andy Clarke serves up a black and white version of his site to IE 6 using attribute selectors, among other techniques.

Figure 2-4. More modern browsers get a color version.

#header {
background: url(branding-bw.png) repeat-y left top;
}
[id="header"] {
background: url(branding-color.png) repeat-y left top;
}

Some attributes can have more than one value, separated by spaces. The attribute selector allows you to target an element based on one of those values. For instance, the XFN microformat allows you to define the relationship you have with a site by adding keywords to the rel attribute of an anchor link. So I can say that a particular site belongs to a work colleague of mine by adding the co-worker keyword to the links in my blogroll. I can then show readers that I work with that person by displaying a particular icon next to that co-worker’s name.

.blogroll a[rel~="co-worker"] {
background: url(co-worker.gif) no-repeat left center;
}

<ul class="blogroll">
<li>
<a href="http://adactio.com/" rel="friend met colleague co-worker">
Jeremy Keith</a>
</li>
<li>
<a href="http://clagnut.com/" rel="friend met colleague co-worker">
Richard Rutter</a>
</li>
<li>
<a href="http://hicksdesign.com/" rel="friend met colleague">
John Hicks</a>
</li>
<li>
<a href="http:// stuffandnonsense.co.uk/" rel="friend met colleague">
Andy Clarke</a>
</li>
</ul>

Child and adjacent sibling selectors

2012-08-30T15:10:00.001-07:00

The first of these advanced selectors is the child selector. Whereas a descendant selector will select all the descendants of an element, a child selector only targets the element’s immediate descendants, or children. In the following example, the list items in the outer list will be given a custom icon while list items in the nested list will remain unaffected (see Figure 2-1):

#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}

<ul id="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/services/">Services</a>
<ul>
<li><a href="/services/design/">Design</a></li>
<li><a href="/services/development/">Development</a></li>
<li><a href="/services/consultancy/">Consultancy</a></li>
</ul>
</li>
<li><a href="/contact/">Contact Us</a></li>
</ul>

Figure 2-1. The child selector styles the children of the list but not its grandchildren.

The child selector is supported by IE 7 and above. However, there is a small bug in IE 7 that causes problems if there are HTML comments between the parent and child.

It is possible to fake a child selector that works in IE 6 and below by using the universal selector. To do this, you first apply to all of the descendants the style you want the children to have. You then use the universal selector to override these styles on the children’s descendants. So to fake the previous child selector example you would do this:

#nav li {
background: url(folder.png) no-repeat left top;
badding-left: 20px;
}

#nav li * {
background-image: none;
padding-left: 0;
}

Sometimes, you may want to style an element based on its proximity to another element. The adjacent sibling selector allows you to target an element that is preceded by another element that shares the same parent. Using the sibling selector, you could make the first paragraph following a top-level heading bold, gray, and slightly larger than the subsequent paragraphs (see Figure 2-2):

h2 + p {
font-size: 1.4em;
font-weight: bold;
color: #777;
}

<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru is a one day event to celebrate
these cute local animals. The festival included a fashion show where
animals are dressed up in various amusing costumes.</p>
<p>Guinea pigs can be fried, roasted, or served in a casserole. Around
65 million guinea pigs are eaten in Peru each year.</p>

Figure 2-2. The adjacent sibling selector can be used to style the first paragraph after a headline, allowing you to do away with extraneous classes.

As with the child selector, this fails in IE 7 if comments appear between the elements you are targeting.

Advanced selectors

2012-08-30T14:57:00.002-07:00

CSS 2.1 and CSS 3 have a number of other useful selectors. Unfortunately, while most modern browsers support these advanced selectors, older browsers like IE 6 do not. Luckily, CSS was created with backward compatibility in mind. If a browser doesn’t understand a selector, it ignores the whole rule. That way, you can apply stylistic and usability embellishments in more modern browsers and not worry about it causing problems in older browsers. Just remember to avoid using these more advanced selectors for anything critical to the function or layout of your site.

The universal selector *

2012-08-30T14:28:00.000-07:00

The universal selector is possibly one of the most powerful and least used of all the selectors. The universal selector acts like a wild card, matching all the available elements. Like wild cards in other languages, the universal selector is denoted by an asterisk. The universal selector is often used to style every element on a page. For instance, you can remove the default browser padding and margin on every element using the following rule:

* {
padding: 0;
margin: 0;
}

When combined with other selectors, the universal selector can be used to style all the descendants of a particular element or skip a level of descendants. You will see how this can be put to practical effect a little later in this chapter.

Pseudo-classes

2012-08-30T14:17:00.000-07:00

There are instances where you may want to style an element based on something other than the structure of the document—for instance, the state of a link or form element. This can be done using a pseudo-class selector.

/* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated.
focus is added for keyboard support */
a:hover, a:focus, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

:link and :visited are known as link pseudo-classes and can only be applied to anchor elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can theoretically be applied to any element. Most modern browsers support this functionality. Unsurprisingly, IE 6 only pays attention to the :active and :hover pseudo-classes when applied to an anchor link, and ignores :focus completely. IE7 supports :hover on arbitrary elements but ignores :active and :focus.

Last, it’s worth pointing out that pseudo-classes can be strung together to create more complex behaviors, such as styling the hover effect on visited links different from those on unvisited links.

/* makes all visited linkes olive on hover */
a:visited:hover {color:olive;}

Common selectors

2012-08-30T03:35:00.000-07:00

The most common kinds of selectors are type and descendant selectors. Type selectors are used to target a particular type of element, such as a paragraph or a heading element. You do this by simply specifying the name of the element you wish to style. Type selectors are sometimes also referred to as element or simple selectors.

p {color: black;}
h1 {font-weight: bold;}

Descendant selectors allow you to target the descendants of a particular element or group of elements. A descendant selector is indicated by a space between two other selectors. In this example, only paragraph elements that are descendants of a blockquote will be indented, while all other paragraphs will remain unchanged.

blockquote p {padding-left: 2em;}

These two types of selector are great for applying generic styles that apply across the board. To be more specific and target selected elements, you can use ID and class selectors. As the names suggest, these selectors will target elements with the corresponding ID or class name. ID selectors are identified using a hash character; class selectors are identified with a period. The first rule in this example will make the text in the introductory paragraph bold, and the second rule will make the date grey:

#intro {font-weight: bold;}
.date-posted {color: #ccc;}

<p id="intro">Happy Birthday Andy</p>
<p class="date-posted">24/3/2009</p>

As I mentioned previously, many CSS authors develop an overreliance on class and ID selectors. If they want to style headlines one way in the main content area and another way in the secondary content area, there is the tendency to create two classes and apply a class to each headline. A much simpler approach is to use a combination of type, descendant, ID, and/or class selectors:

#main-content h2 {font-size: 1.8em;}
#secondaryContent h2 {font-size: 1.2em;}

<div id="main-content">
<h2>Articles</h2>
...
</div>
<div id="secondary-content">
<h2>Latest news</h2>
...
</div>

This is a very simple and obvious example. However, you will be surprised how many elements you can successfully target using just the four selectors discussed so far. If you find yourself adding lots of extraneous classes to your document, it is probably a warning sign that your document is not well structured. Instead, think about how these elements differ from each other. Often, you will find that the only difference is where they appear on the page. Rather than give these elements different classes, think about applying a class or an ID to one of their ancestors, and then targeting them using a descendant selector.

Getting Your Styles to Hit the Target

2012-08-30T03:29:00.003-07:00

A valid and well-structured document provides the foundations to which your styles are applied. To be able to style a particular HTML element using CSS, you need to have some way of targeting that element. In CSS the part of a style rule that does this is called the selector.

In this chapter, you will learn about:

Common selectors

Advanced selectors
New CSS 3 selectors
The wonderful world of specificity and the cascade
Planning and maintaining your style sheets
How to comment your code

Divs and spans

2012-08-30T00:00:00.000-07:00

One element that can help add structure to a document is the div element. Many people mistakenly believe that a div element has no semantic meaning. However, div actually stands for division and provides a way of dividing a document into meaningful areas. So by wrapping your main content area in a div and giving it a class of content, you are adding structure and meaning to your document.

To keep unnecessary markup to a minimum, you should only use a div element if there is no existing element that will do the job. For instance, if you are using a list for your main navigation, there is no need to wrap it in a div.

<ul>

<li><a href="/about/">About Us</a></li>

<li><a href="/contact/">Contact</a></li>

</ul>

</div>

You can remove the div entirely and simply apply your class to the list instead:

<li><a href="/about/">About Us</a></li>

<li><a href="/contact/">Contact</a></li>

</ul>

Using too many divs is often described as divitus and is usually a sign that your code is poorly structured and overly complicated. Some people new to CSS will try to replicate their old table structure using divs. But this is just swapping one set of extraneous tags for another. Instead, divs should be used to group related items based on their meaning or function rather than their presentation or layout.

Whereas divs can be used to group block-level elements, spans can be used to group or identify inline elements:

<h2>Andy wins an Oscar for his cameo in Iron Man </h2>

<p>Published on <span class="date">February 22nd, 2009</span>

by <span class="author">Harry Knowles</span></p>

Although the goal is to keep your code as lean and mean(ingful) as possible, sometimes you cannot avoid adding an extra nonsemantic div or span to get the page to display the way you want. If this is the case, don’t fret too much over it. We live in a transitional period, and CSS 3 will give us much greater control of our documents. In the meantime, real-world needs often have to come before theory. The trick is knowing when you have to make a compromise and if you are doing it for the right reasons.

IDs or Classes?

2012-08-29T23:26:00.001-07:00

It is often difficult to decide if an element should have an ID or class name. As a general rule, classes should be applied to conceptually similar items that could appear in multiple places on the same page, whereas IDs should be applied to unique elements. However, you then get into a debate about which elements are conceptually similar and which elements are unique.

For instance, imagine you have a site that contains primary navigation in the header, page-based navigation at the bottom of the search results page, and tertiary navigation in the footer. Do you give each of these a separate ID like main-nav, page-nav, and footer-nav, or do you give them all a class of nav and style them based on their position in the document? I used to prefer the former approach, as it felt slightly more targeted. However, it comes with its own set of problems. What happens if I decide that I now need search results navigation at the top and the bottom of the search page or that I need two levels of navigation in the footer?

If you use a lot of IDs, you will start to run out of unique names very quickly and end up creating extremely long and complicated naming conventions. So these days, I tend to prefer class names and only use IDs if I’m targeting something extremely specific and know that I’ll never want to use that name for something different elsewhere on the site. Or to put it another way, you should only use an ID if you’re absolutely sure the item will appear only once. If you think you will need similar items in the future, use a class. By keeping your naming conventions general and using classes you don’t end up with long chains of ID selectors all with very similar styles.

#andy, #rich, #jeremy, #james-box, #cennydd, #paul, #natalie, #sophie {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}

You can simply create a generic class for them all.

.staff {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #ccc;
}

Due to the flexibility of classes, they can be very powerful. At the same time, they can be overused and even abused. Novice CSS authors often add classes to nearly everything in an attempt to get fine-grained control over their styles. Early WYSIWYG editors also had the tendency to add classes each time a style was applied. Many developers picked up this bad habit when using generated code to learn CSS. This affliction is described as classitis and is, in some respects, as bad as using table-based layout because it adds meaningless code to your document.

<h2 class="news-head">Andy wins an Oscar for his cameo in Iron Man</h2>
<p class="news-text">
Andy Budd wins the Oscar for best supporting actor in Iron Man
after his surprise cameo sets Hollywood a twitter with speculation.
</p>
<p class="news-text"><a href="news.php" class="news-tink">More</a></p>

In the preceding example, each element is identified as being part of a news story by using an individual news-related class name. This has been done to allow news headlines and text to be styled differently from the rest of the page. However, you don’t need all these extra classes to target each individual element. Instead, you can identify the whole block as a news item by wrapping it in a div (code) with a class name of news. You can then target news headlines or text by simply using the cascade.

<div class="news">
<h2>Andy wins an Oscar for his cameo in Iron Man </h2>
<p>Andy Budd wins the Oscar for best supporting actor in Iron Man
after his surprise cameo sets Hollywood a twitter with speculation.</p>
<p><a href="news.php">More</a></p>
</div>

Anytime you find yourself repeating words in your class names like news-head and news-link or section-head and section-foot, it would be worth looking to see if you can break those elements into their constituent parts. This makes your code much more componentized and hence much more flexible.

Removing extraneous classes in this way will help simplify your code and reduce page weight.I will discuss CSS selectors and targeting your styles shortly. However, this overreliance on class names is almost never necessary. If you find yourself adding lots of classes, it’s probably an indication that your HTML document is poorly structured.

Naming your elements

2012-08-29T17:27:00.002-07:00

When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible. For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page. However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing. Imagine how confusing the code could become if you used presentational elements across the whole site? This gets even more complicated if you decide to change the presentation of your form notifications from red to yellow. Now, you either have to go back and change all your class names, or you have an element called red that looks yellow.

Instead, it makes sense to name your elements based on what they are rather than how they look. That way your code will have more meaning and never go out of sync with your designs. So in the previous example, rather than giving your notifications a class of red, you should give them a more meaningful name like .warning or .notification (see Figure below). The great thing about meaningful class names is that you can reuse them across your site. For instance, you could also use the class of .notification on other types of messages, and style them completely differently based on where they are in the document.

Good and bad ID names

IDs and class names

2012-08-29T17:13:00.001-07:00

Meaningful elements provide an excellent foundation, but the list of available elements isn’t exhaustive. HTML 4 was created as a simple document markup language rather than an interface language. Because of this, dedicated elements for things such as content areas or navigation bars just don’t exist. You could create your own elements using XML, but for reasons too complicated to go into, it’s not very practical.

HTML 5 hopes to solve some of these problems by providing developers with a richer set of elements to work with. These include structural elements like header, nav, article, section, and footer as well as well as new UI features like data inputs and the menu element. In preparation for HTML 5, many developers have started adopting these as naming conventions for their ID and class names.

The next best thing is to take existing elements and give them extra meaning with the addition of an ID or a class name. This adds additional structure to your document and provides useful hooks for your styles. So you could take a simple list of links, and by giving it an ID of nav, create your own custom navigation element.

<li><a href="/about/">About Us</a></li>

<li><a href="/contact/">Contact</a></li>

</ul>

An ID is used to identify a specific element, such as the site navigation, and must be unique to that page. IDs are useful for identifying persistent structural elements such as the main navigation or content areas. They are also useful for identifying one-off elements—a particular link or form element, for example.

While a single ID name can only be applied to one element on a page, the same class name can be applied to any number of elements on a page. This makes classes much more powerful. Classes are useful for identifying types of content or similar items. For instance, you may have a page that contains multiple news stories.

<h2>Salter Cane win Best British Newcomer award</h2>

<p>In a surprise turn of events, alt folk group, Salter Cane, won

Best British Newcomer and the Grammys this week…</p>

</div>

<h2>Comic Sans: The Movie wins best documentary at the BAFTAs </h2>

<p>The story of this beloved typeface one the best documentary

category. Director Richard Rutter was reported to be speechless…</p>

</div>

Rather than giving each story a separate ID, you would give them all a class of news.

<h2>Salter Cane win Best British Newcomer award</h2>

<p>In a surprise turn of events, alt folk group, Salter Cane, won

Best British Newcomer and the Grammys this week…</p>

</div>

<h2>"Comic Sans: The Movie" wins best documentary at the BAFTAs </h2>

<p>The story of this beloved typeface one the best documentary

category. Director Richard Rutter was reported to be speechless…</p>

</div>

The power of meaning

2012-08-29T16:54:00.001-07:00

Meaningful markup provides the developer with several important benefits. Meaningful pages are much easier to work with than presentational ones. For example, say you need to change a quotation on a page. If the quotation is marked up correctly, it is easy to scan through the code until you find the first blockquote element. However, if the quotation is just another paragraph element, it will be a lot harder to find. For a more complicated, but no less realistic example, say that you needed to add an extra column to your homepage. You could simply drop the content in at the right point and then update the widths in your CSS. To do the same in a table-based layout you’d need to add an extra column in your table, change the colspan settings, alter the widths on all the cells, and change the widths of all your shim gifs. In effect, you’d have to change the entire structure of your page to accommodate this simple change.

As well as being easy for humans to understand, meaningful markup—otherwise known as semantic markup—can be understood by programs and other devices. Search engines, for instance, can recognize a headline because it is wrapped in h1 tags and assign more importance to it. Screen reader users can rely on headings as supplemental page navigation.

Most importantly for the context of this book, meaningful markup provides you with a simple way of targeting the elements you wish to style. It adds structure to a document and creates an underlying framework to build upon. You can style elements directly without needing to add other identifiers, and thus avoid unnecessary code bloat.

HTML includes a rich variety of meaningful elements, such as

h1, h2, and so on
ul, ol, and dl
strong and em
blockquote and cite
abbr, acronym, and code
fieldset, legend, and label
caption, thead, tbody, and tfoot

As such, it is always a good idea to use an appropriate meaningful element where one exists.

Every few years the CSS versus tables argument seems to flare up on blogs, mailing lists, or developer forums. The discussion is usually sparked when developers who have grown accustomed to the table-based approach rebel against the idea of having to learn a new skill. I can sympathies with this reaction, as CSS-based layout does seem difficult at first, especially when your current process seems to work. However, the benefits of CSS have been debated numerous times and include things like less code bloat, faster downloads, and easier maintenance to name just three. Most professional developers have come to see the benefits of web standards, and it’s rare to see an agency of any size or quality doing things the old-fashioned way. So if you’re still using table based layout, you’re going to find it increasingly difficult to get work with agencies. Thankfully, these old habits are dying out, and there is a whole new generation of developers who have never had to suffer the inconvenience of table-based layout.