CSS type selectors

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Type Selectors

CSS type selectors select every instance of an element in an HTML page.

Syntax:

elementName { CSS-Property: value; ........................ }

Simple Example of CSS type selectors

CSS code:

h1 {
color: blue; /* color of all the elements should be blue */
} 
p {
background-color: aliceblue;
color: maroon;
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Example of CSS type selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-type-selector.css' type='text/css'>
</head>
<body>
<h1>Example of CSS type selector.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Aenean tempus adipiscing porttitor. Quisque aliquam nunc vel arcu varius aliquam.</p>
</body>
</html>

Result:

Example of CSS type selector.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.

Aenean tempus adipiscing porttitor. Quisque aliquam nunc vel arcu varius aliquam.

View this simple example of CSS type selector in a separate browser window.

Advanced Example of CSS type selectors

CSS code:

*{color:blue;}  /* sets color blue  */
em {color: red}   /* sets color red for em */

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS type selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-type-selector.css' type='text/css'>
</head>
<body>
<p>Lorem ipsum dolor <em>sit amet</em>, consectetur adipiscing elit. Donec a urna elit. <em>Integer</em> malesuada tempus enim nec rhoncus.</p>
</body>
</html>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.

View this advanced example of CSS type selector in a separate browser window.

Previous: CSS universal selector
Next: CSS descendant selectors