CH 12 CSS Style Sheets 1

Objective What is CSS? Selecting elements Different rules for different media Importing style sheets 2

What is CSS? What Are Cascading Style Sheets? CSS CSS - stand for Cascading Style Sheets CSS CSS is a declarative language introduced in 1996 as a standard means of adding information about style properties to HTML Properties such as fonts and borders 3

What is CSS?  A simple CSS style sheet A CSS style sheet contains a list of rules. Each rule gives the names of the elements It applies to and the styles to apply to those elements.css The three letter extension.css is conventional, but not required 4

What is CSS? 5 This style sheet has five rules. Each rule has a selector POEM { display: block } TITLE { display: block; font-size: 16pt; font-weight: bold } POET { display: block; margin-bottom: 10px } STANZA { display: block; margin-bottom: 10px } VERSE { display: block } POEM { display: block } TITLE { display: block; font-size: 16pt; font-weight: bold } POET { display: block; margin-bottom: 10px } STANZA { display: block; margin-bottom: 10px } VERSE { display: block }

What is CSS? first rule The first rule says that the contents of the POEM element should have a line break before and after it (display: block) second rule The second rule says that the contents of the TITLE element should have a line break before and after it (display: block) in 16-point (font- size: 16pt) bold type (font-weight: bold) 6

What is CSS? third rule The third rule says that the POET element should have a line break before and after it (display: block) and should be set off from what follows it by 10 pixels (margin-bottom: 10px) fourth rule The fourth rule is the same as the third rule except that it applies to STANZA Elements Fifth rule Fifth rule simply states that each VERSE element also has a line break before and after it 7

What is CSS?  Comments CSS style sheets can include comments. CSS comments are similar to C’s /* */ comments, but not to the XML and HTML comments 8

What is CSS? Sample of comments in CSS 9 /* Work around a Mozilla bug */ POEM { display: block } /* Make the title look like an H1 header */ TITLE { display: block; font-size: 16pt; font-weight: bold } POET { display: block; margin-bottom: 10px } /* Put a blank line in-between stanzas, only a line break between verses */ STANZA { display: block; margin-bottom: 10px } VERSE { display: block } /* Work around a Mozilla bug */ POEM { display: block } /* Make the title look like an H1 header */ TITLE { display: block; font-size: 16pt; font-weight: bold } POET { display: block; margin-bottom: 10px } /* Put a blank line in-between stanzas, only a line break between verses */ STANZA { display: block; margin-bottom: 10px } VERSE { display: block }

What is CSS?  Three Ways to Insert CSS External style sheet - An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file Internal style sheet - An internal style sheet should be used when a single document has a unique style Inline style 10

What is CSS?  Attaching style sheets to documents You can apply the same style sheet to many documents It’s common to put your style sheets in some central location on your web server Where all of your documents can refer to them; A convenient location is a styles directory in the web server’s document root 11

What is CSS?  DTDs and style sheets The style rules only apply to the content of the document (XML), not to the DTD 12

Selecting Elements selector The part of a CSS rule that specifies which elements it applies to is called a selector. The most common kind of selector is simply the name of an element CSS Selector Patterns 13

Selecting Elements  The universal selector The * symbol selects all elements in the document. This lets you set default styles for all elements 14 * { font-family: “New York” }

Selecting Elements  Grouping selectors If you want to apply a set of properties to some but not all elements, list the element names in the selector separated by commas 15 POET, STANZA { display: block; margin-bottom: 10px }

Selecting Elements  Hierarchy selectors - Child selectors > A child selector uses the greater than sign > to select an element if and only if it’s an immediate child of a specified parent 16 STANZA > VERSE {font-weight: bold } REFRAIN > VERSE {font-style: italic } STANZA > VERSE {font-weight: bold } REFRAIN > VERSE {font-style: italic }

Selecting Elements Descendant selectors A descendant selector chooses elements that are children, grandchildren, or other descendants of a specified element 17 BOOK VERSE {font-weight: bold } POEM VERSE {font-style: italic; font-weight: normal } BOOK VERSE {font-weight: bold } POEM VERSE {font-style: italic; font-weight: normal }

Selecting Elements Adjacent sibling selectors (+) between two element names signifies that the left-hand element precedes the right-hand element at the same level of the hierarchy This rule finds all REFRAIN elements that share a parent with a STANZA element and that immediately follow a STANZA element 18 STANZA+REFRAIN {color: red}

Selecting Elements  Attribute selectors Attribute selectors identify specific element/attribute combinations Square brackets surround the name of the attribute being specified 19 POEM[TYPE] { font-family: “Zapf Chancery”, cursive }

Selecting Elements - Attributes 20 TYPE inside the red bracket specifies a script font for all elements but not plain You can use a ~= to indicate that the attribute value only needs to contain the specified word somewhere within it POEM[TYPE] { font-family: “Zapf Chancery”, cursive } POEM[TYPE~=“SONNET”] { font-style: italic }

Selecting Elements - Attributes This would not find elements whose TYPE attribute contains the word SONNETS or UNISONNET CSS only looks for complete words. It does not look for substrings 21

Selecting Elements - Attributes You can use a |= to indicate that the attribute value needs to begin with the specified word This would not find elements whose TYPE attribute had the value “HEXAMETER SONNET” It would match a POEM with a TYPE attribute having the value “SONNET HEXAMETER” 22 POEM[TYPE |= “SONNET”] { font-style: italic }

Selecting Elements - ID selectors Use when unique element needs a unique style sample This rule makes the first STANZA element, and only the first STANZA element 23 #st1 STANZA#st1 {font-weight: bold}

Selecting Elements - Addressing the first letter Addressing the first letter – Use when to capitalize first letter of a text. :first-letter 24 CHAPTER:first-letter { font-size: 300%; float: left; vertical-align: text-top; margin-right: 12px } CHAPTER:first-letter { font-size: 300%; float: left; vertical-align: text-top; margin-right: 12px }

Selecting Elements - Addressing the first line :first-line Addressing the first line - :first-line selector to the name of an element to create a rule that only applies to the first line of the element, 25 CHAPTER:first-line { font-variant: small-caps }

Pseudo-classes select elements that have something in common, but do not necessarily have the same type Pseudo-classes differ from pseudo-elements in that they always select an entire element, never just a part of it 26

Example of Pseudo-classes are Position of the mouse, the object that has the focus, or whether an object is a link  :first-child The :first-child pseudo-class selects the first child of the named element, regardless of its type 27 STANZA:first-child {font-weight: bold}

 :hover The :hover pseudo-class refers to elements that the mouse or other pointing device is pointing at, but without the mouse button depressed 28 STANZA:hover { font-weight: bold }

Importing Style Sheets rule embeds a different style sheet into an existing style sheet This allows you to build large style sheets from smaller, easier-to-understand pieces An absolute or relative URL is used to identify the style sheets url(poetry.css);

references w-do-i-style-an-xml-file-with-css.html w-do-i-style-an-xml-file-with-css.html CSS How do I style an XML file with CSS 30