Scribd
Upload
33 views3 pages

Introduce Cascading Style Sheet

Cascading Style Sheet (CSS) is used to style HTML elements on web pages, including properties like background color and font size. There are three types of CSS: Inline CSS, which is applied directly within HTML tags; Internal CSS, which is embedded in the head section of an HTML document; and External CSS, which is stored in a separate .css file and linked to the HTML document. Each type serves different purposes for styling web pages uniquely and efficiently.

Uploaded by

yurrajkc36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views3 pages

Introduce Cascading Style Sheet

Cascading Style Sheet (CSS) is used to style HTML elements on web pages, including properties like background color and font size. There are three types of CSS: Inline CSS, which is applied directly within HTML tags; Internal CSS, which is embedded in the head section of an HTML document; and External CSS, which is stored in a separate .css file and linked to the HTML document. Each type serves different purposes for styling web pages uniquely and efficiently.

Uploaded by

yurrajkc36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Introduce Cascading Style Sheet (CSS), describe its types and use them.

Cascading Style Sheet (CSS) is used to set the style in web pages that contain HTML elements. It
sets the background color, font-size, font-family, color etc property of elements on a web page.
There are three types of CSS which are given below:
1. Inline CSS
1. Internal or Embedded CSS
2. External CSS

1. Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body style ="background-color:RED">


<p style = "color:white; font-size:50px;
font-style:italic; text-align:center;">
Essentials of Computer Science
</p>
</body>
</html>

Internal or Embedded CSS: This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is
embedded within the HTML file.
Example
<!DOCTYPE html>
<html>
<head>
<title> Learning different internal CSS </title>
<style>
h1{
color:green;
background-color: orange;
text-align: center;
font-size:50px;
}
h2{
color: red;
background-color: blue;
font-size:30px;
}
p{
color: gray;
background-color: yellow;
font-size:20px;
}
</style>
</head>
<body>
<h1> Welcome to computer class !!!</h1>
<h2> I hope you all are enjoying web technology course</h2>
<p> My name is Kamal Lekhak</p>
<p> You will learn about internal CSS in this class</p>
</body>
</html>
External CSS: External CSS contains separate CSS file which contains only style property with
the help of tag attributes (For example class, id, heading, … etc). CSS property written in a
separate file with .css extension and should be linked to the HTML document using link tag. This
means that for each element, style can be set only once and that will be applied across web
pages.
Example: The file given below contains CSS property. This file save with .css extension. For
Ex: cssfile.css

body {
background-color:green;
}
p{
background-color:yellow;
}
h1 {
background-color:red;
font-size:50px;
font-weight:bold;
}
Below is the HTML file that is making use of the created external style sheet
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file. (Hypertext
REFerence) The HTML code used to create a link to another page

 The rel attribute defines the relationship between a linked resource and the current
document
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="cssfile.css">
</head>

<body>
<h1> Learning about external css file</h1>
<p> Hello! How are? Do you like this? </p>
<p> Thank you for learning this language</p>
</body>
</html>

You might also like