CSS Tutorials

R4R^®

CSS

CSS Examples

How to make margin on page

Sample page template of CSS

CSS Interview Materials

CSS subjective question

CSS Interview question

CSS Objective question

CSS FAQS

Types of CSS

Home

Internal: Internal style sheet defined within the head part of a page. Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document. The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".

Code

<html>
<head>
<style type="text/css">
p {   
font-family: verdana, arial, sans-serif; 
background-color:#00FF99;
} 
</style>
</head>
<body>
<p> This is content and its style is defined within the internal style sheet</p>
</body>
</html>
</head>
<body>
</body>
</html>

Output

Inline: Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute.

Code

<html>
<head>
<style type="text/css">
p {   
} 
</style>
</head>
<body>
<p style="color:red">This text color will be RED</p>
</body>
</html>
</head>
<body>
</body>
</html>

Output

External: External style sheet defined in a separate, hence external, file. With a link to this CSS external filey placed in the <HEAD> Section of your page. These styles are kept separately and called or linked from the required page. This is the syntax followed for linking a external style sheet.

Example: Create Regisrtation form with the help of external style sheet

CSS code

.form {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
cursor:move;
background:#FFCCFF;
height:80%;
width:25%;
text-align:center;
}

Html Code

<html>
<head>
<link href="/r4r_advance/css/regis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="form">
<h1><u>Registration Form</u></h1>
<table>
<tr>
<td align="left">First Name</td> 
<td><input type="text" name="firstname" /></td></tr>
<tr><td align="left">Middle Name</td>
<td><input type="text" name="lastname"/></td></tr>
<tr><td align="left">Last Name</td>
<td><input type="text" name="lastname"/></td></tr>
<tr><td align="left">Email ID</td>
<td><input type="text" name="emailid"/></td></tr>
<tr><td align="left">Password</td>
<td><input type="password" size="20" name="password"/></td></tr>
<tr><td align="left">Date Of Birth</td>
<td><input type="text" size="2" name="date" />
<input type="text" size="2" name="month"/>
<input type="text" size="4" name="year" /></td>
</tr>
<tr><td align="left">Gender</td>
<td>Male<input type="radio" name="male" />
Female<input type="radio" name="female" /></td></tr>
<tr><td align="left">Nationality</td>
<td><input type="text" size="20" name="nationality"/></td></tr>
<tr><td align="left">City</td>
<td><input type="text" size="20" name="city" /></td></tr>
<tr><td align="left">Zip Code</td>
<td><input type="text" size="20" name="zipcode" /></td></tr>
</table>
</div>
<div class="form">
<input type="button" value="Submit" />
<input type="button" value="Reset" />
</div>
</body>
</html>