Class Selector

  • 0


1)  .class

      The .class selector styles all elements with the specified class.

     The .class selector is supported in  Internet Explorer Firefox Opera Google Chrome Safari



 Syntax 

.class
{
 declarations;
}
  


<html>
<head>
<style>
.box {
   padding: 20px;
   margin: 10px;
   width: 240px;
   color: orange
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="box">
<p> My name is Donald.</p>
<p> I live in Duckburg.</p>
</div>


</body>
</html>








<html>
<head>

<style>
p.hometown
{
background:yellow;
}
</style>

</head>

<body>

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>

</body>
</html>

 

ID Selector

  • 0


2)  #id


 The #id selector styles the element with the specified id.

The #id selector is supported in  Internet Explorer Firefox Opera Google Chrome Safari 



 Syntax

 #id
{
 declarations;
}



 

<html>
<head>

<style>
#firstname
{
background-color:yellow;
}
</style>

</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

 
 


<html>
<head>
<style>
span#identified
{
  background-color: green;
   color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<span id="identified">ID selectors match an element based on the contents of that element's ID attribute, which must match exactly the value given in the selector.
</span>
<br> <br> <br>
<span>Here's another.</span>

</body>
</html> 




Class and Id example together/combined

  • 0


<html>
<head>
<style>

#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>


<div id="top">

<h1> hi i am id start from here  </h1>

<h1 class="intro"> hi i am class </h1>
<p class="intro"> My class closed here  </p>


<p> My id closed here </p>

</div>

</body>
</html>


 

Universal (*) Selector

  • 0

3) Universal (*) 

Select all elements, 
and set their background color, font color or any other.



Syntax

*
{
  declarations;
}  



 
<html>
<head>

<style>
*
{
 background: silver;
 color: blue;
 font-family: Arial, Helvetica,sans-serif;
}
</style>

</head>
<body>

<h1>Welcome to My Homepage</h1>

CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk ( i.e. "*" ) is used to denote a CSS universal selector. An asterisk can also be followed by an selector. This is useful when you want to set a style for of all the elements of an HTML page or for all of the elements within an element of an HTML page

</body>
</html>

 


<html>
<head>
<style>

*.warning
{
color:red;
}

*#maincontent
{
border: 3px solid blue;
}


</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="warning">
  <span> A red class   </span> in a red paragraph.
</p>
<p id="maincontent">
  <span class="warning">A red class with border blue id</span> in a green paragraph.
</p>

</body>
</html> 











One element Type Selector

  • 0


4) One element type selector

 This selector must match one or more HTML elements of the same name.


No Syntax


<html>
<head>

<style>

p
{
background-color:Bisque
}

div
{
 font-size: 80px
}

h1
{
color:DeepPink
}

</style>

</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p> My name is Donald.</p>
<p> I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>


h1,h2,h3 { color: darkred; /* color of h1 h2 h3 should be darkred */ font-variant: small-caps; /* h1 h2 h3 should be in small caps */ } - See more at: http://www.w3resource.com/css/selectors/grouping-of-CSS-selectors.php#sthash.oWMhgKs5.dpuf









<html>
<head>
<style>
h1
{
font-family:"Times New Roman",Georgia,Serif;
border-style: solid;
border-color: red
}

.tagline
{
 border-bottom-style: dotted;
 color: green
}

#intro
{
    background: #dddddd;
    border-radius: 40px;
    padding: 10px 40px;
}

</style>
</head>
<body>

<h1>Welcome to My Homepage - Type Selector - Selects an element by it’s type </h1>

<div id="intro">

<p>  I am id Start here </p>

<p class="tagline"> I am class start here and also end here  </p>

<p>  I am id End here </p>

</div>



Subscribe to: Posts (Atom)