Cascading Stylesheets (CSS)
- HTML is primarily concerned with content, rather than style
- But tags have presentation properties, for which browsers have default values
- Cascading Stylesheets (CSS) have been developed to provide more fine-grained control over the presentation of HTML documents
- They allow you to associate fonts, color, backgrounds, etc. with specific tags
Specifying a Style
- A stylesheet is a a collection of style rules contained between <style> tags
<style type="text/css"> h1 { color: red; font-size: 24pt; } p { line-height: 1.5; } </style>
Style Rules
- Each style rule starts with one or more tag names, followed by a list of style properties that are associated with each of these tags
tag (or tags) { property-1: value-1; property-2: value-2; ... }- Each style property starts with the property name (eg color), followed, separated from the name by a colon, by the value for this property (eg red)
Why "Cascading" Stylesheets?
- The reason, we refer to these stylesheets as cascading stylesheets is that the styles cascade down through the hierarchy of elements in the document
- Thus eg a style defined for the <body> tag is also applied to <h1> and <li> tags, because they are contained in the body
- However, tags can override all or part of their inherited properties, and may add additional styles that are applied to its and its children
Ways of Defining Styles
- Stylesheets are usually placed in the head of a document
- Go to the page using-style to see the effect of the styleheet above
- Stylesheets can also be defined externally and linked to from within the head
- Assume that the stylesheet is defined in a file style.css
<link rel="stylesheet" href="style.css" type="text/css">- As a third way, you can also include the style of an individual tag inline
- Set property values within the style attribute of the tag
<p style="font-family: 'Times New Roman'; font-size: 24pt"> The yellow fox</p>The yellow fox
Style Classes
- Style classes can be used to associate different styles with different occurrences of the same tag (eg normal and narrow paragraphs)
- A style class is defined by attaching the class name to the tag's name when defining the tag's style in the stylesheet (for generic classes leave out the tag's name)
p.normal { font-family: "Arial"; } p.special { font-family: "Arial Narrow"; } .italic { font-style: italic; }- Within the document body you indicate the style class you want to use via the class attribute of the affected tag
<p class="normal"> A paragraph to be presented in normal style. </p> <p class="special"> A paragraph to be presented in special style. </p>
Font Properties
- There are among the most useful stylesheet properties
- Use the font-family property to specify a list of font names
- These are tryed by the browser in sequence until it finds a supported one
- A generic font can also be specified (eg Serif, Sansserif, and Monospace)
font-family: Arial, Helvetiva, Geneva- The font-size property sets the font size to the indicated size (must include the unit, usually pt)
font-size: 24pt- Use font-style and font-weight to specify whether a font should be italic or bold
font-style: italic font-weight: bold
Example of Using Font Properties
<html> <head> <style type="text/css"> p.big { font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small { font-size: 10pt; font-style: bold; font-family: Helvetica; } </style> </head> <body> <p class="big"> The big cow jumped over the moon. </p> <p class="small"> The small rabbit jumped over the fence. </p> </body> </html>
Margins
- Another typical use of stylesheets is to set the margin properties of a tag
- Margins place determine (to a large degree, anyhow) how much space is placed around an element
This is a picture of a Cesna 210. It is the flagship ... <img src="c210.jpg" style="float: right; margin-left: 0.5in; margin-bottom: 0.5in">This is a picture of a Cesna 210. It is the flagship single Cesna aircraft. This is a picture of a Cesna 210. See how the text flows around the image. This is a picture of a Cesna 210. It is the flagship single Cesna aircraft. This is a picture of a Cesna 210. See how the text flows around the image. This is a picture of a Cesna 210. It is the flagship single Cesna aircraft. This is a picture of a Cesna 210. See how the text flows around the image. This is a picture of a Cesna 210. It is the flagship single Cesna aircraft. This is a picture of a Cesna 210. See how the text flows around the image. This is a picture of a Cesna 210. It is the flagship single Cesna aircraft. This is a picture of a Cesna 210. See how the text flows around the image.
<span>
- Often it is useful to apply a style that is not inside a particular element (eg a word or phrase inside a paragraph)
- Use the <span> tag for this purpose
- Unlike other tags, it has no default layout associated with it
- Its only use is to change property values within an inline style sheet
<p>It is sure fun to be in <span style="font-size: 24pt; color: blue">total</span> control of text</p>It is sure fun to be in total control of text
<div>
- Similarly, one may want to set the properties of a whole section of the document, not just individual paragraphs
- This can be achieved with the <div> tag
<div style="border=solid; padding=1em; width=400"> As with the <span> tag, there is no implied layout for the content of the <div> tag. Its primary purpose is to specify presentation details to a section of the document. ... </div>![]()
- In case you were wondering: the < and > characters were produced via the "escape" sequences < and > (also known as entities in HTML and XML)