Scribd
Upload
7 views

How to add CSS

The document explains how to add CSS to HTML documents using three methods: external, internal, and inline CSS. It provides examples for each method, detailing how styles can be applied and how they cascade based on priority. Additionally, it emphasizes the importance of proper syntax and the implications of using multiple style sheets.

Uploaded by

navujhander
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
7 views

How to add CSS

The document explains how to add CSS to HTML documents using three methods: external, internal, and inline CSS. It provides examples for each method, detailing how styles can be applied and how they cascade based on priority. Additionally, it emphasizes the importance of proper syntax and the implications of using multiple style sheets.

Uploaded by

navujhander
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/ 1

 Menu   Log in

 HTML CSS JAVASCRIPT SQL PYTHO

How To Add CSS


‹ Previous Next ›

When a browser reads a style sheet, it will


format the HTML document according to the
information in the style sheet.

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

External CSS
Internal CSS
Inline CSS

External CSS
With an external style sheet, you can change the
look of an entire website by changing just one
file!

Each HTML page must include a reference to the


external style sheet file inside the <link>
element, inside the head section.

Example
External styles are defined within the <link>
element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

An external style sheet can be written in any text


editor, and must be saved with a .css extension.

The external .css file should not contain any HTML


tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property


value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

Internal CSS
An internal style sheet may be used if one single
HTML page has a unique style.

The internal style is defined inside the <style>


element, inside the head section.

Example
Internal styles are defined within the <style>
element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Try it Yourself »

Inline CSS
An inline style may be used to apply a unique
style for a single element.

To use inline styles, add the style attribute to the


relevant element. The style attribute can contain
any CSS property.

Example
Inline styles are defined within the "style"
attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-
align:center;">This is a heading</h1>
<p style="color:red;">This is a
paragraph.</p>

</body>
</html>

Try it Yourself »

Tip: An inline style loses many of the advantages


of a style sheet (by mixing content with
presentation). Use this method sparingly.

Multiple Style Sheets


If some properties have been defined for the
same selector (element) in different style sheets,
the value from the last read style sheet will be
used.

Assume that an external style sheet has the


following style for the <h1> element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also


has the following style for the <h1> element:

h1 {
color: orange;
}

Example
If the internal style is defined after the link to the
external style sheet, the <h1> elements will be
"orange":

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Try it Yourself »

Example
However, if the internal style is defined before
the link to the external style sheet, the <h1>
elements will be "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

Try it Yourself »

Cascading Order
What style will be used when there is more than
one style specified for an HTML element?

All the styles in a page will "cascade" into a new


"virtual" style sheet by the following rules, where
number one has the highest priority:

1. Inline style (inside an HTML element)


2. External and internal style sheets (in the
head section)
3. Browser default

So, an inline style has the highest priority, and


will override external and internal styles and
browser defaults.

Try it Yourself »

Ever heard about W3Schools Spaces? Here you


can create your own website, or save code
snippets for later use, for free.

Get started for free ›

* no credit card required

Test Yourself With Exercises

Exercise:
Add an external style sheet with the URL:
"mystyle.css".

<head>

</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

Submit Answer »

Start the Exercise

Video: How to add CSS to HTML

‹ Previous Next ›

Track your progress - it's free!

Sign Up Log in

COLOR PICKER




PLUS

SPACES

GET CERTIFIED

FOR TEACHERS

FOR BUSINESS

CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

    

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and


training. Examples might be simplified to
improve reading and learning. Tutorials,
references, and examples are constantly
reviewed to avoid errors, but we cannot
warrant full correctness of all content.
While using W3Schools, you agree to
have read and accepted our terms of use,
cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data.


All Rights Reserved. W3Schools is
Powered by W3.CSS.

You might also like