SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
This slide deck explores a range of different methods that you can use to apply CSS to web documents.
Inline styles are applied to elements directly in the HTML markup using the style attribute.
<html>
<head>
<title>Document title</title>
</head>
<body>
<h2 style="color: red;">
Heading here
</h2>
<body>
</html>
Inline styles should be avoided as they are inefficient.
For example, if you wanted to style every p element in a document, you would need to use multiple inline styles.
<-- Inline styles -->
<p style="color: black;">...</p>
<p style="color: black;">...</p>
<p style="color: black;">...</p>
<p style="color: black;">...</p>
If you wanted to change the text color in this example, you would need to change it in multiple places.
Open this HTML file in an editor:
exercises-start/exercise-204-01.html
Write an inline CSS style to set the first <p> element with a color value of orange.
<p style="color: orange;"> ... </p>
Check your work against the finished HTML file:
exercises-finished/exercise-204-01.html
Header styles are written inside the <head> element of HTML documents.
CSS rules are added inside the <style> element.
<html>
<head>
<title>Document title</title>
<style>
h2 { color: blue; }
</style>
</head>
<body>
<body>
</html>
Like inline styles, header styles should be avoided on any real website as they are inefficient and hard to maintain.
However, header styles can be useful when building simple tests or exercises, like the ones you are using in this course.
Open this HTML file in an editor:
exercises-start/exercise-204-02.html
Write a header CSS style to set the <h1> element with a color value of crimson.
The CSS rule needs to be added inside the <style> element.
<style>
h1 {
color: crimson;
}
</style>
Check your work against the finished HTML file:
exercises-finished/exercise-204-02.html
External style sheets are separate CSS documents that can be “linked to” from HTML documents using the <link> element.
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<body>
</html>
Authors can link to more than one CSS document from the HTML document.
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">
</head>
<body>
<body>
</html>
External style sheets are far more efficient and effective than inline or header styles as you can use a single CSS file for multiple HTML documents.
The rel attribute is required within the <link> element.
It is used to define the relationship from the current HTML document to the linked file.
In this case rel="stylesheet" informs the browser that the file being linked to is a stylesheet.
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<body>
</html>
The href attribute is also required within the <link> element.
It is used to define the location of the linked document.
<html>
<head>
<title>Document title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<body>
</html>
URL paths can be relative or absolute.
<!-- Relative paths -->
<link href="a.css" rel="stylesheet">
<link href="../a.css" rel="stylesheet">
<link href="/a.css" rel="stylesheet">
<!-- Absolute path -->
<link
href="http://site.com/a.css"
rel="stylesheet"
>
Open this HTML file in an editor:
exercises-start/exercise-204-03.html
Write a <link> element with two attributes: rel="stylesheet" and href="exercise-204-03.css".
<!-- Add a link -->
<link
rel="stylesheet"
href="exercise-204-03.css">
Open the following CSS file in an editor:
exercises-start/exercise-204-03.css
Write a rule to style the <h1> with color: magenta and the <p> with color: brown.
/* Add styles here */
h1 {
color: magenta;
}
p {
color: brown;
}
Check your work against the finished HTML file:
exercises-finished/exercise-204-03.html
And also check your work against the finished CSS file:
exercises-finished/exercise-204-03.css
You can define which media will receive your CSS files using Media types.
In CSS2.1, there are ten different media types.
<!-- For all devices -->
<link
href="a.css"
media="all"
rel="stylesheet"
>
<!-- For printers -->
<link
href="a.css"
media="print"
rel="stylesheet"
>
<!-- For speech synthesizers -->
<link
href="a.css"
media="aural"
rel="stylesheet"
>
<!-- For Braille devices -->
<link
href="a.css"
media="braille"
rel="stylesheet"
>
<!-- For Braille printers -->
<link
href="a.css"
media="embossed"
rel="stylesheet"
>
<!-- For handheld devices -->
<link
href="a.css"
media="handheld"
rel="stylesheet"
>
<!-- For projectors -->
<link
href="a.css"
media="projection"
rel="stylesheet"
>
<!-- For computer screens -->
<link
href="a.css"
media="screen"
rel="stylesheet"
>
<!-- For teletypes and terminals -->
<link
href="a.css"
media="tty"
rel="stylesheet"
>
<!-- For television type devices -->
<link
href="a.css"
media="tv"
rel="stylesheet"
>
Unfortunately, many of these media types are not well supported. The only safe options are all, print and screen.
If no media type is defined, the media type is assumed to be all - so the CSS file will be available to all types of devices.
<!-- No media type present,
defaults to "all" -->
<link
href="a.css"
rel="stylesheet"
>
Open this HTML file in an editor:
exercises-start/exercise-204-04.html
Add a media attribute with a value of screen to the <link> element pointing to exercise-204-04-web.css.
<link
rel="stylesheet"
media="screen"
href="exercise-204-04-web.css"
>
Add a second media attribute with a value of all to the <link> element pointing to exercise-204-04-all.css.
<link
rel="stylesheet"
media="all"
href="exercise-204-04-all.css"
>
Add a third media attribute with a value of print to the <link> element pointing to exercise-204-04-print.css.
<link
rel="stylesheet"
media="print"
href="exercise-204-04-print.css"
>
If you look in a browser, the <h1> element should be styled red. This style comes from the CSS file with a media type of screen.
Also in a browser, the <p> element should be styled green. This style comes from the CSS file with a media type of all.
If you print the document, the <h1> and <p> elements should be styled black and be displayed in a serif font.
This style comes from the CSS file with a media type of print.
Check your work against the finished HTML file:
exercises-finished/exercise-204-04.html
Site Twitter Github Slideshare Linkedin