ITSE 1411 Beginning Web
Cascading Style Sheets Basics Chapter 4
Discussion
- Cascading Style Sheets (CSS) Basics
- CSS is used to configure text, color, and page layout. The importance of CSS has developed
as the web has developed.
- Defines the presentation of the page (the way things appear on the page).
- You create style rules to define the page styles.
- Enables the separation of the document presentation from the document content.
- Warning: Different browsers do not support CSS the same.
- Advantages of Cascading Style Sheets
- Typography and page layout can be better controlled.
- Style is separate from structure.
- Styles can be stored.
- Documents are potentially smaller.
- Site maintenance is easier.
- Methods of Configuring Cascading Style Sheets
- Inline styles - coded as an attribute of an HTML tag and apply only to that specific tag.
- Embedded styles - defined in the head section of a page and apply to the entire document.
- External styles - coded in a separate file, associated to the page by linking in the head
section.
- Imported styles - similar to external styles, coded in a separate file, can be imported into
embedded styles or into another external style sheet.
- The rules of precedence that apply to style sheets are:
- Browser Defaults
- External Styles
- Embedded Styles
- Inline Styles
- HTML Attributes
- CSS Selectors and Declarations
- Style Rule Basics
- Each style rule has two parts:
- CSS Style Rule Selector - the selector can be an HTML element name, a class name,
or an id name.
- Css Style Rule Declaration - the declaration indicates the CSS property you are
setting and the value you are assigning to the property.
- The background-color Property example:
body { background-color: yellow}
- The color Property example:
body { color: blue }
- Combined properties use a semicolon to divide the properties example:
body { color: blue; background-color: yellow; }
- CSS Syntax for Color Values
- Color values can be found at Textbook Companion Color Site
- When writing multiple styles, spaces are optional, but help the developer read the code. Each style ends with a semi-colon.
(The ending style semi-colon is optional but useful when adding additional styles later.)
- Colors can be configured using:
- color name (limited use) -- ex: p { color: red; }
- hexadecimal color value -- ex: p { color: #FF000 }
- hexadecimal shorthand color value -- ex: p { color: #F00 }
- decimal color value (RGB triplet) -- ex: p { color: rgb(255,0,0) }
- HSL (Hue, Saturation, and Lightness) color value, which is new to CSS3. See
W3C HSL site -- ex: p { color: hsl(p, 100%, 50%) }
- HSLA (Hue, Saturation, Lightness, and Alpha) The alpha configures transparency.
- Inline styles
- Coded into each HTML element each time you want to override the default,
embedded, or external style.
- Can override an embedded or external style rule.
- Written inside an element tag much like an element attribute.
- Affects only the element that contains the CSS code. For example
- <p style="font-size: x-large; color: #ff9900">
- This sets the font-size to x-large. The relationship between sizes is not precisely
defined in CSS, but there is a suggested scaling factor of about 1.2. The default size is
medium, which is approximately 12 pt.
- Also, the color is set to the hex value #ff9900. (see color names that validate below)
- Embedded styles
- Written in the head section of the page inside an HTML style tag.
- Can override an external style rule.
- Written for each element type, not each individual element.
- In XHTML embedded Styles are written in the head between style tags. Syntax:
- <style type="text/css">
(your css code)
</style>
- The format for the css code is the same as the format for external styles. See below.
- In HTML5 embedded Styles are written without the type="text/css" attribute.
- External styles
- Linked from the head section of a page, but written as an external file.
- Applies to all pages that link to the page.
- Syntax for external style
- selector {property:value}
Example will change the text of your page to blue:
body {color: blue;}
- Do not start your external CSS page with the HTML page template. Only CSS is written on
an external style page.
- Syntax for linking to external style
- <link href="address of css page" rel="stylesheet" type="text/css" />
- The link in the head page of the HTML page will link to the CSS page.
- The link tag is self-closing.
- Do not put the link tag inside of style tags. External styles do not use
the style tag.
- All style types can be applied to the same page. This means that you can have
an external style sheet, an internal (embedded) style sheet, and inline styles
all on the same page.
- Separate multiple styles for the same element with a semicolon.
- CSS Class, Id, and Contextual Selectors
- The Class Selector:
- Used to apply a CSS declaration to a set of elements and not a particular element.
- Use the dot (.) in front of the class name in the style sheet. For example the style:
.feature { color: #FF00000; }
would set to red any element with the class attribute set to feature. For example:
<li class="feature">Usability Studies</li>
- The Id Selector:
- Used to apply a CSS declaration to a unique single area.
- Use the pound (#) in front of the id name in the style sheet. For example the style:
#footer { color: #333333; }
would set to dark gray the element with the id attribute set to footer. For example:
<div id="footer">This paragraph will be displayed using styles
configured in the footer id.</div>
- The Contextual Selector:
- Used when you want to specify an element with the context of its container (parent) element.
- Use the list container (an element selector, class, or id) followed by the specific selector you
are styling. For example:
#footer a { color: #00ff00; }
will apply the color green to anchor tags located within the footer id.
- The Span Element discussed in Competency 1 discussion notes.