select elements by type, class, and/or ID : Selector priority : Style Basics HTML CSS TUTORIALS

HTML CSS TUTORIALS » Style Basics » Selector priority »

select elements by type, class, and/or ID


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
  border: 2px solid black;
}

* .my-class1 {
  padding: 10px;
}

* .my-class2 {
  letter-spacing: 0.11em;
}

#my-id {
  background-color: #ccc;
}
</style>
</head>
<body> 

<h1>Type, Class, and ID Selectors</h1> 
<p>The type selector, <code>p</code>, adds a border to all paragraphs.</p> 
<p class="my-class1"> 

The class selector, <code>*.my-class1</code>, adds padding.</p> 

<p class="my-class1 my-class2"> 

The class selector, <code>*.my-class2</code>, adds letter-spacing.</p> 

<p class="my-class1 my-class2" id="my-id"> 

The ID selector, <code>#my-id</code>, adds a background color. </p> 
</body> 
</html>