After a long break, I’m finally back with the long-awaited CSS portion of this little series.
In this article I’ll go over some core concepts. Next post I’ll outline one poorly understood, but vital part of CSS. More posts full (yes, full) of tips, tricks and best practices will follow.
Core concepts
CSS is a style sheet language used to determine the formatting of an HTML document (although it could be used to style other XML documents like SVG and XUL.) Before we had CSS (and before it was widely adopted) all of this presentation information was embedded in the document, either in the form of attributes like width or bgcolor or in the form of purely presentational tags like font. Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.
CSS fixed all that. Using separate style sheets for an entire site and leveraging semantic markup, and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles to an entire site while updating a single, cacheable file.
Getting the style sheet onto the page
Taking advantage of all that starts with getting the style sheet onto the page. The code for that looks like this:
xHTML
<link rel="stylesheet" type="text/css" href="/_assets/styles/style.css" />
HTML5
<link type="text/css" href="/_assets/styles/style.css" />
href, which points toward the file containing all your rules and the type, which indicates that it's a text file containing CSS instructions.
There's one alternative attribute you can add if you're doing style sheets for different media. A typical example of that would look like this:
<link type="text/css" href="/_assets/styles/style.css" media="screen" />
<link type="text/css" href="/_assets/styles/print.css" media="print" />
media attribute indicates that the first style sheet should be used for screen display and the second style sheet should be used when the document is printed. It might surprise you, but many thousands of dollars are commonly spent getting print style sheets just right. It surprises me because I print web pages maybe two or three times a year. Some people think they're very important. You've been warned.
No, I'm not bitter. I love spending days on print style sheets.
A Simple CSS Style Sheet
We'll use this simple example to give you a short tour of the inner workings of CSS.
/* A single tag */
/* Many elements will inherit from this tag, since it's high up in the document */
body {
background: #CCC url(/_assets/styles/images/page-bg.png) repeat-x;
font: normal .825em/1.65 Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
/*an ID */
#container {
background:#fff;
height:auto;
margin:auto;
overflow:auto;
position:relative;
width:980px;
}
/* A single tag */
h1 {
color: #999;
font-size: 200%;
text-transform: uppercase;
font-weight:normal;
}
/* A series of ID/tag combinations, with the same rules applied */
#main h2, #main h3, #main h4, #main h5 {
font-weight:normal;
line-height:1.4;
margin-bottom:7px;
margin-top:7px;
}
/* A class */
.more-link {
font-weight:bold;
text-transform:uppercase;
font-size:110%;
text-decoration:none !important;
}
/* An ID/class combo */
#main .share {
margin-top:7px;
}
/* An ID/class/tag combo */
#main .share strong {
background: url(/_assets/styles/images/share.png) 0px 3px no-repeat;
color:#393;
padding-left: 19px;
text-transform:uppercase;
}
There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.
Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.
Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.
Many thanks for your this tutorial – very useful intro to CSS