Multiple Classes Example : Class Selector « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Class Selector

Multiple Classes Example

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; Multiple Classes Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
.heading {font-family: Impact, Sans-Serif;}
.veryimportant {background-color: yellow;}
.stuff {color: red;}
.veryimportant.stuff {font-style: italic;}
.veryimportant.example.stuff {text-decoration: underline;}
</style>

</head>
<body>
<div class="content">
  <h1 class="veryimportant heading stuff">Heading (yellow background, red text,
  italic, and Impact)</h1>
  <p class="veryimportant">This is the first paragraph. (yellow background, black
  text)</p>
  <p class="stuff">This is the second paragraph. (red text, default background)</p>
  <p class="veryimportant stuff">This is the third paragraph. (yellow background, red
  text, italic)</p>

</div>
</body>
</html>








Related examples in the same category

1.Class assigns a user-defined semantic meaning to an element
2.assign multiple classes to an element by putting multiple class names in an element's class attribute
3.class for a tag with dot operator
4.init capital
5.class name + nested tag names
6.Create a class inside blockquote
7.Style for HTML tag in a DIV with class name
8.Add style to both ul and li
9.Combine style together
10.Specify two attributes in class
11.Anchor with class name
12.To style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}.
13.Subclass Selector
14.Combined class
15.CSS class rule
16.Document Wide CSS rules