The heart of styling a web page is to instruct the browser to select certain elements of the page and style them with the properties and values specified. The elements are referred to as selectors.

The selector can be any HTML element called out with a tag. This can be the <body> tag, an interior <div> tags, heading tags <h1>, <h2>, <h3>, etc., paragraph tags <p>, <img> tags, and on and on. This applies to HTML5 elements as well.

To specify which HTML element you wish to style, you remove the opening and closing brackets and just use the element name itself. You then place the property or properties with their values inside of curly brackets. See the example below where the selector is an HTML element or list of elements separated by commas.


body {background: #ADADAD; font-family: "Palatino Linotype", "Book Antigua", "Palatino", serif; }
h1, h2, h3 {color: #227745; text-decoration: underline;}
img {border: 5px #FFF solid; box-shadow: 2px 2px 3px #CCC;}

 The selector can also be all HTML elements that have a specific class assigned to them or an id.


<div id="rightcol">
    <h2 class="sideheading">Animals of the tropics</h2>
    <ul class="squaremarker">

#rightcol {width: 220px; float: right;}
h2.sideheading {color: #44FF67}
.squaremarker {list-style: square;}

The above example shows the HTML markup with the id and classes assigned to various elements. The styling targets the id with a # sign in front of the id name. The classes require a period in front of the class name. With ids and classes in CSS, you can choose to use the element along with the id or class or not. If you just use the class name or id name, then any element on that page will be affected that has that id or class. If you do use it with the element specification, h2.sideheading, then only those specific elements with that class or id will be affected.