CSS tutorial-CSS rules


CSS rules

You can put CSS rules in three places:
     

1. In an HTML tag to affect the single tag by using style keyword.


Example:
<html>
<head>
<title>In tag style</tile>
</head>
<body>

<p style"color:green;"> This text will display in green color by using in-tag style</p>
 
</body>
 
</html>


    

2. In the head of the page with the style block to affect the entire web page.


Example:
<html>
<head>
<style>
p {color:green;}
.myclass{font-size:20pt;}
</style>
 
<title>Embeded style</tile>
</head>
<body>
<p class="myclass"> This text will display in color</p>
</body>
 
</html>

 
   

3. In separated file (with .css extension) that can be imported to the web page by using the link keyword.


Example:
In the file format.css you have:
#menu
{ margin: 0;
padding: 0;
width:100%;
z-index: 30
}

In your web page, you import the format.css file that is in the same directory:

Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="format.css">
<title>An external style</tile>
</head>
<body>
<ul id=”menu”>
  <li>PHP tutorial</li>
 <li>JavaScript tutorial</li>
<li>JQuery tutorial</li>
 <li>CSS tutorial</li>
<li>HTML tutorial</li>
</ul>
</body>
 
</html>




Comments





This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.