Type of CSS
Types of styles:
- Inline
- Internal
- External CSS
Inline Styles : This kind of style takes values inline with the html tag
Try this example:
<font style=”color: red; background-color: orange;”>
Test Font
</font>
Internal Styles : Here we define style under head tag and use it for our tags.
Inside head tag we will define styles as given in the examples. Internal styles can be used in three ways
Try this example :
body {
background-color: gray
}
p {
color: red;
}
h3 {
color: white;
}
External CSS : When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.
Try this example :
<html>
<head>
<title> External CSS </title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Heading </h3>
<p> This paragraph has a red font
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
HTML code :
<html>
<head>
<title> My Personal web page! </title>
<!– Internal CSS code –>
<style type=”text/css”>
body {
background-color: gray
}
p {
color: red;
}
h3 {
color: white;
}
</style>
</head>
<body>
This is example of internal css<br>
This is example of internal css <br>
This is example of internal css <br>
<br />
<font style=”color: red; background-color: orange;”>
Inline css code
</font>
<br />
<p>This is the example of basefont…</p>
<p>This is the example of basefont…</p>
<p>This is the example of basefont…</p>
</body>
</html>
Comments