Scribd
Upload
14 views

11 HTML - Style Sheet

A HTML - Style Sheet

Uploaded by

AGBA TERKUMA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

11 HTML - Style Sheet

A HTML - Style Sheet

Uploaded by

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

7/17/24, 11:02 AM HTML - Style Sheet

HTML - Style Sheet


CSS or Cascading Style Sheets is a tool that defines how web documents look on
screens or in print. Since its introduction in 1994, the W3C has encouraged the use of
style sheets for web design. CSS lets you control the presentation of your content,
whether it's on a screen, in print, or for accessibility, making web design more flexible and
efficient.

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 (;).

Example of CSS on HTML Document


First, let's consider an example of an HTML document that makes use of <font> tag and
associated attributes to specify text color and font size.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p>
<font color="green" size="5">Hello, World!</font>
</p>
</body>
</html>

We can re-write the above example with the help of CSS as follows.

Open Compiler

<!DOCTYPE html>
<html>

https://www.tutorialspoint.com/html/html_style_sheet.htm 1/5
7/17/24, 11:02 AM HTML - Style Sheet

<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">
Hello, World!
</p>
</body>
</html>

Cascading means that a style applied to a parent element will also apply to all
children elements within the parent. So when you are applying any style to an
element you have to be catutios about child elements. You can apply different styles
to child also.

Types of CSS
There is no type or variety in CSS actually there are three ways to include CSS in your
HTML document.

External CSS: Define style sheet rules in a separate .css file and then include that
file in your HTML document using HTML <link> tag.

Internal CSS: Define style sheet rules in the header section of the HTML
document using <style> tag.

Inline CSS: Define style sheet rules directly along-with the HTML elements using
style attribute.

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.

Examples of using Style Sheet


Let's see all three ways one by one with the help of suitable examples.

External CSS
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.

https://www.tutorialspoint.com/html/html_style_sheet.htm 2/5
7/17/24, 11:02 AM HTML - Style Sheet

Consider we define a style sheet file style.css which has following rules.

.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

Here we defined three CSS rules that will be applicable to three different classes defined
for the HTML tags. I suggest you should not bother about how these rules are being
defined because you will learn them while studying CSS. Now let's make use of the above
external CSS file in our following HTML document.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>

Internal CSS
If you want to apply Style Sheet rules to a single document only, then you can include
those rules in the header section of the HTML document using <style> tag. Rules defined
in the internal style sheet override the rules defined in an external CSS file.

https://www.tutorialspoint.com/html/html_style_sheet.htm 3/5
7/17/24, 11:02 AM HTML - Style Sheet

Let's re-write the above example once again, but here we will write style sheet rules in the
same HTML document using <style> tag.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red {
color: red;
}
.thick {
font-size: 20px;
}
.green {
color: green;
}
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>

Inline CSS
You can apply style sheet rules directly to any HTML element using the style attribute of
the relevant tag. This should be done only when you are interested in making a particular
change in any HTML element. Rules defined inline with the element override the rules
defined in an external CSS file as well as the rules defined in <style> element.

Let's re-write the above example once again, but here we will write style sheet rules along
with the HTML elements using style attribute of those elements.

Open Compiler

https://www.tutorialspoint.com/html/html_style_sheet.htm 4/5
7/17/24, 11:02 AM HTML - Style Sheet

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">
This is thick and green
</p>
</body>
</html>

https://www.tutorialspoint.com/html/html_style_sheet.htm 5/5

You might also like