Course Topics by Week | |
---|---|
1. Intro to HTML 5 | 6. Page Layout with CSS |
2. More HTML 5 | 7. HTML Tables |
3. Developing a Web Site | 8. HTML Forms |
4. Styling with CSS | 9. Multimedia |
5. Midterm Quiz | 10. Review and Term Project |
11. Final Quiz |
IntroductionBasic CSSStyle RulesStyle-sheetsPrecedence: The CascadeMore SelectorsContextual SelectorsAttribute Selectorsid SelectorClass SelectorSemantic structural Elements as CSS SelectorsSemantic Structural ElementsNon-semantic Structural ElementsExamplesReferences
Cascading Style Sheets (CSS) refers to both a type of file, .css, and a computer language used to describe the formatting and style of a web page written in HTML.
CSS is designed to facilitate the separation of presentation and content, including layout, colors, and fonts. This separation can:
The name cascading comes from the hierarchy of priorities that determine which style rule applies when there is more than one style rule that is applicable to a particular HTML element.
Example of a style rule:
body {
background-color: lightcyan;
font-family: Arial;
}
Anatomy of a CSS rule:
Selector: body Special selector: * is a "wild card" and will select any element
Braces: { }
Property: background-color: lightcyan;
Comments
xxxxxxxxxx
/* This is a CSS comment */
Inheritance
Any element that is nested inside an element to which a style rule has been applied will inherit that rule. For example, given the body
rule above, any element inside the body will also have a light-cyan
background and the Aria
l font face.
A Style-sheet is just a set of one or more CSS rules and it doesn't have to be in a file.
Types of style-sheets
Web site style-sheets:
External: in a separate file named with a name ending in .css In an HTML file, use the link element to apply a css file. Example:
xxxxxxxxxx
<head>
<!-- The usual other code would go here -->
<link href="HomeStyles.css" rel="stylesheet" />
</head>
Embedded: in a style element in an html file Example:
x<head>
<!-- The usual code would go here -->
<style>
p {
background-color: papayawhip;
color: darkblue;
}
strong {
font-size: larger;
}
</style>
</head>
Inline: in a style attribute inside an HTML tag Example:
xxxxxxxxxx
<p style="background-color:lightblue">Some text</p>
Browser styles-sheets
When you have style rules in multiple places with the same selector and conflicting properties, then the style rule that has the highest precedence overrides the others meaning it wins.
This is the order of precedence from highest to lowest. (#1 is highest)
HTML element's inline styles.
HTML page's embedded style rules.
HTML pages's external style-sheet.
There can be multiple external style sheets linked to one page. The last one has the highest precedence.
Browser's user-defined styles.
Browser's internal style-sheet.
Combinator | Example | Description |
---|---|---|
comma | nav, p, ol | Matches any of the three elements |
space | nav ol | Matches any ol that is anywhere inside a nav . |
greater-than | nav>ol | Matches an ol that is directly inside an nav . |
plus | ul+ol | Matches an ol that immediately follows a sibling ul . |
dash | ul-ol | Matches any ol that is a sibling of an ul . |
W3 Schools tutorial: CSS Combinators
A particular id
attribute can be used only once on a web page to identify an element. It has multiple uses in HTML.
href
address selects an id
a link inside a web page.xxxxxxxxxx
#intro {
background-color: powderblue;
}
Example of a target HTML element:
xxxxxxxxxx
<p id="intro">This is an introductory parapgrah...</p>
A particular class attribute can be used multiple times on a web page and is only used for applying a CSS rule.
dot selects a class.
Example of a CSS class rule:
xxxxxxxxxx
.greenBold {
font-weight: bold;
color: green;
}
Example of a target HTML element:
xxxxxxxxxx
<span class="greenbold">This is important!</span>
More attribute selectors
Selector type | Example CSS Rule Selector | Example target HTML Attribute |
---|---|---|
element.class | ol.ingredients | <ol class="ingredients"> |
element[attribute] | ol[type] | <ol type="A"> |
element[attribute="value"] | ol[type="A"] | <ol type="A"> |
And there are more! |
These can be used as CSS rule selectors to provide a way to format a section of the page. For example:
xxxxxxxxxx
section {
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
article {
font-size: large;
color: blue;
}
<article>
<aside>
<details>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
W3Schools tutorial on semantic elements
The <div>
element was a structural element used before HTML5 introduced semantic structural elements. It is considered non-semantic, because div is just an abbreviation for "division", it's name doesn't have any meaning related to the type of division it represents.
Example:
xxxxxxxxxx
<div style="font-family:serif">
<h2>The City of Chennai</h2>
<p>Chennai is the largest city in the state of Tamil Nadu. It is located on the Bay of Bengal on the south-east coast of India.</p>
</div>
The <span>
element is used to apply CSS formatting to an arbitrary area in a row of in-line elements.
For example:
xxxxxxxxxx
The Madras <span style="font-style:oblique">Crocodile Bank Trust and Centre for Herpetology</span> (MCBT) is a reptile zoo and herpetology research station, located 40 kilometres (25 mi) south of the city of Chennai.
Web Authoring Lecture Notes by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.