- Abridged History of the Web 12.
- Measurements Based on the Height of the Lowercase Letter x 67.
- Chapter 3, “The Basics of CSS Anatomy and Syntax”: This chapter introduces the basics of CSS.
- To make use of the examples in this book, you need the following..
- I present code in the following two ways:.
- These markup languages contain the actual text you see in a web page — the paragraphs, headings, lists, and tables — and are the glue of a web document.
- An abridged history of the Internet.
- Abridged Histor y of the Web.
- XML is also case- sensitive, so title isn’t the same thing as TITLE .
- Furthermore, and perhaps most important, Internet Explorer 6 — the world’s most popular browser — does not currently properly support XHTML docu- ments that contain both HTML and XML.
- This all begs the question, “What happens if I don’t follow the syntax rules?” The simple answer is that the document ceases to be valid XHTML.
- The presentational aspects of Example 2-1 — the BGCOLOR , BORDER , and WIDTH attributes, and the <FONT>.
- This indicates to you that the quirks mode of one browser isn’t the same as the quirks mode of another browser..
- The following reviews each individual component of the style sheet..
- elements in the document:.
- elements that appear later in the body of the document..
- This rule applies declarations to the follow- ing element in the body of the document:.
- elements appearing in the body of the document.
- In this example, it’s the space between the sentences inside each heading and the inside border edge.
- This is one of the style sheet methods I demonstrated in Example 3-1.
- Because they appear inside the <style>...</style>.
- Here’s a demonstration of the <link>.
- Refers to the MIME type of the external file..
- element in the XHTML document.
- it is part of the string.” The backslash is used to quote Foghorn Leghorn in the following code:.
- Each of the following declarations has keyword values:.
- (I discuss the border property in further detail in Chapter 10.) The next declaration applies a skyblue background color to each <div>.
- ex The x-height of the relevant font (height of the letter x)..
- The first selector in the style sheet applies style to the <body>.
- The height of the <div>.
- The font size is 24 pixels, so the height of the <div>.
- Measurements Based on the Height of the Lowercase Letter x.
- This measurement depends on the resolution of the user’s monitor.
- measurement is based on the size of the <body>.
- element’s width is relative to the width of the.
- element to observe the effect of the margin property on the <div>.
- element contained in the document.
- The selector in this rule applies to all descendants of the <div>.
- every descendant of the <div>.
- appear in the page..
- <h2>Tell us what’s on your mind..</h2>.
- (Chapter 9 discusses generic fonts in greater detail.) The color property follows font-family property, which applies white text to the entire document..
- element is a parent, grandparent, or ancestor of the <h2>.
- and the top of the next.
- <option value=’’>Choose...</option>.
- elements to appear to the right of the <label>.
- element and the edge of the form.
- elements are direct children of the <select>.
- element a direct sibling of the <h2>.
- The embedded style sheet of the following XHTML document shows the syntax for this rule:.
- This selector results in the.
- This is demonstrated in the following rule:.
- Conversely, this principle does not apply to the href attribute of the following <.
- <a href=’http://www.somesite.com/index.php’>A .php page</a>.
- This results in the <div>.
- Make the highlighted modifications to the body of the document:.
- Enter the following changes to the body of the document:.
- These pseudo-classes also apply style based on the structure of the document.
- is the first-child of the <div>.
- element in the following markup:.
- This is where you take advantage of the float applied to the <li>.
- Make the following changes to the body of the document:.
- a black background and a thin, white border, but only when it’s the active target.
- In the preceding code, the rule is applied to the <div>.
- element contained within the ‘parentdiv’ <div>.
- A style sheet can originate from any of the following sources:.
- Finally, the author of the web page can specify a style sheet (of course).
- Using the chart, the universal selector has a specificity of zero, so it’s the broadest and most general.
- element because it is a descendant of the <ul>.
- Try It Out Examining the Effects of the Cascade and Inheritance.
- <li><a href=’’>Lunch at JT’s</a></li>.
- <li><a href=’’>Dinner at JT’s</a></li>.
- <li><a href=’’>Contact JT’s</a></li>.
- <h5>Soft drink cans <em>$1.50</em></h5>.
- <h5>Iced tea (sweet or not) <em>$1.50</em></h5>.
- <h5>Home-made Key Limeade <em>$1.50</em></h5>.
- <h5>Coffee, hot tea, hot chocolate <em>$1.50</em></h5>.
- <h5>Juice, milk <em>$1.50</em></h5>.
- The best in the Everglades.
- The first example of inheritance appears in the first rule of the base_styles.css style sheet:.
- Now, look back at the first line of the highlighted declaration in the preceding rule.
- element is a descendant of the <body>.
- Additionally, different fonts were utilized in the body of the dinner menu..
- element is selected as a descendant of the content <div>.
- The following is a review of some examples of the cascade that appear in the JT’s dinner menu.
- The selector of the first rule, div#nav >.
- The selector of the following rule, div#nav >.
- element in the dinner menu.
- This ensures that the content of the copy <p>.
- This is an example of the cascade.
- The next section continues discussion of the cascade with the !important rules..
- If more than one !important rule appears in a style sheet, and the style sheet has the same origin — that is, both rules come from the author’s style sheet or both come from the user’s style sheet — the latter rule wins out over any specified previously..
- that of the content.
- A list of browsers to support — the website must work on a variety of platforms and browsers to reach the most users possible.
- The body of the document is wrapped in a <div>.
- element contains the name of the page, and the <h6>.
- The content of the menu is contained inside of a <div>.
- The letters in the <h1>.
- Then, in the <div>.
- To demonstrate the effect of the word-spacing property, consider the following style sheet rule p