User:Bartlett/04
Hour 4. Using CSS with HTML[wax ka badal]
- What You'll Learn in This Hour
- What the different types of HTML are and how to use them with Cascading Style Sheets
- The three ways to link CSS to styles and when to use each
- How to create an external style sheet for your entire website
- How to embed style sheets directly in your HTML
- How to create CSS rules based on the HTML attributes of class and id
In previous hours, you've used Cascading Style Sheets to style your HTML pages by linking in an external CSS file. The true power of CSS and HTML really shines through only when you understand both of these complementary languages, how they relate to each other, and how they can be used effectively.
HTML and CSS blend together well not by coincidence but by design; they literally were made for each other. Using that designed synergy is the key to creating effective presentations on your websites. |}
./ ADD NAME=CH04LEV1SEC1.HTML
Types of HTML[wax ka badal]
To fully understand how HTML and CSS work together, it's important to know what we're talking about when we talk about HTML. Hypertext Markup Language is defined by formal recommendations issued by the World Wide Web Consortium (W3C), just as the Cascading Style Sheets language is.
HTML 4.01
The most recent version of HTML is HTML 4.01. HTML 4.01 is an updated version of HTML 4.0, which itself was an improvement over HTML 3.2 and 2.0. (There was no official version numbered 1.0; the first version of HTML was a quickly changing adhoc language put together primarily by World Wide Web creator Tim Berners-Lee. When efforts began to standardize HTML, numbering started with 2.0.)
HTML 4.01 comes in three "flavors"Strict, Transitional, and Frameset. The type of HTML used on your page is indicated by the DOCTYPE statement you place as the first line of the page. Each flavor has a set of tags and attributes that are allowed and disallowed; they're like a variant of spoken human languages, in a way.
What's the difference between the three? HTML Strict relies entirely on CSS for presentational styling; HTML Transitional includes some HTML attributes and elements for presentation effects; and HTML Frameset is used to create frames.
Strict
HTML 4.01 Strict is a version of HTML that removes nearly all the presentational markupthe tags, the color and link attributes on <body>, the border attribute, and other old standbys that have been used for years to make pages more visually appealing. So what's a web developer to do if she doesn't want boring pages?
The answer should be clear to anyone reading this book: Use Cascading Style Sheets! The Strict variety relies heavily on CSS for presentation; that's why it's considered strict.
To declare your page as using HTML Strict, put the following at the very top of your HTML file as the first line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You'll want to use HTML Strict if you're designing primarily for newer browsers or if you don't mind giving unstyled pages to older browsers that ignore CSS.
Several recent browsers have a special compatibility mode for HTML and CSS where they adhere more closely to the published standards. Firefox and Internet Explorer turn on this mode when they encounter a valid DOCTYPE for HTML Strict and for a few other DOCTYPE declarations; other pages are shown in a "quirky" mode for backward compatibility with older browsers. For more information, see the following URLs:
Transitional
HTML 4.01 Transitional adds back in those presentation markup tags and attributes, although some, such as the tag, are considered deprecated. What's deprecated mean? That's W3C-talk that means "This is still within the formal specification, but you really should not use it, and it won't be in future versions of this language." Not all presentation markup in HTML 4.01 is deprecated, and you can freely use those nondeprecated elements and attributes as part of HTML 4.01 Transitional.
Transitional HTML is so named because at the time the HTML 4.0 specification was released, few browsers had particularly good CSS support, which meant Strict wasn't really usable on most websites, unless you wanted plain gray or white backgrounds, black text, and default fonts.
Transitional is intended as a temporary measure until browsers catch up. So far, the browsers have been slow in catching up; Transitional HTML is therefore what I suggest for most web development. If you are concerned about delivering your design to the majority of browsers out there, you should use HTML Transitional.
This is the DOCTYPE statement for HTML 4.01 Transitional; it should be the very first line of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset
The Frameset variety of HTML 4.01 is intended for use only in creating frameset pagesthose that use the <frameset> element, along with <frame> and <noframes>, to lay out different windows within the page. It's otherwise identical to Transitional HTML; you need to use this only on the page that establishes the frames, not on the frames contained within that set (unless they define other <frameset> elements, of course).
You'll want to use HTML Frameset whenever you're creating a frame presentation and at no other time otherwise.
The DOCTYPE for HTML 4.01 Frameset is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML
XHTML 1.0 is a version of HTML 4.01 written as XML, which means it follows the very specific rules and structure imposed on XML documents. The tags are all the same as in HTML, but how you write them may be different. For example, all XHTML tags are lowercase, and all attribute values have to be quoted. XHTML 1.0 comes in the same three varieties: Strict, Transitional, and Frameset. The next version, XHTML 1.1, is available only in a Strict flavor and thus relies entirely on CSS for presentation.
Using CSS with XHTML is pretty much the same as using CSS with HTML. Because XHTML represents a move forward to an XML-based web, you may end up migrating from HTML to XHTML sometime in the future. For this reason, I recommend writing all your CSS rules so that element names are written in lowercase letters. It doesn't matter in HTML, but it will in XHTML, and making this a habit will save you time now if you choose to use XHTML in the future: You won't need to rewrite all your style sheets.
Validating HTML
Validating your HTML means that you run your page through an HTML validator, which is a program to analyze HTML code and ensure that the code you write is in compliance with the HTML specification. In this way, an HTML validator is like a spellchecker or grammar checker for HTML.
By validating your HTML, you can catch errors in your code, such as misspelled attributes (like aling or scr) or closing tags you've accidentally left out. Validation also improves your compatibility with browsers: Valid HTML code is closer to what browsersespecially newer onesare expecting. You can validate against your chosen variety of HTML (Strict, Transitional, or Frameset) to ensure that you're using only tags and attributes that are within that subset of the language.
From the standpoint of troubleshooting your style sheet, it's much easier to catch CSS errors if you know you don't have many HTML errors. I've spent many hours chasing down what I thought were mistakes in my CSS when really I'd just written an HTML attribute or element incorrectly.
I recommend always making sure your HTML is valid. Valid code conforms to the appropriate HTML Document Type Definition, which is a formal specification of HTML syntax. You use the DOCTYPE statement as the first line of your HTML file to indicate the correct version of HTML.
To check your HTML, you can use one of the validation services listed here:
- W3C's HTML Validator (http://validator.w3.org)
- Web Design Group's HTML Validator (http://www.htmlhelp.com/tools/validator)
| Try it Yourself: Validate a Web Page
The process of checking your HTML is so important to creating good CSS that you should take the time out now to get familiar with it:
|
./ ADD NAME=CH04LEV1SEC2.HTML
Style Sheets in HTML[wax ka badal]
The Cascading Style Sheets language was specifically designed to work with HTML to build web pages. CSS rules can appear within linked style sheets, embedded style sheets, or inline style attributes.
The CSS rules that you will write for each method are generally the same, but the way your HTML and your CSS work together depends on the method you used. So far, you've worked with linked external style sheets, as that's the most useful way of dealing with Cascading Style Sheets and offers the most flexibility.
Linked Style Sheets
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "Getting Started with CSS," you learned about how to create external style sheets and link them with the <link> element in HTML. Linking style sheets in this manner gives you the greatest portability and ease of maintenance when designing your styles for your website.
Many sites use one or more global style sheets that are linked from every page on the site. Using a global style sheet lets you make changes to one file that will affect the appearance of every page on your site. With a simple change, you can switch the colors, fonts, sizes, and more across your whole website.
External style sheets let you separate your content fully from your styles, which means it's easy to replace those styles with something else. For example, you could easily change the appearance of a site by replacing the old style sheet with a new set of rules under the same name.
You can also link in specific style sheets for specific uses, such as one style sheet per company division, as well as a global style sheet for the whole company, on a corporate website. You can link style sheets for specific types of output devices as well, using styles written just for those types of devices. For example, you could create a style sheet specifically for handheld wireless devices, screen readers, or printers. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22], "Accessibility and Print Media," you'll learn more about designing for alternate output devices.
As seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], you can create linked style sheets by using the HTML <link> element in the <head> section of the page. A number of attributes can be used with the <link> element, but for our purposes only the following options are important:
<link rel="relationship" href="URL" type="content-type" media="media-type">
The <link> tag is actually an all-purpose linking element; it doesn't just define style sheets but also can be used to create any link between the entire document and some other URL location. To use it to identify a linked document as a style sheet, you need to specify what the relationship is. Other types of relationships include contents (specifying the location of a table of contents), alternate (an alternate version of the page for specific types of output devices or languages), and glossary (for a glossary of terms). To indicate a style sheet, however, you need only rel="stylesheet".
The href attribute indicates the location of the style sheet and is a normal web URL. The location can be relative or absolute; without a directory path, it's assumed to be within the same directory, but you can use any URL path (and machine name), as with any other link in HTML.
Your style sheet even can reside on a different web server than your HTML file; in fact, this is a good way to quickly and easily add style to a web page. However, this isn't a license to merely steal someone else's work, any more than viewing the HTML source is an invitation to swipe source code. Use an offsite style sheet only if the site operator has explicitly given permission for it to be used in such a manner. Keep in mind that many web hosting services charge for bandwidth usage, so you may be costing someone money each time you use that style sheet without permission. Also remember that because you don't control the style sheet, it could affect the look of your web page if it's changed or removed.
The content-type attribute of the <link> tag indicates the styling language of the linked style sheet. For Cascading Style SheetsLevels 1, 2, and 2.1this should be text/css. This is also the MIME type that your server should return when serving up CSS files. All modern web servers recognize the file extension.css as being a CSS file and send an appropriate MIME type. If you name your file something ending in .css, the server sends it as text/css. If you think your server doesn't do this properly for some reason, you should consult your web server administrator or the documentation for your server software. Also, if you write a server-side script to create a CSS document in, for example, Perl, ASP, or PHP, you should make sure you set the content-type HTTP header line to text/css.
The media attribute tells the browser with which types of media or output device categories the style sheet should be used. A browser applies different style sheets depending on the mediafor example, one style sheet for printing and another for onscreen display. Style sheets for other media are ignored, and those rules aren't applied.
For the most part, we are concerned with the media-type screen, which means visual, onscreen display. Because screen is assumed to be the default, you don't need to specify this unless you're linking a style sheet for another type of output device. Other media types include printer (for printed documents), braille (for tactile Braille devices), aural (for speech synthesizers), and all, which covers all media types. You can list more than one media type by separating them with commas, such as screen, printer.
Embedded Style Sheets
Another way to apply CSS to HTML is by embedding the CSS directly within the HTML file with the <style> tag. Your CSS rules are then part of the same file as the HTML, which makes editing easier, at least at first. An embedded style sheet also is useful for rules that apply only to a specific page and don't need to be used by other parts of the site, which helps keep the size of your global style sheet relatively small. For example, if you have a rule that applies only to the front page of the site, you don't need that in a site-wide style sheet that is accessed by every page, even those that don't use the rule.
On the other hand, it's also harder to maintain and update a site only with embedded style sheets; you have to edit every single page when you want to make a change in the appearance of the site.
For this reason, I prefer linking instead of embedding CSS, but in many situations it's easier or more appropriate to use an embedded style sheet. For example, when testing CSS rules or developing a style sheet, it may be easiest to use an embedded style sheet and then convert it to an external style sheet for production use.
To embed a style sheet, use the <style> tag, which can be used only within the <head> of a web page:
<style type="text/css" media="media-type"> ... CSS rules go here ... </style>
The type attribute is required. Theoretically, this is because a different style language could be used with HTML, although in practice only CSS is ever used. The media attribute is optional; the default is screen. As with the <link> element, you can set multiple media types by listing them with comma separators.
You can have more than one <style> element within the <head> section of the page if you like; for example, you could have one for screen and one for printer. (You could have two for printer, if you want, but it usually makes more sense to combine them together in a single <style> tag.)
Hiding CSS Code from Older Browsers
Browsers shouldn't ever reveal the contents of a <style> tag. Even if a browser doesn't support CSS, it shouldn't display the rules to the user. However, some very ancient browsers were written before CSS was created, and because these browsers don't know what the <style> tag is, they just display it as HTML text, which is just a mess. The best way to avoid this is by wrapping your CSS rules within HTML comments:
<style type="text/css" media="screen"> <!-- ... CSS rules go here ... --> </style>
The older browsers interpret this as just a normal comment, whereas the modern browsers understand the CSS. As nearly every browser used these days understands the <style> tag, it's not particularly necessary, but it doesn't hurt anything to do it, either. The examples in this book don't include comments.
Inline Style Attributes
You set inline styles on HTML tags by using the style attribute. Such a style applies to that particular element, or possibly to that element's children, if the rule's properties can be inherited.
The style attribute can be set on nearly any HTML tag that is displayed by a browser. The attribute contains the declaration of a CSS rule but not a selector; the tag itself (and its content) serves as the selector.
Here's an example of using inline styles to set some CSS properties:
<table style="font-family: Arial; font-size: large"> <tr> <th style="color: blue"> Writer's Name </th> <th style="color: green"> Primary Genre </th> </tr> <tr><td>Kynn</td><td>Technical (Web Design)</td></tr> <tr><td>Nick</td><td>Fiction (Horror)</td></tr> <tr style="color: red"> <td>R. Francis</td> <td>Non-Fiction (Podcasting)</td> </tr> </table>
As you can see, the selector is unnecessary; the style is applied to the tag on which the style attribute is set. Also, there are no ending semicolons on the rules. Within style attributes, the ending semicolon is optional. I usually write it myself because it makes it easier to add additional rules if I need them.
Style attributes are most useful for single-point changes, such as changing the color of an announcement to make it stand out, like this:
<h1 style="color: red;"> Just Added: New book signing at City Lights on Feb. 5. </h1>
As you're building a web page, it may seem easier to use inline styles rather than to create a separate style sheet; you won't have to go back to the <style> section or an external style sheet, but can just type the declaration directly into an attribute. However, in the long run it's harder to maintain inline styles because they'll be scattered throughout your HTML source.
Ultimately, the use of inline styles reduces the separation of content from presentation because it mixes the two together within the same markup. It makes more sense to use HTML for structure and content and CSS for presentation; in this regard, inline CSS is just a single step up from HTML presentation attributes.
In general, you should avoid using inline styles unless you have a very specific use in mind. If you have to style more than one part of your page the same way, it's better to use an embedded or external style sheet and define a class instead.
./ ADD NAME=CH04LEV1SEC3.HTML
Classes and IDs[wax ka badal]
In addition to setting styles based on HTML elements, CSS allows for rules based on two optional attributes in HTML: class and id. Each of these can serve as the selector part of a CSS rule and can be set on any visible HTML tag.
The
The class Attribute in HTML
The class attribute is used to define a related group of HTML elements on a page. They might have the same function or role, but in a CSS context, it means they have the same style rules applied to them. (The class attribute could be used for more than just styling, but in practice it's rarely used for any other purpose.)
The elements within a class can be of any type; one might be a, another a , and a third an <img>. That's perfectly fine; they will have the same style rules applied to them, but the fact that each one has a default presentation (defined by the browser or the HTML specifications) means those styles will be applied relative to the way they're normally rendered. To create a class, you simply have to give it a name. A class name may be nearly anything, but has to be one word; in practice, it's best to stick to letters and numbers. Avoid using underlines, periods, and other non-alphanumeric characters when naming your classes. You can name a class anything you like; it's basically just an arbitrary word used to group these items together. A descriptive name is good, especially one that describes function instead of presentation. For example, class="detail" makes more sense than class="bluetext"; if I can't come up with a good descriptive name, I'll use something arbitrary instead, such as the names of planets or the seven dwarves. Class names are not inherently case sensitive, but you should try to use the same case of characters when writing your HTML and your CSS rules. After you've chosen a name for your class, you just have to assign HTML elements to that class by setting the class attribute on each. A given HTML element can be part of one or more classes if they are separated with spaces. Here are some examples:
<div class="p1"> <h2 class="q2">Meeting Times</h2> <p class="r3"> We will be meeting every other Wednesday, at <span class="q2 j4">7:30 p.m.</span> </p> </div>
and the are both part of the q2 class. The is part of the "r3" class, and the is also part of the j4 class.
Class Selectors in CSS
After you've defined a class in your HTML, you can use it as a class selector in CSS. Class selectors are indicated by a period (.) before the name of the class, like this:
.q2 { color: blue; }
.r3 { font-family: Arial; }
You can combine an element selector with a class selector; the result selects only those members of the class that are of that particular element. (Or, it selects only those elements that are members of that particular classsame thing.) Just put the name of the element directly in front of the period and then the class name. For example:
span.q2 { font-size: large; }
p.r3 { color: green; }
The first refers to all elements with class="q2"; the latter to all elements in the r3 class. You can combine together several classes within a rule to select only elements that have those classes listed (separated by spaces, as described before) by separating them with periods, as shown here:
.q2.j4 { font-family: Arial; }
This rule would select the , which is part of both class q2 and class j4.
A complete example of using class selectors is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04ex01 Listings 4.1] and [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04ex02 4.2], and the result of displaying in a browser is presented in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04fig01 Figure 4.1].
Listing 4.1. HTML Code Illustrating Class Selectors
<html><br /><!-- This is class-4.1.html --><br /><head><br /><title><br />Class Selectors in Action<br /></title><br /><link type="text/css" rel="stylesheet" href="5-3.css"><br /></head><br /><body><br /><h1 class="mercury"><br />Welcome!<br /></h1><br /><div class="mars"><br /><p class="saturn"><br />This is a short page to tell you about our writers<br />group. We meet in the bookstore every other Wednesday;<br />our meetings are at <span class="mercury">7:30 p.m.<br />sharp.</span><br /></p><br /></div><br /></body><br /></html><br />
Listing 4.2. CSS Code Illustrating Class Selectors
/* This is class-4.2.css */<br />.mercury { color: white; background-color: black; }<br />.mars { font-family: Arial; }<br />.saturn { color: black; }<br />h1.mercury { font-family: Verdana; color: silver; }<br />
Figure 4.1. Firefox displays the style rules defined with class selectors.
File:04fig01.jpg
The id Attribute in HTML
The HTML attribute id is similar to the class attributeit can be set on nearly any tag and can be used as a CSS selectorbut is much more restricted. Only one tag on a page can have a given id; it must be unique within the page and is used to identify just that element. An id attribute's value has to begin with a letter and can be followed by letters, numbers, periods (.), underlines (_), hyphens (-) or colons (:); however, if you're using it as a selector in CSS, it's safest to stick to just letters and numbers. Case matters, so be consistent in the case of your id attributes. Here's an example:
<a href="next.html" id="next">The next page</a>
id Selectors in CSS
An id selector is indicated by a # (the hash, also called the pound sign) before the value of the id. For example:
#next { font-size: large; }
Why would you want to use id selectors and not class selectors? Good question. A class selector is more flexible; it can do anything an id selector can do and more. If you want to reuse the style, you can do it with a class selector by adding new elements to the class, but you can't do that with id selectors because an id value must be unique in a document, and only one element on the page can have that value.
An id selector is useful if you know that you have to identify one unique item within a pagefor example, the Next link, or maybe a common navigation or layout element that appears on each page. In general, id selectors are less useful than class selectors when you use CSS with HTML. When using CSS with XML, however, id attributes play a larger role because XML uses id attributes more than HTML does.
Try it Yourself: Using CSS with HTML
To apply what you've learned this hour, why not create an HTML page, create an external CSS file and link it to the HTML file, and add embedded and inline styles? This will make you familiar with the ways HTML and CSS are used together in web design.
1.
Create a basic HTML document with headers, paragraphs, and tags, and other markup. Be sure to set some class and id attributes on your tags. Save this HTML file.
2.
Create a CSS file with rules based on element selectors, class selectors, and id selectors. Save this CSS file.
3.
Use <link> to apply the CSS style sheet to the HTML file. View the results in an HTML browser that supports CSS.
4.
Add more styles directly into the HTML file by creating a <style> element in the <head>; view the results.
5.
Create some inline styles using the style attribute, and check your creation in a browser.
You'll have successfully completed the activity if you're able to use CSS with your HTML in each of the ways discussed this hourwith external style sheets, embedded style sheets, and inline style attributesand if you can utilize class and id attributes as selectors in your CSS rules.
./ ADD NAME=CH04LEV1SEC4.HTML
.q2 { color: blue; }
.r3 { font-family: Arial; }
span.q2 { font-size: large; }
p.r3 { color: green; }
.q2.j4 { font-family: Arial; }
<html><br /><!-- This is class-4.1.html --><br /><head><br /><title><br />Class Selectors in Action<br /></title><br /><link type="text/css" rel="stylesheet" href="5-3.css"><br /></head><br /><body><br /><h1 class="mercury"><br />Welcome!<br /></h1><br /><div class="mars"><br /><p class="saturn"><br />This is a short page to tell you about our writers<br />group. We meet in the bookstore every other Wednesday;<br />our meetings are at <span class="mercury">7:30 p.m.<br />sharp.</span><br /></p><br /></div><br /></body><br /></html><br />
/* This is class-4.2.css */<br />.mercury { color: white; background-color: black; }<br />.mars { font-family: Arial; }<br />.saturn { color: black; }<br />h1.mercury { font-family: Verdana; color: silver; }<br />File:04fig01.jpg
<a href="next.html" id="next">The next page</a>
#next { font-size: large; }
To apply what you've learned this hour, why not create an HTML page, create an external CSS file and link it to the HTML file, and add embedded and inline styles? This will make you familiar with the ways HTML and CSS are used together in web design.
1.
|
Create a basic HTML document with headers, paragraphs, and tags, and other markup. Be sure to set some class and id attributes on your tags. Save this HTML file.
|
2.
|
Create a CSS file with rules based on element selectors, class selectors, and id selectors. Save this CSS file.
|
3.
|
Use <link> to apply the CSS style sheet to the HTML file. View the results in an HTML browser that supports CSS.
|
4.
|
Add more styles directly into the HTML file by creating a <style> element in the <head>; view the results.
|
5.
|
Create some inline styles using the style attribute, and check your creation in a browser.
|
You'll have successfully completed the activity if you're able to use CSS with your HTML in each of the ways discussed this hourwith external style sheets, embedded style sheets, and inline style attributesand if you can utilize class and id attributes as selectors in your CSS rules.
Summary
In this hour, you learned about the three flavors of HTML 4.01 and how CSS is used in each, and you learned about the benefits of validating your HTML code. You learned about three tools for applying Cascading Style Sheets to HTML pages: external style sheets that use the <link> tag, embedded style sheets defined inside a <style> tag, or specific styles set with the style attribute. You learned how to set class and id attributes in HTML and how to create rules using class and id attributes as selectors.
./ ADD NAME=CH04LEV1SEC5.HTML
Workshop[wax ka badal]
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q1a1 Q.] | Will there be such a thing as HTML 5? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q1 A.] | No, and yes, and kind of. The W3C has stopped work on developing HTML and is concentrating on XHTML instead. The next version of HTML will be XHTML 2.0, and in addition to being composed of distinct modules, it will have new elements and attributes that don't currently exist in HTML. You can track the progress of XHTML 2's development at http://www.w3.org/Markup/.
In addition, a group called the Web Hypertext Application Technology Working Group (WhatWG), a group of browser developers and other interested parties, is working on what they call Web Applications 1.0an extension to XHTML 1.0, which is informally referred to as "HTML 5." Whether these efforts will bear fruit as a replacement for HTML 4.01 is unclear; you can follow the WhatWG's progress at http://www.whatwg.org. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q2a2 Q.] | Can you use selectors with inline styles? For example, ?
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q2 A.] | No; a style attribute contains only the declaration part of a CSS rule, not the selector portion. The selector is the content of the element itself. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q3a3 Q.] | You said I could use style attributes, embedded style sheets, and linked style sheets on the same HTML page. What happens if they have different values for the same property? |
| > | > |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa1q3 A.] | When two or more rules conflict, the method of resolving the conflict is known as the cascade. You'll learn more about this in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch07.html#ch07 Hour 7], but the general principle is that the more specific rule usually wins. |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q1a1 1.] | What HTML tag is used to insert an embedded style sheet? What are the primary attributes of that tag? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q2a2 2.] | What HTML tag is used to associate an external style sheet with an HTML tag? What are the primary attributes of that tag? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q3a3 3.] | What is the default value for the media attribute? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q4a4 4.] | What is the difference between a class selector and an id selector? When would you use each? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q5a5 5.] | What are the three "flavors" of HTML, and which one relies on CSS for nearly all presentation styling? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q6a6 6.] | What does HTML validation check for? |
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q1 1.] | The <style> tag is used to embed a style sheet in an HTML file. The main attributes are type, which should be text/css, and an optional media attribute. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q2 2.] | The <link> tag can be set in the <head> of an HTML file to link to an external style sheet. The primary attributes used with CSS are type, media, rel="stylesheet", and href. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q3 3.] | The default value of the media attribute is screen. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q4 4.] | An id selector applies to only one element within each document, whereas a class selector can be used to select any element within that class. You'd use class when you needed to select multiple elements, and id if you wanted to select only a single, unique element. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q5 5.] | The three types of HTML 4.01 are Strict, Transitional, and Frameset. HTML Strict has almost no presentational markup and depends on CSS to provide styling instructions. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch04qa2q6 6.] | HTML validation checks your HTML code against the formal specification and DTD for the HTML language. |
Exercise
Create your own web page and use what you've learned so far to style your page. Choose your type of HTML, set a DOCTYPE, and validate the page. Use <link> and <style> tags to set up your style sheet, and add inline rules with the style attribute.
You'll have successfully completed the activity if you're able to use CSS with your HTML in each of the ways discussed this hourexternal style sheets, embedded style sheets, and inline style attributesand if you can utilize class and id attributes as selectors in your CSS rules.
./ ADD NAME=CH05.HTML