CSS stands for Cascading Style Sheets.
CSS is used to describe the presentation of web pages including layouts,fonts and colors.
CSS is used to describe the presentation of web pages including layouts,fonts and colors.
There are 3 types of CSS such as Inline CSS, Internal CSS, External CSS
Inline CSS
Inline CSS is
used to apply a single HTML element.
Inline CSS uses
the style attribute.
Use style attribute in HTML elements.
Use style attribute in HTML elements.
<h1 style="color:red;text-align:center;">Welcome
to my Inline css example</h1>
Example
<html>
<head><title>Inline
CSS Example</title>
<body>
<h1
style="color:red;text-align:center;">Welcome to my Inline css
example</h1>
<strong><p
style="color:blue;">This page is under
construction</p></strong>
</body>
</head>
</html>
Internal CSS
Internal CSS is used to apply a style for single
page.
Internal CSS is defined in the <head> section
of a HTML page within a <style> element.
<head>
<style>
h1{
size:200px;
text-align:center;
color:blue;
background-color:yellow;
}
p{
color:red;
}
</style>
</head>
Example
<!Doctype html>
<html>
<head><title>Internal
Css Example</title>
<style>
h1{size:200px;
text-align:center; color:blue; background-color:yellow;}
p{color:red;}
</style>
</head>
<body>
<h1>Welcome to
my First Internal Css Example</h1>
<p>Cascading
Style Sheet</p>
</body>
</html>
External CSS
An external style sheet is used to apply the
style for multiple pages.
Provide a link to it in the <head>section
of the html page like
<head>
<link href="formatting.css"
rel="stylesheet"></link>
</head>
You can change the style for complete website
using external css
Example
<html>
<head>
<title>External Css Example</title>
<link href="formatting.css"
rel="stylesheet"></link>
</head>
<body>
<h1>Welcome to My First External Css Example</h1>
<p>There are Three types of CSS</p>
<ul list-style-type:square;>
<li>Inline CSS</li>
<li>Internal CSS</li>
<li>External CSS</li>
</ul>
</body>
</html>
formatting.css
h1{
color:red;
background-color:yellow;
size:200px;
font-family:Helvetica;
text-align:center;
}
p{
color:blue;
font-family:Arial;
}
body{
background-color:#ccffcc;
}
No comments:
Post a Comment