Types of CSS
CSS sets the background color, font-size,
font-family, color, etc property of elements on a web page. And there are 3
ways of adding style to a webpage. They are given below:
1.
Inline CSS
2.
Internal or
Embedded CSS
3. External CSS
1. Inline CSS
è Inline CSS contains the CSS property in the
body section attached with element is known as inline CSS.
è An
inline CSS uses the style attribute
of an HTML element.
è An
inline CSS is used to apply a unique style to a single HTML
element.
è It is used inside the body section of the html
document
Example
<!DOCTYPE
html>
<html>
<body>
<h1
style="color: blue ;">A Blue Heading.</h1>
<p
style="color: red;">A red paragraph.</p>
</body>
</html>
Output
2. Internal CSS
è It is also called embedded
CSS. This can be used when
we want to style single HTML document.
è This
CSS style is an effective way to style single pages. Using the CSS style for
multiple web pages is time-consuming because we require placing the style on each web page.
Example
<!DOCTYPE html>
<html>
<head>
<title>
Example of Internal Stylesheet</title>
<Style>
Body {
background-color: black;
color: red;
padding: 50px;
}
</style>
</head>
<Body>
<h2>CSS types</h2>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>
Output
3. External CSS
è An external style sheet is used to define the style for many HTML pages.
è In external CSS, we link the web pages to the external .css file. It is created by text editor. This CSS method is more efficient method for styling a website. By editing the .css file, we can change the whole site at once.
How to use external style sheet.
Type CSS code into a plain text
file, and save with a .css extension
(for example, styles.css).
Here's
an example of some CSS code.
body {
background-color: green;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
#intro {
font-size: 22px;
}
.colorful {
color: orange;
}
Note: save this code with the name”
styles.css” (you can give a user defined name but the extension must be .css.)
Now,
Link to the Style Sheet from the HTML Documents. Using this code “<link rel=”stylesheet” href=”styles.css”>”. This code should be used between
<head> and </head>.
Example
<!DOCTYPE
html>
<Html>
<Head>
<title>My
Example</title>
<link
rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External
Styles</h1>
<p
id="intro">Allow you to define styles for the whole
website.</p>
<p
class="colorful">This has a style applied via a class.</p>
</body>
</html>
0 Comments