Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

Class and ID selectors in CSS


 


WHAT ARE CLASSES AND ID SELECTORS:

As we have learnt earlier about the selectors in HTML where were normally the tags like the h1or p, Now we can define these selector by using class and ID selectors so as to differentiate between the selectors and after differentiating we may be able to able the proper CSS and styling on that particular selector. 

In the CSS a class can be demonstrated by dot "." and ID can be represented by hash symbol "#".

Difference between ID and class:

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Lets take a look at a simple example:

<!DOCTYPE html>
<html>
<head><title>Styling in html</title>
<style>
h1.myheading{
 color: red;
 font-weight: bold;
}

p:first-line{
text-transform: Upper-case;
} /*This is used to transform the first line of paragraph as upper case , You can also use the same code for last-line, or we can also use first-letter..
}
p#para {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>
<h1 class="myheading">The CSS demo</h1>
<p id="para">CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. 
It allows one to adapt the presentation to different types of devices, such as large screens, small screens, 
or printers. CSS is independent of HTML and can be used with any XML-based markup language.</p>
</body>
</html>

Note: ID name can not be started by number.

Post a Comment

0 Comments