Go Back

css tutorial for beginners Cascading Style Sheets

11/13/2021
All Articles

#css tutorial for beginners #Cascading Style Sheets #css Interview Question , #different type of Selector in CSS

css tutorial for beginners Cascading Style Sheets

 What is different type of Selector in CSS

Basically Cascading style sheet css used to design a font and color etc on html element therefore we need to specify target html element .

So if you want to select or target HTML element ,following are selector  :

  • Universal selector
  • Type selector
  • class selector
  • ID selector

 

 Introduction of Css and History of Css

Cascading Style Sheets (CSS) is a simple mechanism for adding style
(e.g., fonts, colors, spacing) to Web documents

Althrogh HTML isvery essentialto generate adding
a web page bu their aresome important drawback which HTML
suffer

HTML has no style for layout
Using HTML we can’t add position of element
HTML does’t support for multiple unit like px ,em etc

Background image display using HTML repeate itself

To improve look and feel WC3 school launch a new language
called css in year 1996 .

The term css stand for Cascading Style Sheets
It is purly a design language
It only to handle look and feel of our page .

This means that still we have to use HTML
to process element but there presentation manage
by CSS

CSS Syntex :

Selector { property : Value }

“:+” single value

As I mention CSS are provide below type selector which are :

  • Universal selector : This selector are apply to all element of Html. 
  • Type selector : This selector are apply to  particular HTML tag.
  • Class selector :This selector are apply on same value of class attriute.
  • ID selector : This selector are apply on attribute of  ID of Html element 

Universal selector :

In this selector ,we used * for selecting element 

<html> 
<head>
​<title>Example of css universal selector </title>
 <style type ="text/css" > 
*{ font-family : Arial; font-size : 20 px; font-weight : normal ; } </style> 
</head>
 <body>
 <h1>This heading </h1>
 <p>This paragraph is style with CSS</p> 
<a href ="http://www.developerIndian.com">go to developerIndian </a>

Type selector

Allow us to create rule set which will apply to particular HTML tag reather then all tag.

Example :

<html> 
<head> 
​<title>Example of css Type selector </title>
<style type ="text/css" >
 h1{ 
color :green ; 
} </style> 
</head>
 <body>
 <h1>This heading </h1> <p>This paragraph is style with CSS</p> <a href ="http://www.developerIndian.com">go to developerIndian </a> </body> </html>

Id selector

Id selector allow us to apply the css effect to aparticular element
whose id value match with text mention in id selector .

Example :

<html> 
<head>
​<title>Example of css ID selector </title>
 <style type ="text/css" > 
#intro{ 
color :green ; 
} 
</style>
 </head> 
<body>
 <h1>This heading </h1>
 <p id ="intro">This paragraph is style with CSS</p>
 <a href ="http://www.developerIndian.com">go to developerIndian </a> 
</body> 
</html>

Class selector

we have class selector which allow to apply a given rule to many element to
define a class selector.

<html> 
<head>
<title>Example of css class selector </title>
 <style type ="text/css" > .highlight{ color :green ; } </style> </head>
 <body> 
<h1>This heading </h1>
 <p class ="highlight">This paragraph 1 is style with CSS</p>
 <p class ="highlight">This paragraph 2 is style with CSS</p>

Article