PROWAREtech
Cascading Style Sheets: Tutorial - Page 02
Formatting with Classes
Giving a specific element a different formatting can be done inline with the style attribute, but it is cleaner (and
recommended) to do so using a style sheet class. To do this, assign the element a name with the class attribute:
<h3 class="title">CSS3 Programming</h3>
Selectors
A selector defines the elements to which a set of CSS rules apply. For example:
<!DOCTYPE html>
<html>
<head><title>Type Selector</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<div>
<h1>This Heading is Green</h1>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head><title>ID Selector</title>
<style>
#main {
color: green;
}
</style>
</head>
<body>
<div>
<h1 id="main">This Heading is Green</h1>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head><title>Class Selector</title>
<style>
.main {
color: green;
}
</style>
</head>
<body>
<div>
<h1 class="main">This Heading is Green</h1>
</div>
</body>
</html>Pseudo-Classes
Pseudo-classes take more information into account. Information that might not be in the HTML markup
or may be based on user actions. Pseudo-classes always start with a semi-colon. The :link pseudo-class formats
any link pointing to a new, never-visited document. The :visited pseudo-class pertains to any link that points an
already-visited document. The :hover pseudo-class applies when a user moves his mouse over the link. The
:active pseudo-class applies when as a reader clicks it. For example:
<!DOCTYPE html>
<html>
<head><title>Pseudo-Classes</title>
<style>
a:link {
color: blue;
}
a:hover {
color: lightblue;
}
a:visited {
color: navy;
}
a:active {
color: red;
}
.hotLink:visited {
color: gray;
}
</style>
</head>
<body>
<p>
This is a <a class=hotLink href="http://www.google.com/">link to Google</a>
and another <a href="http://www.bing.com/">link to Bing</a>
</p>
</body>
</html>Pseudo-Elements
Add content either before or after an HTML element using the ::before and ::after pseudo-elements, respectively. A content property is required.
<!DOCTYPE html>
<html>
<head><title>Pseudo-Elements</title>
<style>
span::before {
content: "hello world"; /* required */
background-color: limegreen;
color: white;
}
a::after {
content: " (" attr(href) ") "; /* required */
background-color: red;
color: white;
}
</style>
</head>
<body>
<p>
<span>this is a span</span>
</p>
<p>
This is a <a href="http://www.google.com/">link to Google</a>
and another <a href="http://www.bing.com/">link to Bing</a>
</p>
</body>
</html>Combinators
Affect the children and siblings of elements.
Here, the space character is used to select all the SPAN elements under the UL element and sets their color to red. It is very powerful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
ul span { /* a single space is used to select all the SPAN elements inside the UL element */
color: red;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.
<ul>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.
<ul>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</li>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</li>
</ul>
</li>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</li>
</ul>
</li>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.
<ul>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</li>
<li>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</li>
</ul>
</li>
</ul>
</body>
</html>Here, a > sign is used to select all the children p of the div and make them red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
div>p { /* select all the children p elements */
color: red;
}
</style>
</head>
<body>
<div>
<span>span element</span>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
</div>
</body>
</html>Here, a + sign is used to select the adjacent sibling which is a p and make it red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
span+p { /* select the adjacent p sibling */
color: red;
}
</style>
</head>
<body>
<div>
<span>span element</span>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Here, a ~ (tilde) is used to select all the sibling p elements and make them red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
span~p { /* select all the sibling p elements */
color: red;
}
</style>
</head>
<body>
<div>
<span>span element</span>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
</div>
</body>
</html>Here, a ~ (tilde) is combined with a pseudo class to select the last sibling p element and make it red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
span~p:last-of-type { /* select the last sibling p element */
color: red;
}
</style>
</head>
<body>
<div>
<span>span element</span>
<p>Lorem ipsum dolor sit amet.</p>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
</div>
</body>
</html>This works the same as the previous example but approaches it from a child standpoint instead of by sibling.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combinators</title>
<style>
div>p:last-of-type { /* select the last child p element */
color: red;
}
</style>
</head>
<body>
<div>
<span>span element</span>
<p>Lorem ipsum dolor sit amet.</p>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p><!-- RED -->
</div>
</body>
</html>Attribute Selectors
Atribute selectors allow the formatting of a certain type of element that also has a specific value set on of its attributes. For example:
<!DOCTYPE html>
<html>
<head><title>Attribute Selectors</title>
<style>
input[type="text"] {
color: silver;
}
input[type="text"]:focus {
color: black;
}
label[for="lastName"] {
color: red;
}
a[href^="http://"] { /* this selects all links that begin with "http://" */
color: red;
}
a[href$=".doc"], a[href$=".DOC"] { /* this selects all links that end with ".doc" or ".DOC" */
padding-left: 16px;
background: url('wordicon.gif') no-repeat;
}
a[href$=".xls"], a[href$=".XLS"] { /* this selects all links that end with ".xls" or ".XLS" */
padding-left: 16px;
background: url('excelicon.gif') no-repeat;
}
a[href*="bios"] { /* this selects all links that contain "bios" */
color: purple;
}
</style>
</head>
<body>
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />
</body>
</html>The Negation Pseudo-Class
The negation pseudo-class allows selecting something that is not something else. For example:
<!DOCTYPE html>
<html>
<head><title>Negation Pseudo-class</title>
<style>
a[href^="http://"]:not([href*="mydomain.com"]) {
/* this selects all links that begin with "http://"
but not the one with "mydomain.com" in the address */
color: red;
}
</style>
</head>
<body>
<p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="http://www.mydomain.com">Home</a>
</p>
</body>
</html>NTH-CHILD Selector
Use CSS to style every other row in a table. For example:
<!DOCTYPE html>
<html>
<head><title>NTH-CHILD Selector</title>
<style>
table {
border: 1px solid black;
}
tr:nth-child(odd) {
background-color: limegreen;
}
tr:nth-child(even) {
background-color: white;
}
</style>
</head>
<body>
<table>
<tr><td>Lorem</td></tr>
<tr><td>ipsum</td></tr>
<tr><td>dolor</td></tr>
<tr><td>sit</td></tr>
</table>
</body>
</html>
