Style
We have already discussed the separation of form and content; and identified the difference between descriptive and procedural markup, observing that descriptive markup is preferable for several reasons, including:
- ease of maintenance - because information and its formatting are described separately
- smaller overall file sizes, and
- increased semantic encoding, leading eventually to
- more content that can be processed on our behalf by machines.
Here we start to work with Cascading Style Sheets CSS by building a simple HTML5 page and adding style rules to it.
Task 0: Preparation
- Create a folder for this week's work: call it
style. Any files you create should be placed here.
- Create a file called
example.html that contains the following content:
<!DOCTYPE html>
<meta charset=UTF-8>
<title>Hello CSS World</title>
<article>
<section>
<h1 id=one class=special>First Steps</h1>
<p id=two class=first>This is my Hello World paragraph. Hurrah!</p>
<p id=three class=special>This is my second Hello World paragraph.</p>
</section>
</article>
- Load the file to check the default rendering.
- If any of this was new, record it in your discovery log.
Task 1: An Embedded Stylesheet
There are two ways to use a stylesheet with an html file. Stylesheets can be:
- embedded within web pages using the
<style> tag, or
- linked to web pages using the
<link> tag.
In this first example we will use an embedded stylesheet.
- Make a copy of
example.html and call it embedded.html
- Open
embedded.html for editing.
- Add the following text immediately below the
<title> element:
<style>
section {
color: red;
}
p {
font-family: sans-serif;
font-size: 130%;
}
</style>
- Save the file.
- Predict how it should look, and then load it in your browser to check.
- If any of this was new, record it in your discovery log.
NB: The stylesheet only needs to be placed in a style element when it is embedded. When it is written in a separate file and linked (as in the next task) it should not be surrounded with <style></style> tags.
Task 2: A Linked Stylesheet
- Create a file called
mystyle.css.
- Add the following text to the new file:
section {
color: green;
}
p {
font-family: sans-serif;
font-size: 130%;
}
- Remember this is not an embedded stylesheet so we do not include the HTML
<style> tags in this file.
- Copy
example.html as linked.html.
- Open
linked.html and link the stylesheet by adding the following immediately below the <title> element:
<link rel="stylesheet" title="My Style" href="mystyle.css">
- Save the file.
- Predict how it should look, and then load it in your browser to check.
- If any of this was new, record it in your discovery log.
Consider and record in your discovery log: What are the benefits and drawbacks of each type of stylesheet?
Task 3: Class & ID Selectors
Using the elements and properties described below, extend the content of linked.html and mystyle.css to restyle the page.
- Try class selectors — for example…
In mystyle.css add:
.discounted_bargain {
color: red;
}
.damaged_stock {
background: yellow;
}
…and in linked.html add:
<p class="damaged_stock discounted_bargain">
Child's Tricycle
</p>
- Try id selectors — for example…
In mystyle.css add:
#special_section {
background: yellow;
}
…and in linked.html add:
<p id="special_section" >Child's Tricycle</p>
Again, if any of this was new, record it in your discovery log.
Task 4: Read, Discover, Experiment, Learn
As you have seen in the lecture, CSS is very powerful. You should know enough now to use online tutorials to help you gain a greater knowledge.
- Inspect, investigate, download and experiment with this Page Template Example.
- Work through Mozilla’s What is CSS tutorial.
- Record what you're learning in your discovery log.
