Welcome to CSS Basics! This reference guide will walk you through some of the central features of creating CSS rules.

Goals of this guide: Upon completion of this document, you should have essential knowledge of what CSS is, how to use style sheets, understand selectors and their syntax, discern how CSS's priority scheme is structured, how to add comments to your code, grasp how inheritance works, and finally incorporate Chrome's Developer Tools for debugging purposes. Finally, this document will provide you with a list of additional resources to further your CSS development skills.

This document assumes you have a good working knowledge of HTML and a text editor to write HTML and CSS pages.

Written by Brian Immel

What is CSS?

CSS stands for Cascading Style Sheets which is used for describing how a web page should look and formatted for various devices such as desktops, mobile devices (large and small), and printers. The separation of CSS and HTML makes it easier for web developers to maintain sites, share style sheets throughout an entire site, and make tweaks to pages on different display environments. This is referred to as separation of structure from content. Style sheets consist of a list of rules or rule-sets that consist of one or more selectors and declaration blocks.

In this guide, we will cover the basics of style sheets, what and how to use selectors, priority scheme of CSS rules, inheritance, and finish off with some thoughts on debugging your CSS rules. This guide assumes that you have a basic understanding of HTML elements, properties, and fundamental structure of a web page. Take out a sheet of paper (digital or otherwise) and prepare yourself for some "rad" styling with style sheets!

Inline, Internal, or External Style Sheets

Style sheets are a way to express CSS rules either internally to the HTML page or externally by including the .css file via a link in the head of the page.

One of the most basic ways to apply styling to an element is via an element's style property. However, this is not recommended if you plan on maintaining an entire site. But if you must do so, here's what a inline-styled element might look like:

<span style="color:orange">some orange text</span>

Internal style sheets should be discouraged if you plan on using the CSS rules across multiple pages. Internal style sheets are good for testing out something on a single page or for unique rules to just that page. I personally don't like using internal style sheets as my personal work flow rarely checks for CSS found within the HTML document itself.

If you wish to use an internal style sheet, place the following code in the head of your page:

<head>
<style>
<your rules here>
...
</style>
</head>

External style sheets allows you to control all CSS rules from one file that can affect all your HTML files on your site. To link an external style sheet to a page, use the following code:

<head>
<style rel="stylesheet" type="text/css" href="style.css">
</head>

One common practice is to have a handful of CSS files (one main file that lists commonly used rules throughout the site) and another CSS file for uncommon rules (for one offs or specialized pages).

You can also create CSS files for different devices but that topic in itself could be another guide. We'll stick with our elected method for calling CSS rules and move on to selecting elements.

Selectors

A selector is used to declare which part of the markup a rule applies to by matching tags and attributes. Selectors can be picked from

  • Elements
  • Elements specified by an attribute
    • id: an unique identifier to the document
    • class: an group of elements that share the same identifier
  • Element's location in the document tree

Pseudo-classes are special selectors that allow for formatting based on information that is not found in the document tree. These pseudo-classes can be related to user events such as hovering over an element, visiting a link, and so forth. We'll cover more about this special selector type later. For now, let's move onto selector's syntax.

Selected Selector Syntax

Here is a few examples of selectors in use:

Pattern Matches Example
element Selects an element a {color: blue;}
element:hover When user hovers over element, perform this rule a:hover {color: white;}
element.myRule Apply a rule to all elements with the class 'myRule' a.myRule {padding: 5px;}
element#idRule Elements with this unique id receive this rule a#special {border-color: red;}
element1 element2 The child element (element2) of the parent element (element1) receive this rule div a {background: aqua;}
element:first-child Apply a rule to all element's first child element span:first-child {text-align: center;}
element[foo*='bar'] Find any element that contains the attribute substring of 'bar' div[id*='content'] {background: #002200;}
element1 ~ element2 Apply rule to element2 that is preceded by element1 div ~ span {border: solid thin blue;}

As stated above, this is a short list of selectors one can use. One of the greatness things about CSS is that you can combination this syntax in very creative ways to select and manipulate the layout of your elements. For example, div.foo a:first-child) {color: blue;} would create a slightly complex rule that applies only to the first link of div elements with the class of 'foo' and turn text color blue. For a more complete list of selectors, you can visit Wikipedia's Selector Notes or simply Google "CSS Selectors".

Now that we understand how to select an element, let's decipher how declaration works on a selected element.

Declaration

CSS "rules" are defined by blocks of properties and values. Rules tell the browser what to select and how to modify its appearance. A rule is initiated by a start curly bracket ({) and ends with another (end) bracket (}). Each property and value set is separated by a colon (:). To complete the value, it must end with a semi-colon (;) to tell the browser that this rule's value is complete.

Let's take a look at how to read this example:

div {color: #9933cc;}
Selector Start block Property Colon Value Terminator End block
div { color : #9933cc ; }

Once a rule has been declared, one would think that is all one needs to do when creating a style or layout for a page. However, you will encounter issues when one or more rules are at conflict with one another. CSS has system in place to deal with these crusading CSS commands.

CSS Priority Scheme

The following table shows how rules are applied and/or overridden. More often than not, you will have rules that are in direct conflict as a site grows in complexity. It is important to understand how and when a rule "wins" the right to modify it's target element.

High Priority CSS Source Type Description
1 Importance Highest priority: the ‘!important’ annotation overwrites the previous priority types
2 Inline A style applied to an HTML element via HTML ‘style’ attribute
3 Media Type A property definition applies to all media types, unless a media specific CSS defined
4 User defined Most browsers have the accessibility feature: a user defined CSS
5 Selector specificity A specific contextual selector (#heading p) overwrites generic definition
6 Rule order Last rule declaration has a higher priority
7 Parent inheritance If a property is not specified, it is inherited from a parent element
8 CSS property definition in HTML document CSS rule or CSS inline style overwrites a default browser value
9 Browser default The lowest priority: browser default value is determined by W3C initial value specifications

Let's look at the example of importance in action. Our CSS has the following conflict of how to affect the div element with the id of menu.

div#menu {color: red;}
...
div#menu {color: blue;}

Example in action:

In this case, the last rule in the file wins out and the div element get a blue text color. However, if we add the '!important' flag to the first rule, it would win out.

div#subMenu {color: red !important;}
...
div#subMenu {color: blue;}

Example in action:

This may see a little bit unruly so lets get things back in order by discussing rule order. An element can have more than one class assigned to it. For example:

<div class="red borderless">Div element with two classes:
red and borderless</div>

An element can have as many classes as you see fit and here we have a div element with two classes ('red' and 'borderless').

.red {color: red}
.borderless {
border: none;
color: blue;
}

In this example, the browser would render the red rule first and then override any conflicting rules found within the borderless rule based on it's order in the style sheet. We can see from these two rules that there is conflict with the text color. Let's see how this plays out.

Div element with two classes: red and borderless

Not bad but not too pretty either when you look at the output (debugging mode) on the rendered page. Having clashing rules are common in CSS development. There are times when you want one rule to override another and other times when you don't. Don't get frustrated when this happens. Yes, it can make keeping track of rules and their purpose more difficult but it doesn't have to get too ugly. One thing that you can do to help yourself (and others) out is leaving some notes behind about these rules.

Comments

A good web developer knows to leave comments in his/her code for several reasons: Other developers can read and understand the purpose of the rules, disabling a rule or two for debugging purposes, and most importantly, to remind future you what you wrote and why. I look back some of the CSS rules I have written years ago and scratch my head wondering why I did what I did back then. I'm sure I had a good reason but only if I had left a note or two to give me a clue.

To comment out a section of code, start with /*, then your code, and close off the section with */. For example:

div.menu {
/* background: #ffffff; */
color: blue;
}

In this example, any div element with the class of menu won't have a defined background color (just a blue text).

In addition to commenting out single lines of code, you can comment out entire blocks of CSS.

div {
/* background: #ffffff;
color: blue;
padding: 5px 0 0 0;
margin: 0; */
text-align: center;
}

In this example, everything is prevented from modifying the div element except for the text-align rule.

One last comment on comments: If the rule is a bit unclear by it's name or how it hooks into the page, leave a comment as to it's purpose.

/* Rules for menu items */
.menu {color: blue;}
.menu:hover {color: green;}
...

/* Rules for ... */
...

Now that we are rich with the knowledge of comments, let's look at how a parent (element) passes along everything it has to it's children.

Inheritance

A key feature to CSS is it's ability to to rely on ancestor-descendant relationship. Inheritance can apply properties of the parent element to its descendants via the document tree. Descendant elements may inherit text-related properties but not box-related properties. Some inherited properties include color, font, line-height, text-align, and text-transform. Properties not inherited include background, border, display, height, width, and padding.

Example of Text-related Inheritance

Consider the following styling:

div {color: red;}

All span elements would have red text. To illustrate this, examine this code:

<div>This <em>illustrates</em> how inheritance works</span>

Which would render this:

This illustrates how inheritance works

The <em> element was not assigned any text color yet it inherited it from it's parent element. If you wish for nested elements to not inherit the effects of it's parent, you would have to write a class to affect it as such. If the elements were a box within a box element type, the same would be true.

Example of Box-related Inheritance

This example of a test and box-relate property: CSS rules

.bg1 { /* box-related property */
background: #999999;
padding: 5px;
}
.red {color: red;} /* text-related property */

HTML elements that will receive the CSS rules:

<div class="bg1">
<p class="red">
Paragraph nested inside a div element
</p>
</div>

These two rules applied to the two elements would render this:

Paragraph nested inside a div element

In this example, it may look like the paragraph element has inherited the background from the span element but when we look at the next code example with the paragraph element also declaring a background color, we'll see that in fact it did not inherited anything. The default property of background of the paragraph element is set to none which allows for the parent element's property to pass through.

.bg1 {
background: #999999;
padding: 5px;
}
.bg2 {background: #222222;}

And now a slightly modified set of HTML elements:

<div class="bg1">
<p class="bg2 red">
Paragraph nested inside a div element
</p>
</div>

Paragraph nested inside a div element

As you can see, the paragraph element (with the class of .bg2) has it's own background color now while the outer element (class of .bg1) has a background that is different from it's child element.

As you can see, inheritance is a powerful tool to use when designing your CSS rules.

Having problems with elements displaying in a way that you didn't expect? Chances are that your elements may have inherited something you didn't intend. You can either review potentially hundreds of lines of CSS code or use a browser to debug your code.

Debugging

Finally, one skill that I think every CSS developer should have is the ability to debug or track down what went wrong with their code. You could be cruising along writing beautiful CSS, you save your file, and test your page only to find that something has gone horribly wrong. A misplaced semi-colon, an unclosed rule, or even a common typo can render any page visually dead. What do you do now? Would you: A- Turn out the lights and curl up in a ball. B- Consider a different career. C- Use a debugging tool to find the source of the problem. D- All the above. If you guessed "D", then you wouldn't be far off the mark but for the sake of argument, let's say you simply want to debug your CSS.

Most modern browsers come with some sort of debugging tool. If one is not a part of the default package, you can always Google for an extension or plugin that gives your browser the capability to debug your pages. To keep things simple, I'm going to refer to Chrome's Developer Tools.

Once you have your code saved, you should preview your page (in case) using Chrome. To enter the debugging tools, you can hit the F12 shortcut key to launch the debugger. Once open, a split window will appear at the bottom of your browser. To see the rendered HTML and CSS, right-click on an element and select Inspect Element. The debugger will show your selected element's HTML code on the left side in the Elements section. On the right, you'll see the CSS code that is affecting the selected code in the Styles section. The selected element's CSS will be broken down any and all rules that affect it. Properties and values that are displayed with a strike-through means that this part of the rule is not being executed. You can toggle properties and values by checking and unchecking them by clicking the checkbox to the left of the property/value pair. You'll see the checkbox when you hover over the properties and values.

What's great here is that you can change the rules in the Styles section and see the rendered result immediately. To change a rule's value, simply click on the property or value and type in a new property or value. You can also add new properties and values by clicking one of the properties, hitting the Enter key a few times until you get a new empty line. From there, enter if your new property and value and see the results materialize on the page.

Chrome's Developer Tool also allows you to create a whole new rules on the selected element or by creating a new rule by clicking the New Style Rule button. In the Styles section, when you have an element selected, you will see an empty rule at the top of the list of rules called element.style. This selected element can receive whatever properties and values you wish to create for it but keep in mind that this new rule only affects the selected element. If you wish to create a temporary rule, click the New Style Rule button, type in your selector and then your properties and values. Once you're done debugging, or experimenting, be sure to copy and paste your tweaks back into your CSS file.

Chrome's Developer Tools is a power tool to use to debug and experiment when developing your pages. In addition to debugging CSS, you can also debug and experiment with any other code elements on the page (HTML, JavaScript, etc.) as well as many other powerful features but that would be another topic for another time.

Summary

This document covered a lot of basic topics of CSS but by no means did we get all of them. I believe this document has given you a good foundation to start from and from the list of Resources listed below, you should be able to continue developing your CSS skills. In review,

If you have any questions or comments, please contact Brian at Brian@jawa9000.com.