CSS Basics

An external style sheet is simply a text file (use BBEdit or Textwrangler) containing style rules, saved with the .css extension. It’s best practice to keep style sheets for a site grouped within a single folder, often named css or styles.

To link to an external stylesheet, the link element is placed within the head of the html page:

Less preferred is to embed the stylesheet directly into the head of the html page:

Least preferred is to put style rules inline with the html elements:

As an option, you can create different style sheets for different output, the two most common being for print and screen:

Alternatively, you can do the same within a single style sheet, using the @media rule:

@media print {

body { font-size: 25pt; }

} A style rule is constructed generically like:

selector { property: value; property: value; }

The property: value pair or pairs within the curly brackets are called declarations. All punctuation is required, though spacing and line breaks can vary.

The selector identifies the part of the page to be styled, and can be an element type, a class or an id. The property identifies which CSS property will be changed, and the value specifies the chosen option for that property.

An example of a basic style rule might be:

h1 { background-color: yellow; color: red; }

You can place comments in CSS wherever necessary, using the /* and */ tags. Commenting is critical in helping other users (or yourself at a later date) understand the purpose of your coding.

/* Comments can be placed between or within style rules */

Style rules may be written in several places: in external stylesheets linked to the html page (strongly recommended), embedded at the top of the html page, or applied directly to individual elements (called inline and advised against in most cases.)

CSS Inheritance

By default, many CSS properties are inherited from parent html elements to child html elements. Child elements are those elements that are contained within “larger” elements. In the example, em is a child of p, and h1 and p are children of article, and they all are children of body. The indenting of this example, while entirely optional in html coding, does help make the hierarchical nature of the element relationships a bit clearer:

Headline

This is a paragraph of text.

So the following style rule would change the font of all of those elements to Helvetica…

body { font-family: Helvetica, sans-serif; } while the following would change only the p and em elements, leaving the h1 in the default browser font…

p { font-family: Helvetica, sans-serif; }

You can always override the inheritance of children from their parents. Simply give those elements their own style rule. The following would ensure that all text within body and its children was blue, with the exception of the h1 elements.

body { color: blue; }

h1 { color: black; } The following CSS properties are inheritable by default: Text color (except by the a element) direction font font-family font-size font-style font-variant font-weight letter-spacing line-height text-align text-indent text-transform visibility white-space word-spacing Lists list-style list-style-image list-style-position list-style-type Tables border-collapse border-spacing caption-side empty-cells

Properties not on this list can be forced to inherit the values of the parent elements by using inherit as the value.

p { border: inherit; } The “C” in CSS: Cascading styles

Html elements may be targeted by CSS in a number of ways, by element type (e.g. p, article, ol, h1, etc.), by class, by id, and through inheritance of parent properties. Additionally, a single element may be targeted from multiple style rules. Cascading determines the priority of style rules. Basically, the more specific selector overrides the more general, and the sequence, from general to specific, is:

Default browser styles -> element -> class -> id

When the selectors are equal, such as when an element has two classes, and the same property is targeted by both, then the order of the style rules establishes precedence, with the later rule overriding the earlier (inline styles are considered to appear after, and thus have precedence over, all other rules.)

So the following example…

p { color: red; }

.example { color: blue; }

.example.example-2 { color: magenta; /* negated by next rule */ }

.example.example-2 { color: green; } will change the color property of all targeted paragraphs (p) to red, except for those paragraphs with the example class. example class paragraphs will be blue, except for those that also have the example-2 class, which will be green. Because of the priority given to order (latest overrides earlier), the first example.example-2 style rule, with the magenta value for color, is immediately overridden by the one below it (and in fact there would likely be no reason to have both of these in the same style sheet.) CSS Property values

Values vary depending on the property. Many properties only take one of a few specified values (such as float: left) or may take a specified value in addition to a numeric or other value (such as border: none or font-family: sans-serif). Type these specified values exactly, and do not enclose them in quotation marks.

Many CSS properties determine the size of the targeted element, and those sizes may be either absolute, set in pixels (px) or, rarely, in points (pts); or relative, set in ems (em) or in percentages (%). Values that determine size must always state the unit, such as margin-left: 2em or font-size: 16px. An exception is when the value is 0, where no unit is required.

With the prevalence of drastically different screen sizes on phones, tablets and computers, along with the varying resolution introduced by technologies like Retina displays, specifying sizes in pixels has become less common than using ems. This is a key part of responsive design (designing content that looks good and works well across a variety of platforms.)

An em is equal to the font size of the element, which is generally inherited from a parent. Thus, if the font-size of the body element has been specified as 16px (which is the html default) a value of 1.5em will generate a size of 24 pixels in a child element (recall that the h1 element, like almost all of the other content of the html page, will be contained within the tags, and so inherits properties assigned to body):

body { font-family: Geneva, Tahoma, Verdana, sans-serif; font-size: 100%; /* this establishes the default size of 16px */ }

h1 { font-size: 1.5em; /* 1.5 times the parent size of 16px = 24px */ }

CSS Selectors

Simple type selector. All article elements will be styled:

article { color: red; }

Class selector. All elements with the class = “artist” attribute will be styled:

.artist { font-style: bold; }

ID selector. The single element with the id = “degas” attribute will be styled:

#degas { color: green; }

All things being equal, it is better to style by class than by ID, as a single style rule with a class selector can style multiple elements on the html page (any of that class.) A rule with an ID selector can only style the single element with that id, and so is capable of doing less work.

Attribute selector. All elements of this type with this attribute, regardless of their value, are styled:

a[title] { color: red; }

Value selector. All elements of this type with this attribute with this exact value, are styled:

h1[title=“chapter-heads”] { font-family: Palatino, serif; }

There are more specific value selectors, which allow you to select values that contain part of a word, that start with a word, or end with a word, etc. These are a bit fussy, but may be useful at times. They are written:

[attribute~=”value”] value is word in a space delimited list of words [attribute|=”value”] is exact value as complete word or begins with value immediately followed by a hyphen (-) [attribute^=”value”] begins with value as full word or as part of a longer word [attribute$=”value”] ends with value as full word or as part of a longer word [attribute*=”value”] contains value as full word or as part of a longer word

Descendent combinator. Only small elements that are descendents of h1 elements will be styled:

h1 small { /* The space between the two elements is required */ font-style: italic; }

Descendent combinators can also use classes (or IDs, more rarely):

.callout p { font-style: italic; }

Child combinator. This kind of selector restricts the specified style to only immediate children of the parent:

aside > h1 { color: blue; }

Thus if the html code looked like this…

A Sad Story

Blah, blah, blah.

A Quick Tip

only “A Sad Story” would be styled blue, as “A Quick Tip” is a child of section, and only a grandchild of aside.

Adjacent sibling combinator. Siblings are elements that are equal children of the same parent. Adjacent siblings (of the type following the plus sign) immediately follow the specified sibling (of the type preceding the plus sign):

.artist h1+h1{ /* the element types of the siblings do not have to be the same */ color: blue; } Thus if the html code looked like this…

A Sad Story

A Quick Tip

More Quick Tips

Blah, blah, blah

Summing Up

“A Quick Tip” and “More Quick Tips” would be styled blue, as each follows an h1 element. “Summing Up” would not be styled blue, as it does not immediately follow an h1.

General sibling combinator. Like the adjacent sibling combinator, but here the siblings do not have to immediately follow, so long as they are preceded somewhere in the parent by an h1:

.artist h1~h1{ /* the element types of the siblings do not have to be the same */ color: blue; }