USAGE OF THE # (NUMBER SIGN) AND . (DOT) IN HTML AND CSS

THE OBJECTIVE OF THIS PAGE IS TO FAMILIARIZE THE USER IN THE USE OF # AND . IN HTML.
WHO ARE THE READER OF THIS TUTORIAL (THOSE BEGINNERS WITH THE BACGROUND OF HTML AND CSS FILE)

example you have CSS FILE name style.css


/*beginning of css file*/ 

#I_am_an_ID {
   display:none;
}

.Iam_a_Class{
   display:'block';
}

.Iam_a_Class2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75px;
}

/*end of css file*/

OKAY … NOW WE ARE GOING TO APPLY THAT CSS ABOVE IN

HOW TO APPLY THE USE OF # AND . in HTML # is for and . is for in HTML

EXAMPLE:

 <p id="I_am_an_ID"> hello </p> 
<p class="I_am_a_Class"> hello </p> 
<p class="I_am_a_Class2"> hello </p> 

<strong>let us apply in LAYERS or DIV</strong>

<div id="I_am_an_ID"> hello </div> 
<div class="I_am_a_Class"> hello </div> 
<div class="I_am_a_Class2"> hello </div> 

<strong>DOUBLE class in html code.</strong>

<p class="I_am_a_Class I_am_a_Class2"> hello </p> 
<div class="I_am_a_Class I_am_a_Class2"> hello </div> 

WE ARE NOT LIMITED FOR ONE OR TWO HERE…IN CSS.
you can use..in css also the combination of 2 classes above meaning both of them have this attributes.

BOTH WIDTH 130px(pixel)

.I_am_a_Class.I_am_a_Class2{
  	width: 130px;
}

IF YOU WANT ANOTHER…COMBINATION.

.I_am_a_Class#I_am_an_ID.I_am_a_Class2 {
       CSS...CODE HERE...
}

ADDITIONAL READING:
http://css-tricks.com/multiple-class-id-selectors/
http://www.w3.org/standards/webdesign/htmlcss

Advertisements
This entry was posted in HTML & CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s