Embedded Files
Lesson 10 - Styling Text with CSS
Lesson 10 - Styling Text with CSS
TIP: Here is the w3schools series of lessons on CSS selectors:
TIP: Here is the w3schools series of lessons on CSS selectors:
NOTE:
NOTE:
The terms Declaration and Rule are used to describe the same thing.
A Rule-set consists of the selector and the rules.
A Rule consists of a property name and a value separated by a colon ( : ).
CSS Rules used in Lesson 10
CSS Rules used in Lesson 10
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-decoration: underline overline;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
font-size: 15px;
font-size: large;
font-size: 150%;
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif;
font-family: cursive;
color: red;
color: #00ff00;
color: rgb(0,0,255);
Linking a style.css style sheet file to the index.html file (put it in the <head> element).
<head>
<link rel="stylesheet" href="style.css">
</head>
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
<style>
.center { text-align: center; color: red; }
</style>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
In this example only <p> elements with class="center" will be center-aligned:
<style>
p.center { text-align: center; color: red; }
</style>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
HTML elements can also refer to more than one class.
<style>
p.center { text-align: center; color: red; }
p.large { font-size: 300%; }
</style>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
The universal selector (*) selects all HTML elements on the page.
<style>
* { text-align: center; color: blue; }
</style>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
The grouping selector selects all the HTML elements with the same style definitions.
<style>
h1, h2, p { text-align: center; color: red; }
</style>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
The #id selector styles the element with the specified id.
<style>
#firstname { background-color: yellow; }
</style>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
The .class selector selects elements with a specific class attribute.
<style>
.intro { background-color: yellow; }
</style>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
More examples
More examples
A class selector looks just like an element selector, but instead of using names that are tied to the names of HTML elements, you make up the name and then you prefix it with a dot (.)
<style>
.red { color: Red; }
.beautiful {
font-weight: bold;
color: Blue;
font-style: italic;
}
</style>
<p class="red">
Here's some text - <span class="beautiful">this part is especially pretty!</span>
</p>
<p>This text is very normal!</p>
in some situations, you may want to limit the use to a specific element type. This is usually done to indicate how the class is supposed to be used, to allow for more than one class with the same name and avoid conflicts. Element specific classes are used simply by appending the class name to the element name in your selector.
<style>
span.beautiful {
font-weight: bold;
color: Blue;
font-style: italic;
}
</style>
<p>
Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>
Classes are not unique and the class property of an HTML tag allows you to specify more than one class. The cool thing about this is that it allows you to combine the rules for several selectors and use them for the same tag however you want to.
This also means that instead of writing selectors with many rules and then only targeting few elements, you can write less specific selectors and simply combine them when it is appropriate. This allows for greater re-usability, which is really what CSS is all about.
<style>
.status {
padding: 5px;
margin: 5px;
border-width: 1px;
border-style: solid;
}
.error {
color: Red;
border-color: Maroon;
}
.information {
color: Blue;
border-color: Navy;
}
</style>
<div class="status error">
This is an error!
</div>
<div class="status information">
This is information!
</div>
Report abuse