Formatting with CSS Styles
Lecture notes for IST 286: Web and Digital Media Development
Richard H. Hall, Professor, Information Science and Technology
Missouri University of Science and Technology
- External Style Sheets
- Create CSS styles in one file and link this file to one or more html pages, rather than defining the styles in the html file itself
- CSS files generally have the extension .css
- Place the following link tag within the <head> statement
of the .html document that will use the styles
- <link rel="stylesheet.css" type="text/css">
- Place the following link tag within the <head> statement
of the .html document that will use the styles
- When you update the style sheet is will change the styles in all the .html pages linked to it
- You can link to multiple style sheets, and mix linked style sheets, internal style sheets, and inline styles in the same .html document. (The .html file you are presently viewing is linked to a style sheet and has a small internal style sheet).
- example
- Alternate Style Sheet
- Simply by adding the attribute title with some value to the link tag
for a style sheet you can specify alternative style sheets. The user
can select a given style sheet.
- A "persistant" style sheet that will show no matter what the user selects can be used by leaving off the title attribute.
- The "default/preferred" style sheet includeds a title attribute and rel="stylesheet".
- The alternative style sheet includes a title attribute and rel="alternative stylesheet"
- Unfortunately, the user selected style sheet won't work in IE 6.
- example
- Simply by adding the attribute title with some value to the link tag
for a style sheet you can specify alternative style sheets. The user
can select a given style sheet.
- Internal Style Sheet
- An internal style sheet is used to define CSS styles within an html document, inside the <head section>
- Most of the examples used in the creating styles, formatting with styles (this page), and layout with styles pages use an internal style sheet to facilitate viewing of the styles and xhtml in the same document.
- If you are using the same styles with multiple pages it is generally better to use external style sheets.
- Inline styles
- You can apply a style within a specific html tag by using the style attribute with css styles rules as the attribute.
- This is the least preferred method, in general, since it does not apply to multiple pages, or even multiple tags, however, it can be used for very specific changes (and will also allow for xhtml validation)
- example
- Rules for determining preference, when styles rules conflict
- Inline styles > internal style sheet styles & external style sheet styles
- the most recent rule within the internal style sheet or external style sheet has precedence
- Comments
- For comments use /* Comment goes in here */
- Comments may include returns and span several lines
- Comments don't have to start on their own line
- For comments use /* Comment goes in here */
- Font-family
- Set a series of fonts, in case a given font is not installed on a user's system
- Can end with a generic font (serif or sans-serif)
- example
- Font-style
- Can use font-style for italics
- example
- Font-weight
- Can use font-weight for bold
- example
- Font-size
- Can use font-size to set font
- Can set font as absolute (e.g., 24px) or relative (1.5em or 150%)
- example
- Line-height
- Use line height to set the space between lines
- Can set line-height at absolute or relative
- example
- Color
- Use color to set font color
- example
- Background color
- Use background color to set color for an element
- If you use it for inline elements, such as <a> or <span> will cover a small defined area
- If you use it with block-level elements such as <div> or <p> will cover a block across the page
- example
- Use background color to set color for an element
- Text-indent
- Use text-indent to indent the first line of a paragraph
- Can use absolute values or percentage, and can use negative values for a "hanging indent"
- example
- Text-align
- Can use text-align for left, right, center, or justify alignment
- example