IT145 HTML and CSS

Week 6

Questions from last time?

Chapter 7: Style Sheet Building Blocks

In modern Web page design we try to keep the content and structure of the page separate from the formatting (the control of the page's visual appearance). We use HTML to specify the structure of the page, and use Cascading Style Sheets (CSS) to specify the appearance.

The CSS style rules may be

embedded within the HTML code of the body (but this mostly defeats the purpose of using CSS). This is called a local or inline style.
stored in the head of the document (in which case the style rules apply only to the current page). This is called an internal style sheet.
stored in external CSS files that can be applied to multiple pages. Changing the style rules in an external style sheet will alter the formatting of all the Web pages that use it simultaneously, which saves a lot of time.

A Web page may be linked to more than one external style sheet, and it may also have internal styles defined within the head or body of the page. How any conflicting style rules are applied is determined by the cascade (the order and specificity of the rules).

We will use CSS 3 in this course. Not all features of CSS 3 are supported by all browsers (since this new version of CSS is not yet finalized), but modern browsers do a very good job of supporting the previous CSS 2.1 standard.

Style Rule Structure

A style rule includes the selector (at the beginning) and the declarations (the items contained in curly brackets). Here is an example of a style rule as it might appear in a CSS style sheet:

p {color:red; text-align:center;}

The selector determines what the style rule will be applied to. In the example above, it would affect all paragraphs, since they use the p tag.

There may be one or more declarations consisting of property:value pairs that tell what formatting gets applied. In the example above, the first property:value declaration specifies that the color of the paragraph's text will be red; the second property:value declaration specifies that the paragraph will be center-aligned.

Note that you can insert returns, spaces, and tabs as desired when typing in a style rule. For example, the style rule above could have its declaration block be entered as shown below:

p {
color: red;
text-align: center;
}

Formatting a style rule as shown above is handy when typing rules that may have many property:value declarations. It makes it easy to see each declaration, and to add or delete declarations.

The semicolon is required between property:value declarations! You don't actually need the semicolon after the final declaration, but it's a good idea to put it in anyway because then you won't forget to insert it if you ever insert more lines of property:value declarations.

To show you how these styles can be entered into a Web page document, I will use the example file here (the file name is cccfunpage.html).

Here is are some other examples of style rules (we will explain these in more detail later):

img {border:none;}

body {background-image: url(unmlabkg.jpg); }

#footer {background-color: silver; font-size: 70%;}

.caption {
     color: green;
     font-weight: bold;
     background-color: #CCCCCC;
}

The first example here (which uses a tag selector or element selector) will set all images to have no border (this is useful if you are using images as links and you don't want the default link borders to appear).

The second example would make the image "unmlabkg.jpg" the background image of a Web page (because it would apply to the body element).

The third example (which uses an id selector) could be used to make a section of a page (the section of the page could be a <div> or <footer>) that has an id="footer" attribute to appear as small size font on a light gray background.

The fourth example (which uses a class selector) will make anything that you apply the class caption to appear green, bold, and on a background color of gray. These words here are formatted with caption class -- the words are enclosed in a span that has class="caption" as an attribute.

Note that in all the examples above, I've been displaying the styles rule as they would appear if placed in the internal style sheet (in the head of a Web page), or in an external style sheet. If I wanted to apply local (inline) formatting to a paragraph, I could do this (I'll use the same formatting I used for .caption above):

<p style="color: green; font-weight: bold; background-color: #CCCCCC;">Here is green, bold text on gray background.</p>

And that paragraph would look like this:

Here is green, bold text on gray background.

...but if I was going to format several paragraphs on a page like this, it would be much more compact to place the style rule once in the internal (or external) style sheet and just use this code:

<p class="caption">Here is green, bold text on gray background.</p>

Comments in Style Sheets

You can place comments inside your style sheets (or even in locally-applied style rules) by putting the comment between /* and */ symbols, like this:

h2 {font-family: Arial, Helvetica;} /* Use Ariel, otherwise Helvetica */

Note that comments can be on the same line as the style rule (as shown above), or they can be on their own lines in a style sheet (see below). Comments can include returns, so a comment could be several lines long, such as:

img.bord {border: 6px solid red;}
/* This style rule will put a solid red border that is 6 pixels
wide around all images to which I apply class="bord" so
that they will be strongly emphasized. */

You can temporarily deactivate a style rule in a style sheet by turning it into a comment. This is very handy when you want to see what would happen if you removed the rule, but don't want to delete the rule in case you want it back again. In the example below, the h2 style rule has been commented out:

h1 {color: red;}
/* h2 {color: green;} */
h3 {text-align: center;}

NOTE! You can't nest style sheet comments inside other style sheet comments.

Don't confuse style sheet comments with HTML comments, which look like this:

Inheritance

Certain CSS properties are inherited by the child and other descendent elements of a parent element. (Recall that a child element is one that is directly enclosed in a parent element, and other descendent elements are nested even deeper.) For example, if you apply a style rule to an <article> element that makes its text color red, then any <p> (paragraph) or <h2> (heading level 2) elements within that article section of the Web page will also have red text. Text color in an example of a property that is inherited.

Other CSS properties are not inherited, such as border settings. For example, in the example page let's try seeing the difference between applying class style rules with declarations {color: red;} and {border: 4px solid red;} to the main <section>. We will see that the border is not inherited.

However, if we want a child to inherit the value of a property of its parent (that is normally not inherited), we can specify the inherit value for that property. For example, we can make a style rule h2 {border: inherit;} to force the h2 children to inherit the border formatting from its parent. Let's do that.

We will learn more about the different CSS properties later, but you can find them listed in the online Appendix B of the textbook. Previous versions of the textbook had this appendix, but it is online for the current edition. This list also tells which properties are inherited, and which are not.

Property Values

CSS properties can have different types of values specified for them. Some require lengths, others require a number, others require a word from a list of acceptable values, others get a URL, and others need a color. Below are examples of each (remember that these property:value declarations would be used inside the curly brackets a style rule, or between the quotes of an inline style!).

A length value contains a quantity and a unit, such as 20px or 5em (note that there must be no space between the quantity and the unit!). If the quantity is 0 (zero), it is OK to omit the unit. Many lengths can be specified in pixels (px). The size of a pixel on the user's screen will depend on the resolution setting of their display. You may also find it useful to specify lengths in ems (em) since the size of the em depends on the font size being used on the page. Example of a length value:

margin-left: 3em;

NOTE that, unlike we did with the values of attributes in HTML, we do NOT put quotes around values in CSS (except in certain special cases we'll see later, such as font names that contain multiple words, like "Times New Roman").

There are also absolute units, such as points (pt), inches (in), millimeters (mm), etc., but you should avoid these except when the resolution of the display device is known, such as when making styles for printed output.

Lengths can also often be specified in percentages (%), which will be relative to something else. This might be relative to the size of the browser window or parent section when applied to widths or margins, or it might be relative to the font size or line spacing of the parent as in these examples:

font-size: 80%; line-height: 120%;

A few properties can accept values that are just numbers with no unit. The most common examples are line-height and z-index. Also, length values of zero (0) don't need a unit.

line-height: 1.2;
z-index: 3;

Some properties allow a value to be a word chosen from a list of allowable preset words, such as:

text-align: justify;
display: none;

Many CSS properties allow you to specify the preset value inherit if you want to inherit a property from the parent element that is normally not inherited. For example:

border: inherit;

...would cause the border settings of the parent element to be inherited by a child element, even though border properties are normally not inherited.

Some properties require a value that is a URL (Uniform Resource Locator), such as:

background-image: url(images/lakefaded.jpg);

NOTE! When using external style sheets, the URL specified is relative to the CSS Style Sheet, NOT relative to the Web page that is being formatted by the style sheet. (The external style sheet could be in a different directory than the Web page, and the URLs have to be specified relative to the external style sheet's location.)

Some CSS properties allow you to specify multiple values. For example, the border property lets you specify in one shot the values for the border-width, border-style, and border-color properties. So this:

border: 2px solid red;

...is equivalent to:

border-width: 2px; border-style: solid; border-color: red;

Some CSS properties require color values, and these can be specified in a number of ways. There are the 17 standard color names: black, white, silver, gray, grey, aqua, teal, blue, navy, red, maroon, lime, green, yellow, olive, fuchsia, purple, gray, and grey (gray and grey are the same color). CSS3 allows a total of 147 color names (full list of color names). Example of a color name value:

background-color: silver;

You can also specify colors in terms of the amount of red, green, and blue light in them (either as a number from 0 to 255, or a percentage from 0 to 100%), like this:

color: rgb(80%, 9%, 40%);

color: rgb(204, 23, 102);

Note that the first number specifies how much red, the second number how much green, and the third number how much blue. And note that we are mixing colored light here (which is an additive process), not mixing pigments (which is a subtractive process that applies when you mix paint in art class).

CSS3 also allows you to specify colors in terms of Hue, Saturation, and Brightness (HSL). It looks like this:

color: hsl(240,100%,50%)

Hue is the first number, and has a value from 0 to 360 that represents the position around a color wheel (red is 0, green is 120, blue is 240, and 360 is back to red). Saturation is the second number, given as a percentage from 100% (fully saturated color) to 0% (grayscale). Lightness is the third number, given as percentage: 50% is the pure color, while 0% is black and 100% is white.

The most common way colors are specified is using hexadecimal numbers to specify the amounts of red, green, and blue light in the color. These hexadecimal numbers are each between 00 and FF. The hexadecimal numbers MUST be preceded by a # sign, like this:

color: #FFCC00;

See this page for more explanation of hex color values. Note that hex colors consisting of three pairs of repeating digits (as in my example above) can be specified as #FC0

CSS3 incorporates setting the transparency of a color property using RGBA or HSLA formats, such as:

background-color: rgba(90,0,128,0.25);

The "a" stands for "alpha channel transparency" and is a value between 1 (completely opaque) and 0 (completely transparent). The example above would be a color that is 75% transparent. The example below shows text formatted using the property and value color: rgba(255,0,0,0.40); against a striped background in a <div> to show the transparency:

60% Transparent Text

Older browsers do not recognize the RGBA or HSLA color values, or they required that transparency be specified in some other way (this is what happens when browser authors incorporate features before there is a standard). But, because browsers generally ignore any code or formatting instructions that they don't understand, Web authors can often include multiple lines of different formatting directives that allow all of the different browsers to show the desired result -- but it's ugly. In the case of specifying transparent colors, you may want to include at least two declarations for the color, as shown in the example below:

h2 {
background-color: #59007F;
background-color: rgba(89,0,127,0.75);
}

An old browser that can't recognize RGBA will show the opaque color #59007F, while a newer browser that can RGBA will use the transparent color specified in the second declaration. (The newer browser also recognizes the first declaration, but that declaration is overridden by the second declaration.)

Conflicts Between Rules

What happens when more than one conflicting style rule is applied to the same element? Which rule wins and determines the formatting? This is where the concept of the "cascade" in CSS comes in.

Each Web browser has built-in rules about how various elements are displayed (for example, <h1> elements are generally displayed as bold in a large size using the default font). You can override the default appearance of elements using your CSS style rules.

And, as we previously mentioned, elements will inherit some styles from their parent elements, but these inherited styles can be overridden by styles you apply to those elements.

When style rules conflict, it will depend upon the specificity and the relative location (or order) of the rules. Also, any property that is not changed by a later rule (which might be changing different properties) still applies. For example, if the follow style rules appear in the internal style sheet of a page:

p {font-weight: bold; color: red;}
p {color: green;}

...the text in the paragraphs on the Web page would be bold and green. The bold comes from the first rule, and the green color of the second rule overrides the red color of the earlier rule (and because the second rule does not have anything to say about font-weight, that property remains unchanged from the bold setting of the first rule).

Of the different ways that style rules can be applied (different selectors), which we will discuss in detail on another day, element (or tag) selectors have less importance than class selectors, and id selectors have more importance than class selectors. This importance is referred to as specificity; the more specific rule will dominate the less specific rule. For example, if the following style rules appear in the internal style sheet:

p {color: red;}
p.stuff {color: blue;}
p#footer {color: green;}
p#footer {color: gray;}

...a regular paragraph on the page would appear with red text color. Any paragraphs that have the class="stuff" attribute (and there could be several of them) would appear in blue. The paragraph that uses the id="footer" attribute (and there must not be more than one of these), would have text color gray (because the last two rules are of equal specificity, the later rule dominates).

Any element on the page that has a CSS style rule applied locally with a style attribute would appear with that local style, since that location overrides any other rules. For example, this paragraph coding:

<p class="stuff" id="footer" style="color: yellow;">I'm a paragraph!</p>

...would appear with yellow text color because the local style would override any colors specified in the style rules using p, .stuff, or #footer selectors by benefit of its local location.

You can give a property:value declaration in a CSS style rule more weight by adding !important to the end of the declaration as shown below (the color property has been marked as important, but not the font-weight property). Note that there is no semicolon between the property:value pair and the !important

p.stuff {font-weight:bold; color:green !important; }

Calculating the specificity of style rules with various selectors is discussed in this W3C document (but wait until you learn more about complex selectors before trying to understand it).

Note that all this can be complicated by the fact that users who are viewing your Web page may apply their own style sheets in their browser, and the user's style rules will override those specified by you (the author of the page). One of the reasons for using !important is that it will allow you (the author) to override the user's style rules (unless the user also specifies !important).

Debugging Style Problems

With many style rules being applied from a number of locations (inherited, applied locally, from internal style sheet, from multiple external style sheets), it can be confusing as to what styles are being applied where. Some of the tools in the Web Developer Toolbar (which you can install in Firefox) are useful:

The CSS menu of the Web Developer Toolbar allows you to View CSS for a page to display the style rules embedded in the internal style sheet that is located in the head of the page, and the styles that are in any external style sheets that are being linked or imported. In fact, the Edit CSS command will allow you to make temporary edits to the style rules to see how those change the page appearance. The View Style Information command opens a bar that will display the element path (with any class and id attributes applied) for any item your point at on the page. The various Disable Styles commands let you selectively disable inline (local), embedded (internal style sheet), and linked (external style sheet) styles so that you can see what happens (which can help track down a faulty style).

The Validate Local CSS command under the Tools menu is also useful in checking your CSS for errors (just as we use Validate Local HTML to check our HTML code).

You can also use the W3C CSS validator for checking the CSS of a page that is already posted out on the Web.

When debugging style problems, it can also be helpful to temporarily add the the property settings border: 1px solid blue; to any style rule if you aren't sure where it is being applied, since this will cause all items being formatted by the rule to be marked off with a thin blue border.

Chapter 8: Working with Style Sheet Files

We will now discuss the different places where you can put the CSS styles that you will use on your Web pages.

Applying Styles Locally (Inline styles)

We have already mentioned that styles can be applied locally (also called an inline style) by using the style attribute in an HTML tag, with the style declaration as the value for the attribute, such as:

<h3 style="text-align: center; color: #DD0000; font-family: 'Courier New', Courier, monospaced; line-height:120%;">This is a Header 3 Line!</h3>

This type of style rule will override any other style rule from internal or external style sheets. Using this is better than using deprecated attributes (since it will validate)...

BUT, we will generally avoid using local styles since they do not separate the formatting from the HTML content. And, if you were going to format several <h3> lines this way, it takes up a lot more space than just making a rule using the h3 selector and putting it in the internal or external style sheet.

Internal (Embedded) Style Sheet

If you are making styles that only apply to one Web page, it is OK to place them in the internal style sheet, which is located in the head section of the Web page. (If you are making styles that can be used by multiple Web pages in your site, it would be better to put them in a external style sheet.)

A head of a Web page that contains an internal style sheet might look like this:

<style>

h1 {color: red; font-family: Arial, Helvetica;}

img {border: none;}

     .caption {
          color: green;
          font-weight: bold;
          background-color: #CCCCCC;
     }

</style>
</head>

...where the internal style sheet is shown in bold above. Note that the style sheet is enclosed within <style>...</style> tags. In XHTML we used <style type="text/css"> at the start of the style sheet, but the extra type attribute is not required by HTML5 (although it doesn't hurt to have it there).

Sometimes you may see an HTML comment used to enclose the rules inside the internal style sheet, like this:

<style>
<!--

...(style rules go here)

-->
</style>

This was done to hide the CSS style rules from ancient browsers that would be confused by them...buit the chances of such old browsers being in use today is almost zero.

External Style Sheets

An external style sheet is simply a text file saved with the extension .css to indicate that it is a CSS file. The style rules are just typed into the text file. You can type returns, tabs, and spaces into the CSS file as desired to make your rules more readable. When you upload your Web pages, you must also upload the style sheet file (and set permissions as needed) so that your Web pages can access the file. The external style sheet for this Web page can be seen here.

If you want to use non-English characters in your external CSS file, you can begin the file with the line:

@charset "utf-8";

...which must be right at the beginning of the file (no lines or spaces before it). HOWEVER, if you use Web Developer Toolbar's "Validate Local CSS" command, the validator will complain that there is something before the @charset line. But when you upload the file to the Web server and validate the file, no error will be reported. (So this is a problem with Web Developer Toolbar.)

Linking to an External Style Sheet

The external style sheet is then linked to the Web page by putting the code shown below in bold into the head of the Web page:

Be careful to use the correct path to your external style sheet in the link line. The Web page you are reading right now, for example, uses the base.css external style sheet that is shared by all of the lecture pages in this Web site, and that style sheet is stored in the root level of the site (not inside the week06 folder where this page is located), so the href attribute in the link to that file looks like: href="../base.css"

If your Web page also has an internal style sheet, the link line to the external style sheet can be placed either before or after the internal style sheet <style> ... </style> element (but not inside it). Note that the location of the link is important! If the external style sheet link comes BEFORE the internal style sheet, the internal styles will take precedence over the external styles if the rules conflict. If the link comes AFTER the internal style sheet, the external styles take precedence.

You can link to more than one external style if desired. You might have one external style sheet that contains styles that are used by all of the pages in your site, but you may also have several pages that use additional styles that can be kept in a separate sheet. Simply attach each external sheet with a separate link line. Remember that the styles in the sheet whose link appears later take precedence in case of conflicts.

Importing an External Style Sheet

Instead of linking to an external style sheet, you can import the external style sheet. This alternate method of getting to external styles is discouraged because it results in slower downloading and rendering of the page, especially in certain browsers.

The line to import the external style sheet goes into the Web page's internal style sheet, as shown below:

@import "morestyles.css";

h1 {color: red; font-family: Arial, Helvetica;}

img {border: none;}

</style>
</head>

...where the path to the file is within the quotes. Note that the import line must come BEFORE any other style rules in the internal style sheet. The import line above could also be written as @import url(morestyles.css);

Always remember to include the semicolon at the end of the import line!

Note that because the import is the first item in the internal style sheet, and style rules defined further down in the internal style sheet will take precedence in case rules conflict.

You can also put an @import line as the first item in an external style sheet file, in which case the styles from both the external style sheet and the other external sheet it imports will be available to you in formatting the Web page. But, again, this is discouraged for performance reasons. It's better to use multiple link lines in the Web page to the separate external CSS files.

Offering Alternate Style Sheets

You can offer the user the opportunity to switch to alternate style sheets for your Web page. This only works in Firefox and Opera browsers. For example, the head of this Web page contains the code:

...which specifies that the CSS file "base.css" (which is located one level up in my directory structure) is the standard style sheet used when the page first loads. However, in Firefox you can use the View | Page Style submenu to choose the Red style sheet which has different colors and a background image (it's best to scroll to the top of the page to see the difference). By adding the title="Normal" to my default style sheet, it will also appear as a named choice in the View | Page Style submenu.

Unfortunately, this isn't particularly useful because a) it only works in a couple browsers, and b) you have to keep switching styles every time you switch to a new page. There are fancier ways of doing this with Javascript, but that's beyond what we want to talk about here.

Media-Specific Style Sheets

You can have multiple style sheets that apply to displaying your page on different media (for example, a standard computer screen, or printed on paper, or displayed on a handheld phone's browser). You would add the attribute media="name" to line that links to the external style sheet, where "name" can have the values screen, print, handheld, all, aural, braille, embossed, projection, or tty. For example:

If you are using @import to attach an external style sheet, you would just add the media name after the URL:

@import "normal.css" screen;
@import "printspecs.css" print;

Learning From Other Peoples' Pages

You can learn how other Web authors accomplished some formatting by viewing the source code of their page and looking at their CSS. If they used an external style sheet, you have to find the link to it within the HTML of the page, and then you can type that URL (tacked onto the base URL for the server of that Web page) to see it. Some browsers (such as Firefox) will show the CSS filename as a link that you can simply click on to view the file. Or, with the Web Developer Toolbar installed, you can just use the CSS | View CSS command to see all the CSS used by a Web page.

There are also some awesome Web sites out there that demonstrate the power of CSS, such as http://www.csszengarden.com/ and http://meyerweb.com/eric/css/edge/

Top of Page

Assignment 6 - Due Saturday, Oct. 5

You will build one or more Web pages using the elements and techniques we have covered in Chapters 7 and 8.

Use the DOCTYPE for HTML5. We have not discussed how to make CSS style rules in detail yet, but today's lecture contains examples of the style properties and values that you will need to do this exercise.

You must include the following:

Make a Web page that uses both an external style sheet and an internal style sheet. You must create all but one of the style rules specified below in the external style sheet, and create one of the styles in the internal sheet.
Create a CSS style rule to set the background color of your page (to something other than white).
Create a CSS style rule that sets the text color of all h2 elements using a hexadecimal color code (to anything other than black or blue), and centers the h2 elements horizontally on the page. Make sure your page has at least three h2 elements on it so we can see the results.
Create a CSS class selector style rule to set text color to blue, and apply this rule to two different paragraphs in your Web page.
Also apply the class style you created in step 4 to one of your h2 elements.
Create a CSS id selector style rule and use it to place a border and a background color (something different from the page's background color) to one paragraph in your Web page.
Create a CSS class style rule and apply it to a paragraph so that the paragraph's text size is 1.4 ems, the line spacing is 180% of the default value, the text is bold, and the left margin of the paragraph is indented by 50 pixels.
Make a second Web page that also uses the same external style sheet you are using for your main page of this exercise. Put content on the page as needed so that you can use the styles from the external sheet. Put a link to this second page on the main page of the assignment.

Upload the pages to your Web space on ftp.unm.edu using the Web tools discussed/used in class or similar tools. You may name the page whatever you like.

Validate your pages using the validator at: http://validator.w3.org/

Validate your CSS using the validator at: http://jigsaw.w3.org/css-validator/

Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.

NOTE! The Subject line of this email should be "IT145 YourName Asg. 6"

You will be graded on:

How well you followed directions
You sent the correct URL in your email.
The pages validate using the validators listed above

Extra Credit:

Create an alternate external stylesheet for your main page of this exercise that can be selected in Firefox. This alternate sheet should set a background image for your page, and should have different colors and other formatting for the styles that you created in the regular assignment.
You can get extra credit if your Web page validates as proper HTML5 (other than the warning about the HTML5 validator being experimental).

Reading Assignment:

Read Chapters 9 and 10 of HTML5 & CSS3 (for next week's lecture)