Working With CSS Class and ID Selectors

By: Daniel Imbellino
Updated: Feb 28, 2013

   What is a CSS Selector? CSS selectors are used to link a style declaration to a given HTML elements content in a web page. The h1, p, ul, li, blockquote, and other HTML elements can be used in CSS to reference their use in a web page such as this:

<style type="text/css">
h1 {font-size: 55px; font-family: "times new roman"; color: blue; text-align: center; }
p {font-size: 30px; font-family: "times new roman"; color: red; text-align: justify; }
</style>


What we just did was create references in our CSS for each of the h1 and p selectors, so that we can point our style formatting to the actual HTML elements. Now when we specify an element in our HTML, that element will carry the style information assigned in our CSS, like this:
<h1></h1>
<p></p>

The "id" selector:
With the id selector you can define and name selectors yourself, making it easy to reference what content within a web page you are pointing too and formatting.
Ex:
<style type="text/css">
body {background-image: url("http://www.example.com/image.jpg"); background-repeat: no-repeat; background-attachment: fixed; }
#header {width: 850px; height: 125px; position: absolute; left: 210px; top: 15px; }
#menubar {width: 850px; height: 55px; position: absolute; left: 210px; top: 150px; }
#sidebar {width: 95px; height: 800px; position: absolute; left: 15px; top: 165px; }
</style>
</head>
<body>
<div id="header"> <img src="website-banner.png" />
</div>
<div id="menubar">
(HTML Code)
</div>
<div id="sidebar">
(HTML Code)
</div>

By using the id selector we can make descriptive tags that tie directly to our content. In the example we just gave you could assume that the "header" selector is used as a container for a websites banner image, the "menubar" selector could be used for a menu of navigational links directly under the banner, and the "sidebar" selector could be used for a vertical menu of links from the left side of the page. Also, think of each div selector as referencing an individual division within a webpage. This is exactly what it does!
Another way that the id selector comes in handy is when you have multiple sections of a web page that use the same elements such as the h1, h2, p elements, etc, and you need to have a different formatting for the same element but in alternate sections of the page. Without the use of the id selector, you would be able to define only one particular formatting for each HTML element across your entire webpage.
Ex:
<style type="text/css">
body background-color: blue; }
#main {width: 800px; height: 800px; position: absolute; left: 200px; top: 75px; }
#main h1 {font-size: 45px; font-family: arial; color: red; text-align: center; }
#main ul {font-size: 35px; font-family: arial; color: red; text-align: center; }
#main p {font-size: 25px; font-family: times new roman; color: black; text-align: justify; }
#sidebar {width: 145px; height: 800px; position: absolute; left: 15px; top: 100px; }
#sidebar h1 {font-size: 40px; font-family: arial; color: red; text-align: center; }
#sidebar ul {font-size: 35px; font-family: arial; color: red; text-align: center; }
</style>

We then need to reference our ID's in our webpage:

<div id="main">
</div>

Notice how we were able to call upon the use of multiple elements within a single selector. We now place those same elements within our div's as we want them to appear in our pages:

<div id="main">
<h1>Example Heading</h1>
<ul>
<li><a href="http://example.com" target="_self">example link</a>
<li><a href="http://example.com" target="_self">Another example link</a>
</ul>
<p>
Our paragraph text here
</p>
</div>
Notice how we used the same elements (h1 and ul) in different id selectors. Each selector is actually defining a section of a web page and how that section will be formatted. Each div tag in our HTML is actually defining an entire division within the web page itself. Notice how we were able to specify the width, height, and position of our selectors on the web page. We used Absolute positioning to do this. Absolute positioning allows us to place an element (selector) at its exact coordinates within a browser window, such as firefox for example. Absolute positioning measurements are made from the top-left corner of the browser window. By using Absolute positioning, we can place an element anywhere on our web page just by measuring in pixels using our X and Y axes. With the #main selector the positioning was specified as absolute; left: 200px; top: 75px;. what this means is, position our element "#main" 200 pixels from the left and 75 pixels from the top of the browser window. Using absolute positioning you can place elements any where you want on a web page by simply measuring the distance from the top-left corner of the browser window in either pixels (800px) or percentages (75%).

Continue to Working With CSS ID and Class Selectors Part 2..