Scribd
Upload
3 views

CSS-notes of class 11

Cascading Style Sheets (CSS) are used to define the presentation of HTML documents on screens, allowing for the specification of style properties for HTML elements. CSS can be applied in three ways: through external style sheets linked via the <link> tag, internal style sheets defined within the <style> tag in the document header, and inline styles applied directly to HTML elements. Each method has its use cases, with external styles being ideal for multiple pages, internal styles for single documents, and inline styles for specific element changes.

Uploaded by

anoopagrahari022
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS-notes of class 11

Cascading Style Sheets (CSS) are used to define the presentation of HTML documents on screens, allowing for the specification of style properties for HTML elements. CSS can be applied in three ways: through external style sheets linked via the <link> tag, internal style sheets defined within the <style> tag in the document header, and inline styles applied directly to HTML elements. Each method has its use cases, with external styles being ideal for multiple pages, internal styles for single documents, and inline styles for specific element changes.

Uploaded by

anoopagrahari022
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Cascading Style Sheet (CSS)

Cascading Style Sheets (CSS) describe how documents are presented on screens. Cascading
Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for
the HTML tags. Using CSS, you can specify a number of style properties for a given HTML
element. Each property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).

You can use CSS in three ways in your HTML document:


• External Style Sheet - Define style sheet rules in a separate .css file and then include that
file in your HTML document using HTML <link> tag.
• Internal Style Sheet - Define style sheet rules in header section of the HTML document
using<style> tag.
• Inline Style Sheet - Define style sheet rules directly along-with the HTML elements using
style attribute.

1. External Style Sheet


If you need to use your style sheet to various pages, then it’s always recommended to
define a common style sheet in a separate file. A cascading style sheet file will have
extension as .css and it will be included in HTML files using <link> tag. Here we defined
three CSS rules which will be applicable to three different classes defined for HTML
tags.
Example: <html>
<head>
<title>external style sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>Introduction to CSS</center>
<p>Cascading Style Sheets (CSS) describe how documents are presented on
screens.
Cascading Style Sheets (CSS) provide easy and effective alternatives to
specify various
attributes for the HTML tags. </p>
</body>
</html>

Note: Save this file by the name “index.html”. And create another file by the name
“style.css”.
center
{
text-align: center;
font-size: 50;
background-color: blue;
}
p
{
text-align: left;
background-color: yellow;
}
Note: Save this file by the name “style.css”.

2. Internal Style Sheet


If you want to apply Style Sheet rules to a single document only then you can include
those rules in header section of the HTML document using <style> tag. Rules defined
in internal style sheet overrides the rules defined in an external CSS file. Let's re-
write above example once again, but here we will write style sheet rules in the same.
Example: <html>
<head>
<title>internal style sheet</title>
<style type="text/css">
center
{
text-align: center;
font-size: 50;
background-color: blue;
}
p
{
text-align: left;
background-color: yellow;
}
</style>
</head>
<body>
<center>Introduction to CSS</center>
<p>Cascading Style Sheets (CSS) describe how documents are
presented on screens.
Cascading Style Sheets (CSS) provide easy and effective alternatives
to specify various attributes for the HTML tags.
</p>
</body>
</html>

3. Inline Style Sheet


You can apply style sheet rules directly to any HTML element using style attribute
of the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.
Example: <html>
<head>
<title>inline style sheet</title>
</head>
<body>
<center style="background-color: blue; font-size: 50;">
Introduction to CSS</center>
<p style="text-align: left; background-color: yellow;">
Cascading Style Sheets (CSS) describe how documents are presented
on screens. Cascading Style Sheets (CSS) provide easy and effective
alternatives to specify various attributes for the HTML tags.
</p>
</body>
</html>

You might also like