• Quiz #2
• Stylesheet management
• Simplifying CSS
• Advanced selectors
• Rule specificity

Linking your CSS

When linking to external style sheets, there are a number of things to know. A standard LINK element:

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

This features a number of things to keep in mind:

• Each stylesheet requires it's own link tag
• Multiple stylesheets can be loaded (main.css, fonts.css, layout.css, etc)
• The rel determines how the HTML will use the file linked to
• The type attribute is optional (dropped in HTML5), but including it increases browser backward compatibility
• href defines the path, relative or absolute, to the css file
• The title attribute allows the user to select different styles if required
• The media attribute allows you to specify what medium this should be viewed in

Media variations: media attribute

• media="type" can be a powerful tool
• Examples of supported types: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv
• Most are not commonly supported, but ones that you will see often: all, screen, print with handheld becoming more popular
• Almost all browsers use the print sheet to render text and elements for when the user selects a page to print
• This can be extremely valuable for when you have a lot of page information that you might not want to have show up on a printout (ie: navigation)
• Download and examine css media example files, test them after publishing online. Examine the code to see how they work.
• Several handheld devices (iPhones, tablets, most Andriods) do not identify themselves as media type 'handheld'
• The reasoning was that the devices were more than capable of displaying standard web sites, so they identify as 'screen'
• In session #5, we will apply media queries for responsive design, allowing us to customize the presentation based on the various portable devices

Alternate style sheets: rel attribute

You can also have alternate stylesheets supported

• rel="stylesheet" defines the default stylesheets to use
• rel="alternate stylesheet" allows different styles to be defined
• Tip: If you have multiple sheets that belong to one "look" make sure they all have the same title
• You can create alternate style sheets for users, allowing them to select which ones they would like to see
• An example would be to create a 'Larger Text' style sheet with everything in a larger font, or providing an option for users to choose an austere, simple page instead of a colorful/image heavy stylesheet
• Many browsers are now giving users the ability to select which sheet they would like to see. (Firefox: View > Page Style)

Alternate style sheets: title attribute

• A stylesheet is "persistent" if it is linked with rel="stylesheet" and has no title attribute. All persistent stylesheets are always used when rendering
• A stylesheet is "preferred" if it is linked with rel="stylesheet" and has a title attribute. these styles will be used as the default. preferred stylesheets with the same title are grouped together
• Finally, a stylesheet is "alternate" if it is linked with rel="alternate stylesheet" and has a title. These stylesheets are supposed to allow the user to choose stylesheets, they are grouped together by title and show up in the browser's stylesheet selector if it has one (View > Page Style in Firefox). Each group (by title) is mutually exclusive.

• Download the alternate stylesheet starting files
• Make a copy of one of the current stylesheets, rename it, and change some of the styles
• Add this new stylesheet as an "alternate stylesheet" to the HTML page
• Show your instructor when complete
• Download a sample solution

The @import directive can be used embedded or externally to easily manage the loading of stylesheets

Embedded Example:

Embedding the @import works well when dealing with older browsers, as they don't read the command. Simply reference a stylesheet that imports another sheet, so you protect yourself from older browsers. Should also be used in conjunction with an older-style page (lo-fi) for older browsers.

In your document, use the following within the <head> tag:

<link rel="stylesheet" type="text/css" href="/css/basic_styles.css" media="all" />

<style type="text/css" media="all">
          @import url("/css/rich_styles.css");
          </style>

This allows you to include basic styles in basic_styles.css (for older, or CSS-less-supported browsers) and have current styles for modern browsers in rich_styles.css.

External Example:

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:

• @import url("/css/type.css");
• @import url("/css/nav.css");
• @import url("/css/template.css");

NOTE: when using the @import directive in an external CSS file, ensure it is the first lines of code in the .css file. It is also best to not include other CSS rules in a page that uses @import