Virtual Position Forum
Please register to watch content in detail
Thanks
Admin virtual position


Join the forum, it's quick and easy

Virtual Position Forum
Please register to watch content in detail
Thanks
Admin virtual position
Virtual Position Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Class usage and it's example in css latest version in CSS forum

View previous topic View next topic Go down

GMT + 3 Hours Class usage and it's example in css latest version in CSS forum

Post by WikiLeaks Sun May 29, 2011 1:18 pm

Let's see that how we can use the class inside the css. Its really easy not a rocket science. IN Css we should have to start it in the head and then it will be started with the "." Dot and then we can write the name of the class let's see the example that how it works. For that



[You must be registered and logged in to see this image.]



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.center {
   
   text-align:center}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p class="center">Welcome to new class</p>
<h1 class="center">Heading is center because of the Class</h1>
</body>
</html>


it shows that how it works. Now note that the class name should not be start with a number other wise it will not work other web browser then Internet explorer.

We also can specify that only specific HTML element like a p for paragraph tag
Lets see an other example which will show that how CSS works with class

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
p.center {
   
   text-align:center}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css class</title>
</head>

<body>
<p class="center">Welcome to new class</p>
<h1 class="center">Heading is center because of the Class</h1>
</body>
</html>


It will not show the result as we see in the previous example.
WikiLeaks
WikiLeaks
Monstars
Monstars

Posts : 26
Join date : 2011-05-29

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum