Scribd
Upload
47 views8 pages

Inline, Internal and External CSS Styling and Their Priority

Uploaded by

sushree007
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
47 views8 pages

Inline, Internal and External CSS Styling and Their Priority

Uploaded by

sushree007
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/ 8

Inline, Internal and

External CSS styling


and their priority

PW SKILLS
Topic
● Introduction to link CSS to HTML

● Inline CSS styling with example and its priority

● Internal CSS styling with example and its priority

● External CSS styling with example and its priority

● Pros and cons of Inline, Internal and External CSS styling

PW SKILLS
Introduction to link CSS to HTML
Linking CSS to HTML is a fundamental step in web development to control the presentation
and style of web pages.

Serval way to link our CSS to HTML,


● Inline
● Internal
● External

PW SKILLS
Inline CSS styling with example and its priority
Inline style are one of the ways to add CSS to an HTML document. A style attribute can be
added to any HTML tag and CSS properties are added to it.

Note - Inline styles override any CSS Inline or External style sheet

Example

<h1 style="color:green;text-decoration:underline;"> Hello world </h1>

PW SKILLS
Internal CSS styling with example and its priority
An internal stylesheet is a method of adding CSS rules directly within the <style></style>
element in the <head> section of an HTML document
This allows developers to define styles for specific HTML elements of classes within the same
HTML file, without the need for an external stylesheet

Note - It has priority less than the inline styles and will be able to override external styles but
not the inline styles.

<!DOCTYPE html>
<html>
<head>
<title>Example of Semantic HTML Tags</title>
<style>
h1 {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

PW SKILLS
External CSS styling with example and its priority
An external stylesheet is a separate file that contains CSS rules and is linked to an HTML
document using the <link> element.

HTML CSS Output


<!DOCTYPE html> h1 {
<html> color: green;
<head> text-decoration: underline;
<title>Example of External style sheet</title> }
<link rel="stylesheet" href="style.css" <>
<style></style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

PW SKILLS
Pros and cons of Inline, Internal and External
CSS styling
CSS styling Pros Cons

● Provides complete control over the styling of a specific ● Can be difficult to maintain, especially on larger projects
element ● Increase page load times if used excessively
Inline
● Easier to override global styles for specific elements as it ● Not very scalable, as each individual element needs to
has the highest specificity. have its own inline style.
● More maintainable than inline CSS, as styles can be defined ● It can be difficult to apply styles consistently across
once in the head section of the HTML document and applied multiple pages, as style must be defined in each HTML
Internal to multiple elements. document individually
● It provides greater flexibility than inline CSS ● It can still lead to code duplication if the same styles are
● It is easier to override styles than inline CSS. defined in multiple sections of the same HTML document.
● It is the most maintainable option, as styles can be defined
● It may not be as flexible as inline or external CSS, as
in a single file and applied to multiple pages.
styles must be defined in a separate file and cannot be
● it is the most efficient option, as the CSS code can be
applied directly to an HTML element.
cached by the browser, reused across multiple files, and
● It requires an additional HTTP request, which can slow
External easily edited.
down the page load time.
● It allows for greater organisation and consistency, as styles
● it has lower specificity than inline and internal CSS, which
can be separated into different files and easily edited
means it can be overridden by other styles applied to the
● it is the most recommended approach for small to big
same element.
projects.

PW SKILLS
THANK YOU

PW SKILLS

You might also like