Chapter 3
Style Sheet Setup
Key Skills & Concepts
• Set Up Style Sheets in an HTML File
• Identify the Ways in Which Color Is Referenced in Web Development
• Specify Document Colors
Before we go any further with document setup, we need to cover a very important aspect of web page development with HTML5: the use of style sheets.
Set Up Style Sheets in an HTML File
I’ve already mentioned the phrase “style sheets” a few times, but haven’t really given them a full explanation yet. Part of the reason is that style sheets weren’t really a part of HTML until it was rewritten a few times. The purpose of cascading style sheets (abbreviated CSS) is to separate the style of a web page from its content.
The current HTML “rules” dictate that we only use HTML to identify the content of the page, and then use a style sheet to specify the presentation of that content. This not only makes web pages more accessible and usable to all users (regardless of their browsers, platforms, operating systems, physical limitations, and so forth), but also to search engines and other types of software.
TIP
If you’ve ever used the Style drop-down menu in Microsoft Word, you’ve already used a style sheet of sorts. The most basic style sheet might include a style called “Body Text” that specifies how the body text of the web page should look—which font and color to use, how much space to leave around it, and so on.
Define the Style
To define a basic formatting style, you first must identify which HTML element you want to affect. This tag is then called a selector in CSS. So, if you wanted to specify the style of all the level-2 headlines (which is accomplished with the
<h2> tag) on a page, for example, you would use h2 as your selector.
In fact, the selector is essentially the tag without the brackets. With that in mind, can you guess what the selector for
<p> would be?
Once you have a selector, you can define its properties. Similar to how attributes work in HTML, CSS properties alter specific attributes of a selector. Returning to the preceding example, if you want to change the style of the level-2 headlines on your page to a 14-point Verdana font, italic, and blue, you can use the following properties:
When you specify values for properties, you are creating a declaration for that selector. The declaration and selector together are then referred to as a set of rules, or a ruleset. In the typical ruleset, the declaration is enclosed in curly brackets after the selector.
So here are the first few pieces of our ruleset:
And here is how they all fit together to tell the browser to display all level-2 headlines in the Verdana font:
To specify the font size, color, and style (italic), we simply add on a few more of those properties:
At this point, you can probably start to see the pattern—a CSS property is followed by a colon, and then its value, which in turn is followed by a semicolon.
TIP
Appendix B includes a list of popular CSS properties.
Define the Values
As with attributes in HTML, properties have values. However, contrary to HTML values, CSS values are not placed in between quotation marks.
Most values can be specified in terms of color, keyword, length, percentage, or URL, as listed in Table 3-1. Length and percentage units can also be made positive or negative by adding a plus (+) or minus (−) sign in front of the value.
Table 3-1 Types of CSS Values
Create the Structure
After you know a little about the individual parts of CSS, you can put them together to create a few styles. The organization of these pieces depends a bit on which type of style sheet you are creating. There are three key places where we can style web pages:
• Inline Styles are embedded right within the HTML code they affect.
• Internal Styles are placed within the header information of the web page, and then affect all corresponding tags on a single page.
• External Styles are coded in a separate document, which is then referenced from within the header of the actual web page. This means a single external style sheet can be used to affect the presentation on a whole group of web pages.
You can use any or all of these types of style sheets in a single document. However, if you do include more than one type, the rules of cascading order take over: These rules state that inline rules take precedence over internal styles, which take precedence over external styles.
In a nutshell, CSS styles apply from general to specific. This means a ruleset in the
head element of a document overrides a linked style sheet, while a ruleset in the body of a document overrides one in the head element. In addition, more local (or inline) styles only override the parent attributes where overlap occurs.Inline
Inline styles are created right within the HTML of the page, hence the name. In the previous examples, a declaration was surrounded by curly quotes, but inline declarations are enclosed in straight quotes using the
style attribute of whichever tag you want to affect:
You can separate multiple rules by semicolons, but the entire declaration should be included within quotes:
Inline styles are best for making quick changes to a page, but they aren’t suited for changes to an entire document or web site. The reason for this is that when styles are added to a tag, they occur only for that individual tag and not for all similar elements on the page.
TIP
Inline styles overrule internal and external styles when multiple types of style sheets are found on the same page.
Internal
When you want to change the style of all the
h2 elements on a single page, you can use an internal, or embedded, style sheet. Instead of adding the style attribute to a tag, use the style element itself to contain all the instructions for the page. The style element is placed in the header of the page, in between the opening and closing head tags. Here’s an example of what an internal style sheet might look like:
As this example shows, the selector is placed before the declaration, which is enclosed in curly brackets. This entire ruleset can be contained on a single line or broken up into multiple lines, as in the following example:
You can write styles in several ways. The following example is just as valid as the preceding one and is preferred by some people because it is easier to read:
In addition, you can use certain shorthand properties to reduce the amount of coding necessary. For example, instead of specifying both font family (Verdana) and font size (12 point), you could type the following because both properties begin with font:
TIP
Chapter 4 discusses how to style text in much more detail.
External
An external style sheet holds essentially the same information as an internal one, except an external style sheet is contained in its own text file and then referenced from within the web page. Using external style sheets is a way to apply the same styles to multiple pages, thereby allowing an entire web site to share the same look and feel.
Thus, an external style sheet might look like this:
Notice that external style sheets don’t use the
style element or attribute, but simply include a list of rulesets as instructions for the browser. Once you create your external style sheet, save it as a text file, with the .css file extension. Then, return to your HTML file and add the link element to the page header to reference the external style sheet, as in the following example:
In this case, I only needed to write styles.css because the style sheet is in the same folder as my HTML page. However, if your style sheet is in a different folder than your HTML page, be sure to reference that path appropriately.
NOTE
External style sheets can be overruled by internal and inline style sheets.
Understand the Cascade
The C in CSS means cascade, but rarely is this term discussed with beginning web developers. While this is understandable, given the ability for this discussion to become very complex, we can’t avoid the topic altogether. So, let’s dive right in…
Officially, you know the C stands for cascade, but what exactly does that word mean? You might swap out cascade for combine to help clarify. When the browser comes across multiple style declarations for a single page or bit of content, it essentially combines them together into a single style sheet and assigns levels of importance to each declaration to determine how to process.
The most basic order of importance is one I just mentioned: External style sheets are overruled by internal and inline style sheets. This means if an external style sheet specifies all text should be black, but an internal style sheets says it should be blue, it will ultimately be blue. Table 3-2 helps further explain how the browser determines importance.
Table 3-2 Style Importance
While Table 3-2 doesn’t delve into the more complex aspects of cascading rules, it gives you a basic understanding of what sort of styles can override others. To reiterate, using this table, can you determine which of these styles would actually display in the browser?
1. p {color: black;} in an external style sheet
2. p {color: blue;} in an internal style sheet
You might have guessed that the internal style sheet (#2) takes precedence. This is a pretty clear-cut example, but what happens when things aren’t so cut and dry? The W3C has actually set up some pretty sophisticated rules to help with complex situations. These rules dictate a point scale, where more points are assigned, depending on how the style was generated, specified, and assigned. The higher the points received, the more important a particular style is considered. In situations where styles conflict, the most important are used. Take a look at www.w3.org/TR/CSS2/cascade.html to learn more about cascading rules.
NOTE
It’s common for new web developers to become frustrated when the browser seems to flat out ignore certain style declarations. Nine times out of ten, this is caused by conflicting declarations. If this happens to you, take a break and then use your browser’s troubleshooting tools to help identify the conflict. (Refer to Chapter 14 for more on testing and troubleshooting tools.)
Declaring Importance
I can’t leave a discussion on cascading without mentioning the !important rule. CSS allows for an override, so to speak, to be used when conflicting levels of importance might prevent a particularly desirable style from being used. To declare a style more important, you can add the important keyword, like this:
As you can see, the keyword must be prefaced by an exclamation mark in order to be properly interpreted by the browser. An !important declaration ultimately takes precedence over a normal style sheet declaration.
Identify the Ways in Which Color Is Referenced in Web Development
At the beginning of time—Web time—the only way to reference color in an HTML page was to use its hexadecimal color value. When CSS became the preferred method of referencing color in web pages, we were permitted to use a variety of other units to measure color, including RGB (which stands for Red Green Blue) values, RGB percentages, hexadecimal shorthand, and color names.
Hexadecimal Color
The “normal” number system in the United States is decimal—based on the number 10. This means we have 10 units (0–9) to use before we have to repeat a unit (as with the number 10, which uses the 0 and the 1).
The hexadecimal system (hex) uses the same concepts as the decimal system, except it’s based on 16 units (see Table 3-3). Because standard HTML cannot handle decimal color values, the hexadecimal system is used to specify color values on web pages. Instead of making up new characters to represent the remaining units after 9, the hexadecimal system uses the first six letters of the English alphabet (A–F).
Table 3-3 Decimal and Hexadecimal Units
Computer monitors display color in RGB mode, where R = Red, G = Green, and B = Blue. Each letter (R, G, and B) is represented by a value between 0 and 255, with 0 being the darkest and 255 representing the lightest in the spectrum. In RGB, white and black have the following values:
This is how one graphics program—Adobe Photoshop—displays the RGB values for blue (R:00 G:00 B:255). Most other graphics programs have similar ways of helping you determine the RGB values of your colors.
In Photoshop, one way to find out what the hexadecimal values are for that shade of blue is to click the triangle in the upper-right corner of that color window and choose Web Color Sliders from the menu.
The resulting window shows the corresponding hex values for that same blue are R:00 G:00 B:FF.
When using hexadecimal color values in an HTML page, you translate the color from decimal (RGB) to hex. Each red, green, and blue value translates into a two-digit hex value. You then combine all three of those two-digit hex values into a single string, preceded by a hash mark. The following is an example where a hexadecimal color is used to change the text in one paragraph to blue:
TIP
While you previously needed a scientific calculator to convert between decimal and hexadecimal values, many charts, software programs, converters, and even web pages are now available to do this for you. Check out www.psyclops.com/tools/rgb/ to see an example.
Hexadecimal Shorthand
When referencing a color that has value pairs, you can use a bit of shorthand to reduce the amount of typing necessary. For example, a color with a hexadecimal code of 003366 can be shortened to 036. This is because each of the two red values is the same, as are each of the blue and green values. That wouldn’t work for a hexadecimal code of 003466, because the green values—34—aren’t the same.
The following shows how the same blue used in the preceding code example could be referenced using hex shorthand:
RGB Values and Percentages
If hexadecimal color values already have your head spinning, I have good news! If a color’s RGB values are handy, use those in your style sheet in place of the hexadecimal code, like in the following:
If you don’t have the RGB values handy, as when working in some page layout or design programs other than Photoshop, you can also use the RGB percentages, like that shown in the following example:
Notice that a comma separates each RGB value, and the entire set of values is placed inside parentheses. A lowercase rgb precedes those parentheses, as in the case of the previous code example, R = 0, G = 0, and B = 255. As was the case with hexadecimal shorthand, RGB values and percentages are only used to describe color in style sheets, not the older HTML color tags.
Color Names
With each successive version of HTML, we have gained additional color names that have standard values. Table 3-4 lists the 17 color names that are almost uniformly supported by browsers. Over 100 more exist, so check out http://www.w3schools.com/html/html_colornames.asp to see visual examples of each.
Table 3-4 Popular Standard Color Names
So Which Should I Use?
The wonderful thing about using style sheets to define color in web pages is that we are free to use any of the previously mentioned methods. This means you can tailor your color presentation method to your particular needs and use whichever makes the most sense to you.
New and Notable Color Options
One of my favorite aspects of the latest HTML5/CSS3 updates is transparency. The W3C has defined two new ways to create transparency in web pages.
RGBA
With RGBA, you can specify the “alpha value,” or the transparency of a color. The transparency is defined by a number between 0.0 (completely transparent) and 1.0 (fully opaque). For example, you might use the following code to tell the browser to display a headline at 50 percent of the defined color:
The latest versions of Safari, Firefox, and Google Chrome have all supported RGBA color specification for awhile. Unfortunately, Internet Explorer only started supporting it with version 9. So if your target audience includes many users with older versions of IE, I don’t recommend using this.
TIP
The closer to 0.0, the more the background will show through.
Opacity
Another new addition to the CSS3 specification is the opacity property. Similar to the RGBA values just described, opacity values are defined between 0.0 (completely transparent) and 1.0 (fully opaque).
Specify Document Colors
Now that you know a little about how colors are handled in web development, let’s talk about the way in which we go about actually specifying them. Changing document colors, such as the background and the text, is accomplished via your style sheet.
As with any style declaration, you can specify the background, text, and link colors in an inline, internal, or external style sheet. The actual properties used to do so are the same, however, regardless of which type of style sheet you use. Look at the following example of an internal style sheet used to change the main background color as well as the link colors of a page:
NOTE
Remember, internal style sheets are those placed in between the opening and closing
head tags in the HTML code of your web page.The color property specifies the color of the foreground, whereas the background-color property identifies the background color. So when both of those properties are specified, the foreground color becomes the color of the text content.
The trick here is to consider which element actually creates the content whose color you want to change, and use that as your CSS selector. So, in the preceding internal style sheet example, I first tell the browser to change the background color of the entire page to white (the
body element determines the underlying features of a page, such as background color and default text color). Adding the color property to the body selector also specifies that all text on the page should be gray in this case.Next, I’m telling the browser to select all content affected by
a tags (a:link) and make them blue. When those links have been visited, I want the browser to render them purple, as indicated by the line a:visited {color: purple;}. And, finally, the color of active links—that is, the color visible when the user is clicking a link—is orange, as defined by the line beginning with a:active.TIP
Although we used the same property—color—to change the default text color and the various link colors, remember that it is the selector (in this case,
body and a) that tells the browser exactly which content’s color to alter.| Try This 3-1 | Add a Style Sheet and Change the Colors of Your Page |
Let’s take the index.html page from the last Try This, and change the background and text colors of that page. Goals for this project include
• Add an internal style sheet
• Choose coordinating colors
• Specify the background and text colors of the web page
• Reference the colors with the appropriate color codes
1. Open your text editor and load the index.html page saved earlier in this book.
2. Use the style element to create space for an internal style sheet in the header of the document.
3. Add the background-color and color properties to your internal style sheet as the following shows. (Feel free to replace these color values with any you deem appropriate.) Save the file.
You can find a color in several different ways:
• Go to www.colorblender.com and use the sliders to select your favorite colors. As a bonus, this online tool will then suggest matching colors to create a harmonious color palette.
• Use a color from Table 3-4.
• Choose one from the color-picker in your favorite graphics program (such as Adobe Photoshop).
4. Open your web browser and choose File | Open Page (or Open File or Open, depending on the browser you’re using). Locate the file index.html.
5. Preview the page to determine if you approve of your color choices. If you don’t, return to your HTML editor to make changes. After making any changes, save the file and switch back to the browser. Choose Refresh or Reload to preview the changes you just made.
Because style sheets are so integral to web development, it’s wise to review this chapter again after you learn some more about HTML page structure in the next few chapters.
Chapter 3 Self Test
1. What file extension is used for external CSS files?
2. The following line of HTML code contains errors. What is the correct way to write this line?
3. font-family, font-size, and color are all examples of what in CSS?
4. Update the following code to reference the URL of the background image images/ background.jpg:
5. Fill in the blank: CSS __________ alter(s) specific attributes of a selector.
6. The second two numbers in a six-digit hexadecimal code refer to which color?
7. Which element is used as a CSS selector when you want to change the color of a page’s links?
8. Which element is used as a CSS selector when you want to change the background color of a page?
9. Which takes precedence when there are conflicting style declarations?
A. A style applied to all p tags
B. A style applied with an ID selector
C. A style applied to the body element
D. A style applied with a class selector
10. Which takes precedence when there are conflicting style declarations?
A. An inline style
B. An internal style sheet
C. An external style sheet
D. A browser default style sheet
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.