Agenda

Referencing CSS

When linking to external style sheets, there are a number of features to be aware of:

<link	rel="stylesheet" 
	href="http://www.mysite.com/css/styles.css" 
	type="text/css" 
	title="Main Style" 
	media="screen" />

Media variations: media attribute

Alternate style sheets: rel attribute

You can also have alternate stylesheets supported

Alternate style sheets: title attribute

Persistent Styles

Persistent styles apply in all cases, even when alternate styles are chosen.

<!-- rel="stylesheet" with NO title="" -->
<link	rel="stylesheet" 
	href="css/persistent_styles.css" />

Preferred Styles

Preferred styles will be the default, but will be replaced if alternate styles are chosen.

<!-- rel="stylesheet" AND a title="" -->
<link	rel="stylesheet" 
	href="css/default_styles.css"
	title="Standard Styling"	/>

Alternate Styles

Alternate styles will not be applied by default, but may be chosen by the user agent. Each alternate stylesheet must have a title="".

<!-- use rel="alternate stylesheet" for alternative stylesheets... -->
<link	rel="alternate stylesheet" 
	href="css/large_text.css"
	title="Large Text Styles" />

Grouping Stylesheets

If more than one link tag shares the same title="" then they will be grouped together.

<-- group stylesheets with shared title="" -->
<link	rel="alternate stylesheet" 
	href="css/monchrome_layout.css"
	title="Monochrome Styles"	/>
<link	rel="alternate stylesheet" 
	href="css/monchrome_fonts.css"
	title="Monochrome Styles" 	/>

To enable alternate stylesheet switching, you can either apply some javascript to manage the switch with hyperlinks, or use Firefox for alternate stylesheets.

@charset: Assigning CSS Character Set

If your CSS files only contain standard keyboard characters, assigning the character set is not required. The CSS language itself does not use any exotic characters, so assigning a charset is often omitted. If, however, your CSS needs to use special characters, ensuring the correct character set can be very important. Eg: When using a pseudoclass to add content to HTML content: "Äwesome!"

If needed, add the @charset rule to the top of the CSS document.

/* assign charset at top of .css file */
@charset "utf-8";

/* CSS rules follow... */

@import: Managing Multiple CSS Files

You can use the @import method to import multiple stylesheets from a basic stylesheet that you link to. This will reduce the clutter that can sometimes occur within the <head> section.

It is also a great place to be able to manage your CSS. From your main document, create a <link> to your styles.css page.

In the body of the styles.css file, import as many files as you need:

NOTE: when using the @import directive in an external CSS file, ensure it comes before your CSS selector rules. It might be best to not include any CSS rules in a page that uses @import.

@font-face And Font Servers

Fonts that aren't available on the client machine can be provided by a third-party font server or by your website's server.

Third Party Font Server

Browse the font server site, select the fonts you like and they wil provide you with code for a <link /> tag to add to your HTML. You can then use the font in your CSS.

<!-- add the link tag to the HTML -->
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet" />	

/* use the font in the CSS */
selector{
	font-family: 'Bungee', cursive;
}

No longer stuck with 'Arial', 'Helvetica', 'Georgia' and the rest.

Serve Fonts From Your Website

If the font(s) are copyright free, or if you have license to distribute a font, you can serve them yourself using the CSS @font-face directive.

Different client systems will need fonts in varying formats, so if you are distributing the font yourself, be sure to have the font available in most common formats.

/* load the font in CSS */
@font-face {
    font-family: 'alex_brushregular';
    src: url('/fonts/alexbrush-regular-webfont.woff2') format('woff2'),
         url('/fonts/alexbrush-regular-webfont.woff') format('woff'), 
	 url('/fonts/alexbrush-regular-webfont.ttf') format('tff');
}

/* use the font in CSS */
selector{	
	font: bold 20px alex_brushregular ;
	color:#555;
}

Don't get carried away with wild font choices. Some fonts have very poor readability, reducing accessibility.

NOTE: Include @font-face before rules that use the font.

CSS Measurements

In CSS, there are a number of measurement values that can be used in declarations.

Size measurements

Color Measurement

Colors can be specified in a number of ways, corresponding to the system that your organization or visual element requires. Almost all color systems use a method for expressing a combination of the three color spaces used for displaying colors on computer monitors: Red Green and Blue.

Compact CSS Code

When building your CSS rules, there are some easy ways to compact your code, reducing code bloat and filesize.

Grouping selectors

Grouping comes to Classes

Rule Compacting

There are a lot of rules that will accept a compacted ruleset:

Box model properties support 1, 2, 3 and 4 values. For example:

Note you do not need to specify values for all fields in a compact rule. Just keep the space delimited list in the correct order. For example, you could specify several font values all at once:
font: italic small-caps bold 1.3em "helvetica", sans-serif;
or, specify only a select couple.
font: 1.3em "helvetica", sans-serif;

CSS Selectors

There are several advanced CSS selector techniques that provide plenty of options for the application of style.

Universal Selector

Pseudo-classes

A Pseudo-class is a selector that allows you to reference a specific action or attribute of an element. This is most often used when specifying a attributes, such as :visited and :link.

There are other uses for pseudo elements, that will allow for greater detail in styling content, such as :first-letter and :first-line. These allow the browser to apply a style based on an unselected, but displayed element.

Best part: No span or div required to access these pseudo-elements.

Descendant Selectors

Child Selectors

Adjacent Sibling Selectors

General Sibling Selectors

Attribute Selectors

Rule Order & Specificity

When a style declaration is found to be in conflict with a previously declared style, there is a method for determining which one will win out. The process is built into every web browser, and almost all of them calculate the values identically (for once!).

Here is how the W3C defines the process by which style order is determined:

All of the rules are pretty straightforward, except for Specificity, which bears some explanation.

Specificity is a method for determining what rules are applied when a conflict between two selectors occurs. Through a method of adding values when certain elements and selectors are present, a specificity number can be applied to any CSS rule. The one with highest specificity wins and the associated rule is applied to the element(s) in question.

Ruleset for Specificity

Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

  1. Count the number of IDs in the selector.
  2. Count the number of CLASS, pseudoclass, and attribute selectors.
  3. Count the number of HTML tag names in the selector.

Next, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

!important rule

To Do

The session 4 quiz will be open book, practical.