Lecture 9 – Applying Styles

Outline
 In the previous lecture
 We discussed construction of individual style rules.
 Creating Style-rule Selectors…
 Which allow us to apply styles with pin-point accuracy.

 In this Lecture, we continue our discussion of CSS

 By considering how to combine Style Rules into Sheets
 As we shall see, we may apply style rules in 3 basic ways:
 Via external style sheets;
 Via embedded (internal) style sheets;
 Via local application;

 We then discuss the implied rule cascade:

 Resolution of multiply-applied styles.
Creating External Style Sheets
 First, let’s discuss External style sheets…
 And work our way in, from there.
 Externally-applied style sheets are ideal for:
 Establishing a uniform ‘look-and-feel’ to our web-site:
 By setting up a common set of underlying formats for all pages.
 Supporting care-free maintenance of multiple-page web-sites:
 Since changes made locally to the sheet are applied to all linked pages.
 Thus, globally-relevant changes need be made only once.
 Supporting Style Set Re-usability and Portability:
 Once created, sheets may be transferred/applied quickly to new pages.
 Creating an external style sheet is straightforward:
 Create a text file, using a text editor (e.g., WordPad; text-only).
 Define as many styles as desired, sequentially…
 In a simple, one-by-one manner.
 Save the file with the css extension (e.g., filename.css).
 Note: As usual, upload style files to your server in ASCII (not binary) format.
 That’s It!
 Once created, style sheets must be either linked to or imported…
Linking External Style Sheets
 The link element is used to link to an external style
sheet:
 In the head section of each XHTML sheet, type:
<link rel=“stylesheet” type=“text/css” href=“url.css” />
 Here, the rel attribute specifies the relationship (stylesheet)…
 Between the current (xhtml) document and another document.
 The type attribute indicates the type of style sheet.
 CSS is currently the best-supported style sheet language.
 We will only discuss CSS styles.
 As usual, the href attribute provides the URL of the resource…
 Here, the relative address of the style file…
 Points:
 You may link to several style sheets in the same xhtml
document.
 The later ones take precedence.
 You may offer alternative style sheets…
 And let visitors choose which one to apply.
 Offering Alternate Style Sheets
 Alternate Style Sheets may be provided at 3 levels:
 One set of persistent styles:
 Sheet always applied, regardless of the visitor’s choice (except for ‘no styles’).
 This is the base style sheet…
 Note: individual styles may be over-ridden by rules in sheets, below.
 Designate this sheet using the simple syntax on the last page.
 One set of preferred styles:
 Applied if the visitor makes no choice (i.e., a default, ‘first-choice’ sheet)
 This sheet is designated by adding the title attribute to the link element:

<link rel=“stylesheet” 　 title=“label” … />

 Here, the value, label is just a name given to the style sheet (your choice).
 One or more sheets containing sets of alternate styles of choice:
 That the visitor can select, by preference.
 Note: selection deactivates the default set…but not the persistent, base set.
 Designated by adding the title attribute to the link element:

<link rel=“alternate stylesheet” title=“label” … />

 Each of these sheets gets its own link.
Example: Alternative Style Sheets
Creating an Internal Style Sheet
 As we saw last time, a style sheet may also be internal:
 Embedded directly in the head of an html document.
 To create an internal style sheet, use the style element:

<style type=“text/css”>…style rules…</style>

 As usual, type specifies the type of styles to be employed.
 It is also common to hide the style rules from old browsers..
 By nesting them inside a comment (<!-- …style rules… --> ).
 This does not effect style application.
 But prevents older browsers from mistakenly displaying the rules as text.

 An internal style sheet has advantages and disadvantages:

 It effects only a single document.
 Thus, external style sheets seem better for global control:
 Central administration of many documents.
 Providing users with alternative sheets (not supported by internal sheets).
 While internal style sheets seem better for more local control:
 Overriding external sheets at the local level (if <link> precedes <style>).
Example: Internal Style Sheets
Importing External Style Sheets
 External style sheets may also be imported rather than linked…
 Can be used as an alternative to linking;
 However, the main use is to hide certain styles from old browsers.
 To import a style sheet use the @import command:
 This is placed within the style element, before any single style rules:

<style type=“text/css”>
@import “not_for_Netscape4.css”;
…style rules…
</style>
 Here, “not_for_Netscape4.css” is the filename of your sheet (your choice).
 This can also be written: @import url(“external.css”).
 Since Netscape4 doesn’t support @import, it hides the sheet…
 Note the absence of an = sign, and the presence of a semicolon ( ; ) .

 Notes:
 Style sheets imported later take precedence over earlier ones.
 Style sheets may also be imported to external style sheets.
Applying Styles Locally
 Styles may also be applied to individual XHTML tags:
 To target a single tag, just use the style attribute:

<tag style=“style_rule(s)” >…</tag>

 Note: styles can be applied to both normal tags (shown), and empty tags.
 Here, style_rule is the style to be applied (e.g., color:red)
 (the declaration part only);
 No selector needed, since you’ve placed it inside the target element.
 To apply multiple styles, just separate with semi-colons, as usual.

 Let’s look at an example…

Example: Styles and the Cascade
The Cascade
 We have seen many ways to apply styles.
 It is thus rather common to have conflicts between style rules.
 Multiple style rules applied to the same target…
 This is referred to as a rule cascade.
 Breaking ties is done via inheritance, specificity, and location.

 First, note that rules may display Inheritance:

 Many CSS properties affect both targeted elements, and descendants.
 So there are really lots of ‘ties’...
 For example, the color property is inherited.
 Any elements within a ‘blue’ <h1> element will also be blue.
 We’ll discuss which properties are inherited/not-inherited next lecture.

 Specificity is the most important characteristic for breaking ties:

 The more specific the selector, the ‘stronger’ the rule…
 Rules with the id attribute are the most specific (they are unique).
 Rules with the class attribute are next most specific.
 Simple, Element-targeting rules are intermediate (not very specific).
 Inherited rules are the least specific.
The Importance of Location
 Location breaks ‘ties’ between rules with equal specificity:
 The more local the rule, the higher the precedence.
 The meaning of locality can get a bit complex…

 Locally-applied rules have the highest precedence.

 These always win ties.

 The precedence of rules in internal vs. external sheets :

 Depends on the relationship between <link> and <style>.
 Whichever comes later in the <head> gets precedence.
 Most logical: <style> element placed after all <link> elements…
 To enforce internal > external precedence.
 The order of rules within the <style> determines their precedence.
 Rules applied later have higher precedence.
 Rules in imported sheets (via @import, which is first) take lowest precedence.

 We just discussed the precedence of rules in alternative linked sheets:

 User-selected Alt sheet (or default) > Base sheet
 Otherwise, later linked sheets take precedence.
Summary
 In this Lecture, we have discussed combining style
rules into sheets:
 Via external style sheets
 Which may be linked to, or imported.
 Via embedded (internal) style sheets,
 Placed in the head of the target xhtml file
 Via local application,
 Placed in the target tag.

 We discussed the implied rule cascade:

 Resolution of multiply-applied styles.

 In the next lecture we discuss Formatting with Styles:

 Setting Font properties:
 font-family, font-style, font-weight, font-size, etc.
 Setting Text properties:
 color, background, word-spacing, letter-spacing, etc
 Aligning Text
 etc