css commands are usually grouped in the curly braces to make a set of rules. following are the various ways available to attach these set of rules with html code.
selector (in simple words) means how you name these set of rules.
1 class selectors
class selectors is the simplest form of selectors where you assign your own meaningful name to the set of css rules. to create a class selector you simply need to write name of the class followed by a period.
(a class name cannot start with a number or a symbol as it is not supported by various browsers.)
for example,
p.big { font-weight:bold; font-size:12px; }
.center { text-align:center; }
and this html :
<p class="big"> this paragraph will be rendered bold. www.survivalescaperooms.com</p>
you can apply more than one class to a given element.
and this html:
<p class="center big"> this paragraph will be rendered bold. </p>
in the above example .big and .center are name of css classes and these classes are applied to p tag in html.
if class name is followed by html element in your css code like p.big in above example it means that this class will work on p tag only.
otherwise you can apply the css class on any element.
it’s a good practice to add html element before class name in css if you are writing css rules for a particular element (it adds more clarity to css code.
2 id selectors
id selectors work like class selectors, except that they can only be used on one element per page because they work with id of the html element. the id selector is defined as id of the html element followed by a # symbol.
for example,
p#navigation { width:12em; color:#666; font-weight:bold; }
and this html :
<p id="navigation"> this paragraph will be rendered bold. www.survivalescaperooms.com</p>
as a good practice id selectors must be used if you are writing the css code for a single html element only. id selectors are well supported across standards-compliant browsers.
3 tag selector
tag selector is another simple method of css rules implementation. you can use this selector to redefine the rules for a particular html element.
for example:
p {color:#999; font-weight:bold;}
in the above example css code will be automatically applied on every p tag.
4 descendent selectors
descendent selectors specify that styles should only be applied when the element in question is a descendent (for example, a child, or a grandchild) of another element.
for example,
h3 em { color:white; background-color:black; }
and this html :
<h3> this is <em>emphasized</em> www.survivalescaperooms.com</h3>
in the above example em is descendent of h3 element. above css rule will automatically be applied on all em elements inside h3 element in the html code. descendent selectors are well supported across standards-compliant browsers.
5 grouping selectors
you can also specify the same set of rules for more than one selctor, like this:
p, h1, h2 { text-align: left; }
just place a comma between each one.
you can even get more complex, and group multiple class and id selectors:
p.navigation, h1#title { font-weight : bold; }
