Introducing CSS

This Web page is made of well-formed HTML, but it looks very plain, particularly by modern Web design standards. Cascading Style Sheets (CSS), an entirely separate language from HTML, with an entirely different syntax, permits us to change how the HTML content is presented.

Different Versions of CSS

CSS became well supported by major browsers with the advent of XHTML. There are now three versions of CSS, and they are commonly referred to as CSS1, CSS2, and CSS3.

Each new version builds on the prior one:

• CSS1 controls fonts, colors, and text attributes
• CSS2 controls layout and positioning
• CSS3 provides more control of color, transparency, and more robust ways to target specific devices.

The code of CSS is usually stored in a stylesheet, a document or portion of a document containing the CSS data. A style sheet consists of a list of rules, a series of defined stylings using CSS syntax. Each rule or rule-set consists of one or more selectors, and a declaration block

Let's take a look at the basic syntax of creating a declaration in CSS.

Defining a CSS Rule

Each definition of a style is referred to as a rule. Rules are defined and modified by the author. The structure for building a rule is quite simple, consisting of a selector and a declaration. Here's an example:

Understanding Selectors

Selectors refer to specific sections of a document. Since every element in a well-formed HTML document should be confined by an opening and a closing tag, the rule will be applied to every instance of the selector found. In the example above, every paragraph will be affected. Every rule must have a selector, but as we'll see, several selectors can be defined at once.

Understanding the Declaration

A declaration isbroken into two sections, a property and a value. Together, the property and value describe how certain elements are to be presented on the page. The colon separates the property from the value in much the same way that an equal sign separates an attribute from a value in HTML tags. Some properties can accept multiple values, and declarations can include several property and value sets separated by a semi-colon.

We will practice this now on the Web page.

There are multiple ways to apply CSS to a Web page:

• Inline style: declarations are inside individual opening element tags
• Embedded stylesheet: rules are listed in the head element
• External stylesheet: rules are listed in a separate file

We will start with an inline style.

Adding Inline Style

Inline style is the process of injecting CSS directly into the HTML markup it is styling. This is done the same way you insert additional information into an element, using an attribute. Because it is in the markup code, this is also the most tedious method to maintain

Using the Style Attribute

Inline style can be inserted into an element with the style attribute. Unlike the href and src attributes, the style attribute can be used in virtually any element that goes inside the body. The style attribute is applied within an opening HTML tag. When the tag is closed, the style rule is closed as well.

To test this out, let's change the color of the paragraph underneath the image element. We can do this with the color property in CSS.

Step1. To insert the inline style, type:

<img src="images/emmehorse.jpg" alt="Emme walking with a horse" />
<p style="color: brown;">Experience what is possible with Emme and her
horse partners...</p>

Exiting code block

Step3. Save and refresh index.html.

The color of the paragraph's text should have changed. The name of the property is color, and the value we are giving it is brown.

NOTE: The color value of brown is a keyword as part of the CSS specification. There are many other color keywords that are available. An extensive list can be found on the W3C Web site.

Using an Embedded Stylesheet

Before CSS, the Web developer had to litter the HTML with style markup, which was very cumbersome to maintain and modify. One of the largest benefits of introducing CSS was the ability to use stylesheets, allowing the Web developer to separate structure from presentation. The advantage is that all of the CSS can be found in one place, and it can target all of the elements of a particular type simultaneously.

There are two types of CSS stylesheets: external and embedded. They are functionally identical, with the exception that external stylesheets are entirely separate CSS code files which can affect many HTML files at once, while embedded stylesheets are created with the HTML document and can only target markup within that same document.

In this workshop, we will be learning how to implement an embedded stylesheet. An embedded stylesheet is created with the style element, which usually is created in the head element.

Let's create this now.

Step1. Place the cursor on an empty line within the head element.

Step2. To create the style element, type:

<head>
<title>Welcome to Equinurture: life coaching in Indiana.</title>
<style>

</style>
</head>

Exiting code block

We now have an embedded stylesheet. Let's see how to put CSS rules into it.

NOTE: You may have seen the style element with the type attribute, whose value is set to "text/css." Before HTML5, this was required in the opening tag of the style element. However, since CSS is the ubiquitous styling language for HTML, type="text/css" is now implied if you do not include it.

Using Element Selectors

It is obvious what markup inline styles target, since the style is sitting right inside the markup itself. Inside a stylesheet, we rely on a component of a style rule called a selector to see what the rule targets. The selector specifies what markup the properties inside the rule will modify. While there are many different kinds of selectors available for use in a style rule, we will start with the simplest kind: the element selector which is a reference to the name of the targeted element.

For the Web site, let's say that we want our main section headings to use the Georgia font. The main section headings are marked up with heading 2 elements, and therefore, the selector we want to use for our first rule will be h2.

Let's start our first style rule now.

Step1. Place the cursor on an empty line within the style element.

Step2. To create a rule whose selector targets h2 elements, type:

<style>
h2 {
 font-family: Georgia;
}
</style>

Exiting code block

We now have a rule that states that all heading 2 elements should use the Georgia font.

Step3. Save and refresh index.html.

We should see that our two heading 2 elements adopt the Georgia font.

NOTE: CSS is particular about its syntax. If the style rule did not work, then check over every piece of the syntax again. The brackets must be curly braces, and everything has to be spelled correctly, and so on.

Working with Fonts

Without CSS, the Web browser preferences determine the default font we see. We can override the default font, as we did with the Georgia font on heading 2 elements.

This only worked since we have the Georgia font installed on our computer, and will only work for our visitors if they have the Georgia font installed, as well. The Web browser checks the system's font directory for the font that we assign as a value to the font-family property.

This of course is a major limitation, since we have to choose fonts that we expect to be on everyone's computers or mobile devices. There are around fifteen Web safe fonts, which are fonts considered likely to work on a wide range of devices.

NOTE: There is a way to have the Web browser temporarily download and use a custom font of your choice, but it involves functionality from CSS3, and therefore does not work on many older browsers. We will be sticking to the traditional way of using Web safe fonts today.

We have already implemented the serif font, Georgia.

Let's change the global font, that is, the font that the entire page will use by default. We can do this by assigning a font to the body element, since this is the element from which all of our content descends.

The font we will give the body will be the Web safe sans-serif font, Lucida Sans Unicode. We have to first make a new style rule for the body element.

Step1. To create a rule that targets the body element, type:

body {
 font-family: 'Lucida Sans Unicode';
}
h2 {
font-family: Georgia;
}

Exiting code block

Notice that Lucida Sans Unicode has single quotes surrounding it, but Georgia does not. The reason for this is that the font name for Lucida Sans Unicode contains spaces, but CSS syntax uses spaces within a property's value for other purposes, that we will learn later in the workshop. The quotes tell the browser that this is a single font that has multiple words in the name.

Let's see how this appears in the browser.

Step2. Save and refresh index.html.

We should see that all of the text is displayed in Lucida Sans Unicode, except for the heading 2 elements, which use Georgia. This worked without having to create separate rules using selectors that explicitly target each element.

Understanding Style Inheritance

Every element displayed in the viewport is nested within the body element. When a higher level element (parent) sets a rule, that rule is generally applied to every other element that is contained within that parent. If a parent element like the body sets a text property to a specific font-family, every other child element within that body should use that same font family. This concept is called inheritence.

Not all properties inherit by default; some do and some do not. A quick catch-all consideration is that all of the CSS properties that modify the appearance of text inherit automatically.

Choosing Fonts Safely

The values associated with the font-family property can include one or more specific family names and/or generic family categories (serif, sans-serif, monospacing, cursive, and fantasy). Caution should be used when assigning a specific font name since Web users may not have certain fonts on their computers. As a safety measure, assign a generic family name. Then, if the browser doesn't recognize the specific family requested by the style sheet, the browser will default to what is available in the generic family.

For instance, a font-family style rule might look like:

p { font-family: 'Comic Sans MS', Helvetica, sans-serif; }

Exiting code block

In this example, a browser will first check to see whether Comic Sans MS is available. If so, the font will be applied. If it is not available, the browser will attempt to use the next option, Helvetica. If Helvetica is not available, the browser will use whatever is recognizable as the default sans-serif font.

For safety, the font we will use for the body is simply the name of the generic font family associated with Lucida Sans Unicode, which is sans-serif.

Let's try this out now.

Step1. To add the new font, type:

body {
 font-family: 'Lucida Sans Unicode', sans-serif;
}

Exiting code block

With this in place, we can rest assured that even if the system does not have Lucida Sans Unicode installed on it, some kind of sans-serif font will be used.

The embedded stylesheet should now look like this:

<style>
body {
 font-family: 'Lucida Sans Unicode', sans-serif;
}
h2 {
 font-family: Georgia;
}
</style>

Exiting code block

Refreshing the page in the browser will reveal that nothing appears to have changed. In order to test the fallback font, you would have to intentionally spell Lucida Sans Unicode incorrectly, or remove it from the computer.

Let's create some more CSS now.

Expanding a Rule

The CSS rules that we have created so far are very basic. The CSS standard allows for far more functionality and efficiency in our style code. Let's look at a few ways we can make our rules more powerful.

Creating Additional Property Declarations

So far, we have declared only one property in a style attribute or rule. The purpose of the semicolon in the property declaration syntax is to serve as a delimiter between multiple declarations.

Perhaps we feel that the heading 2 elements are a bit small. We can change their size with the font-size property, and add it to the existing h2 rule.

Step1. To add a new property declaration to the h2 rule, type the line of code highlighted in bold:

h2 {
 font-family: Georgia; 
 font-size: 28px;
}

Exiting code block

Step2. Save and refresh index.html.

We should now see the level 2 headings change in size.

Using Multiple Selectors in a Single Rule

It is common in Web design to have all the headings use one font, and the paragraphs use another. Currently, our heading 2 elements are the only ones with Georgia font.

If we wanted our heading 3 elements to also use Georgia, our first thought might be to create a separate rule that targets h3 elements. While this would work, it can quickly become burdensome to manage many rules that all have very similar property values.

Fortunately, CSS provides a way for us to have multiple markup targets in a single rule. We can do this with the multiple selector syntax.

To have multiple selectors, simply place commas as delimeters between selectors before the opening curly brace of a rule. Let's try this out by adding an h3 element selector to the existing h2 rule.

Step1. To add the h3 selector to the h2 rule, type:

h2, h3 {
 font-family: Georgia;
 font-size: 28px;
}

Exiting code block

Step2. Save and refresh index.html.

The level 3 headings now also use the Georgia font, but they are the same size as the level 2 headings. We will have to override that font-size property for our heading 3 elements.

Overriding Styles

It is hard to avoid the circumstance where an element is being supplied CSS coming from different places with different values assigned to the same property.

When a conflict like this occurs, one property's value will override the other, and which overrides which depends on the context. The trick here is to use this to our advantage. We have to understand the rules of CSS overrides to do that.

Rule Order Matters

We can have multiple rules that have the same selector, and within these rules we can declare the same property but with different values. In this event, the property that is declared the furthest down the document is the one that overrides the other ones.

You may be wondering why we would ever want to do that. The dilemma where currently both our heading 2 and heading 3 elements have the same font size is a perfect example of when we would want to override our CSS in this way.

Instead of resorting to having two different heading rules that both declare font-family with the value of Georgia, we can keep our multiple-selector rule intact, and create a heading 3 rule that specifies a different font size. This font size would override the one declared above.

Step1. To create a new rule that selects h3 elements, type:

h2, h3 {
 font-family: Georgia;
 font-size: 28px;
}
h3 {
 font-size: 18px;
}

Exiting code block

Step2. Save and refresh index.html.

The h3 elements are now a smaller, more appropriate size.

NOTE: If this did not work, then make sure that you created the separate h3 rule below the h2, h3 rule. Remember that styles declared below take precedence over ones declared above.

Understanding Precedence

Had we not indicated Georgia, our headings would have inherited the Lucida Sans Unicode from the body rule. This is an example of styles being overridden through a concept called precedence, which determines the priority of the styling.

The precedence of a style is determined by its context. There is a comprehensive formula for determining which style takes precedence over, and therefore overrides, another style.

We won't look into the full complexity of this formula today, but we will start with some basic rules:

• Inline style takes precedence over style created in an embedded stylesheet, and embedded stylesheet styles take precedence over external stylesheet styles.
• Style in a rule whose selector directly targets an element that directly contains the content, takes precedence over style inherited from the parent element, which in turn takes precedence over the style inherited from the grandparent element and so on.
• As we learned in the section above, style that appears further down the document with the same selector, i.e. the same context, takes precedence over the style higher in the document.

A general rule of thumb that we can discern from these basic precedence rules is that the "closer" the CSS is to the content, the higher precedence it usually has, and therefore the more likely it will be to override any other opposing styles.

If we decided we wanted to change the color of all of our paragraphs to gray, we could apply the color property within a new rule that targets paragraph elements. However, if we remember, we have already applied color to one of our paragraphs using inline style.

Let's see this precedence in action by creating a new p rule.

Step1. To create a new rule that selects p elements, type:

h3 {
 font-size: 18px;
}
p {
 color: gray;
}

Exiting code block

Step2. Save and refresh index.html.

The paragraphs are now gray, except for the one with the inline style.

Despite there being a rule that should assign the color gray to all paragraphs, the one paragraph remains brown because inline style takes precedence over style in an embedded stylesheet.

Let's now learn a bit about having control over a more exact color value.

Understanding RGB Color

Let's say our paragraphs aren't precisely the shade of gray that we'd prefer. Perhaps we want to bring it down to a darker shade of gray so that there is higher contrast between the text and background. This will improve its readability, and thus accessibility.

All color screen media across all devices utilize RGB Color, which renders color based on mixing red, green, and blue.

CSS supports 8-bit color, meaning that there are 256 different shades of red, green, and blue.

Black is formulated when each of the color channels is set to 0. White occurs when each of the color channels is set to 255. The value gray is a color keyword as part of the CSS specification that represents a color that is about half-way between black and white, specifically where each of the color channels is set to 128.

Let's learn how to explicitly set the values of the color channels.

Using Hexadecimal RGB Color Values

Web developers can name specific 8-bit RGB color values in a few ways, the far more popular syntax is one that utilizes the 8-bit rgb hexadecimal color code equivalent.

To use the hexadecimal syntax in CSS, we use an octothorpe (‘#'), followed by three pairs of hexadecimal digits which set each color channel in the order of red, green, then blue.

This syntax is illustrated below.

#7D110C

Exiting code block

The official 8-bit RGB color for Indiana University "Crimson" is 125 in the red channel, 17 in the green channel, and 12 in the blue channel, which comes out to 7D110C in hexadecimal.

The paragraphs are currently set to a value of gray, whose hexadecimal code is #808080. This is about 50% between black (#000000) and white (#FFFFFF).

To create our darker shade of gray for our paragraphs, we will try a color value closer to black. Let's try a value of #343434 for our paragraphs, which is about 20% between black and white.

Step1. In the rule with the p selector, to select the value to replace,

Press & Drag gray

Step2. To set the new value, type:

#343434

Step3. Save and refresh index.html.

The paragraphs should now appear a bit darker.

We will be revisiting color later, but we will first take a look at choosing the right font size.

NOTE: You don't have to be a color genius to pick the colors you would like for your Web site. Special tools making it easy to get the color you want are widely available. A simple search for "hexadecimal color picker" using your favorite search engine should populate a list of free interactive tools available right in a Web browser.

Working with Font Sizes

The font-size property changes the height of the font. The basic goal of choosing appropriate font sizes is to make the text highly legible within its context.

Despite seeming straightforward on the surface, the task of choosing font sizes is one of the most debated topics within the Web design community.

Since there is such a large variety of different devices and browser sizes, it becomes very difficult to create a single Web page that accommodates all of the different scenarios.

There are many different ways to measure font size values in CSS, but they can be divided into two main categories: absolute and relative units of measurement.

Understanding Absolute Units

Absolute units of measurement in CSS allow values to be defined that do not depend on exterior data. The font sizes that we gave our heading 2 (28px) and heading 3 elements (18px) are examples of utilizing absolute units.

The px unit of measurement we have used for our existing font sizes stands for pixels. We can use this to make our font a specific number of screen pixels tall.

There are many different absolute unit choices at our disposal:

• The native measurement for digital media (screens) is the pixel, or px in CSS.
• Keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
• Print measurements: in for inches; cm for centimeters; mm for milimeters; pt for points; pc for picas.

The print measurements are rarely used, and only really recommended for Web documents that are intended to be printed.

Considering the Default Font Size

The keywords are considered absolute, because they are based on the browser default font size. If no font size is specified, then the default font size for a Web page is actually the value normal, which is a font size keyword in CSS. The actual pixel size of font size keywords depend on what the browser considers to be appropriate sizes for the respective keywords.

However, the convention for virtually all browsers is that normal means 16 pixels tall. Many Web developers often rely on this being the case when designing their layouts.

Browsers assign different default font sizes for headings. For example, our heading 2 element was most likely automatically set to be 1.5 times the size of the default, before we applied CSS. This is actually an example of relative sizing.

Let's take a look at using relative measurements now.

Understanding Relative Units

Relative units of measurement compute a font size as a function of its parent element's size. In other words, unlike absolute font sizes, relative font sizes depend on the font size of the parent element.

The different relative units are listed below:

• Percentage: a font size can be calculated as a percentage of its parent element using the percent symbol (%).
• Ems: one em corresponds to the height of the parent element, making the em functionally equivalent to using percentages for font sizes.
• Keywords: smaller and larger, which make the font a bit smaller or larger than that of its parent element.
• Rems: a CSS3 newcomer, rems are the same as ems, except that rems are influenced only by the font size of the root element, i.e. its highest ancestor (the html element), instead of its direct parent.

Ems and percentages do the same thing when used for font sizes; 100% is the same as 1em, 150% is the same as 1.5em, and so on. Ems always refer to the height of the font. However, the percent sign used in CSS outside of the font-size property carries an entirely separate function.

NOTE: There is one other unit of measurements for fonts not mentioned thus far: the ex. The ex is supposed to refer to the height of the lower case letter ‘x' in a font. The unit, in practice, roughly maps to the height of the lower case letters of a font. The problem is that it yields unpredictable results, thus making it unpopular.

Using Relative Font Sizing

Whether or not a font scales well with varying devices and browser sizes is more dependent upon layout choices and advanced techniques than choosing between absolute and relative sizes.

That being said, relative font sizes are generally considered the wiser choice, and there are a few reasons for this.

The central case for relative font sizes is that if all the font sizes use relative measurements, the Web designer will be able to change the font size in the body rule, and have that change cascade down to all of its children elements. This makes it easier to design a scalable layout.

Another factor is that people with visual impairments often employ a user stylesheet, which allows them to customize styles on a Web page, taking precedence over the designer's choices. Relative sizes create fewer surprises for them. If the user's stylesheet increases the font size in the body rule, then all of the text will be larger. If the developer chose to use absolute units for font sizes for each element, then changing the font size of the body would fail to make a difference, since the other elements override the body's size value.

Let's first convert our font sizes to relative units, and then see this in action.

Step1. In the rule targeting both h2 and h3, to select the font size value to replace,

Press & Drag 28px

Step2. To set the new value using ems, type:

1.75em

Step3. In the rule targeting just h3, to select the font size value to replace,

Press & Drag 18px

Step4. To set the new value using ems, type:

1.125em

Step5. Save and refresh index.html.

It appears that nothing has changed. If we do a bit of arithmetic, we will find that the default of 16 pixels, multiplied by 1.75 ems, equals 28 pixels; and 16 pixels, multiplied by 1.125 ems, equals 18 pixels.

To demonstrate the benefit of switching over to ems, let's make a global font change in the body. For instance, if we wanted to increase the size of all of our text by 10%, we could apply a font size of 110% to the body rule.

Step6. To set a font size property declaration for the body rule, type:

body {
 font-family: 'Lucida Sans Unicode', sans-serif;
 font-size: 110%;
}

Exiting code block

Step7. Save and refresh index.html.

All of our text is 10% larger.

NOTE: 110% of the typically default font size of 16 pixels comes out to 17.6 pixels. Having fractions of pixels in layouts used to be a huge problem on older machines, but now newer browsers and operating systems do a good job of smoothing out any strange artifacts or jagged edges (refered to as aliasing), that would otherwise occur around our text.

Now we'll jump back to a bit of HTML.

Code Listing #2

At this point, the contents of the index.html embedded stylesheet should look like:

<style>
 body {
 font-family: 'Lucida Sans Unicode', sans-serif;
 font-size: 110%;
}
h2, h3 {
 font-family: Georgia;
 font-size: 1.75em;
}
h3 {
 font-size: 1.125em;
}
p {
 color: #343434;
}
</style>

Exiting code block