External Style Sheet

What is External Style Sheet?

A separate style sheet file attached to an HTML web page is known as an external style sheet. The external style sheet can be used to declare all of the styles that will be used on a website. External style sheets are a significant tool for a web designer.

External style sheets help to create a uniform, worldwide appearance for a website by applying consistent formatting to web pages. HTML pages can connect to the external style sheet. Styles only need to be set up once for each element when using an external style sheet. External style sheets have the distinct advantage of being able to be created in any text editor but must be saved with the.css extension. HTML elements cannot be added to a CSS file.

What is CSS?

CSS stands for cascading style sheets. It is a web designing language that describes how HTML elements are displayed on the computer screen. This style sheet language is used for designing web pages and web documents. CSS saves a lot of work by controlling the layout of multiple web pages all at once. CSS files are stored with the '.css' extension. It describes the presentation of web pages, including colors, page style, layout, and fonts, thus making web pages presentable to the users.

CSS is independent of HTML and can be used with any markup language. Let's understand each word of the CSS acronym:

Cascading: Falling of styles and designs

Style: Adding design with the HTML elements

Sheets: Writing the style in different documents or pages

Types of CSS

CSS is a stylesheet language that defines the appearance of web pages that contain HTML elements and attributes. On websites, it is used to establish font styles, background colors, page layouts, font families, link elements, and so on. CSS is divided into three categories:

Inline CSS
Internal and embedded CSS
External CSS

1. Inline CSS

Inline CSS places a CSS style into the HTML tag of an element. The style of HTML property specifies an element's appearance. As they apply directly to an element, inline CSS rules override styles from external CSS documents. A style is applied to an HTML element using inline CSS. You must supply inline CSS elements for each HTML element to which you want to apply a style. Example of inline CSS:

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

This is inline CSS.

</h1>

</body>

</html>

2. Internal and embedded CSS

The internal CSS has <style> tag and is used in the <head> section of HTML documents. It can be used to design single web pages. Using an internal style sheet for multiple web pages is a time-consuming process because we write the same code in multiple webpages inside the <style> tag. Example of internal CSS:

<!DOCTYPE HTML>

<html>

<head>

<title>Internal style sheet</title>

<style>

h1{

color : red;

margin-left : 10px;

background-color : blue;

}

</style>

</head>

<body>

<h1> Internal CSS is used to design a single web page.</h1>

</body>

</html>

3. External CSS

External CSS is used to design multiple web pages at the same time. It contains separate files with only style rules, properties, or style information with the help of HTML tag attributes such as <h1>, <body>, <p> (paragraph tag), etc. The CSS property written in a separate file is saved using the .css extension, and this file is linked to the HTML pages using the <link> tag. An example of external CSS is mentioned below.

//style.css file

body{

background-color : yellow;

}

.heading{

text-align : center;

}

#id1{

font-style : bold;

font-size : 20px;

}

Add this "style.css" file in the html document using link tag:

<!DOCTYPE html>

<html>

<head>

<title>External style sheet</title>

</head>

<body>

<h1 class = "heading"> My first heading</h1>

</body>

</html>

CSS selector

The CSS selector styles content. It is a part of the CSS ruleset. CSS selectors use HTML elements by id, class selector, etc. These selectors are used in both internal and external style sheets. There are several types of selectors used in CSS, some of which are as follows:

CSS element selector
CSS id selector
CSS class selector
CSS universal selector
CSS group selector

CSS element selector

It selects the element by name and applies the defined styles to the specific element. Consider the example:

<!DOCTYPE HTML>

<html>

<head>

<title>Internal style sheet</title>

<style>

h1{

color : red;

margin-left : 10px;

background-color : blue;

}

</style>

</head>

<body>

<h1> Element selector h1 is used in style tag. </h1>

</body>

</html>

Here, h1 is the element selector used in <style> tag. The h1 element is styled for 'color' , 'margin' , and 'background-color'. Every h1 element of the HTML document will be formatted as per the defined style. So the line " Element selector h1 is used in style tag " will be displayed in 'red' color, left-aligned with 'blue' background color.

CSS id selector

CSS id selectors select an element in an HTML page that has an id property with a value that matches the id selector. The name of the id selector is preceded by a "#" in a CSS document. Id selectors must be preceded by a # if they are coupled with one or more selectors. In an HTML page, IDs can only be used once.

Example: Here, head_id is the id selector.

<!DOCTYPE HTML>

<html>

<head>

<title>Internal style sheet</title>

<style>

#head_id{

color : red;

margin-left : 10px;

background-color : blue;

}

</style>

</head>

<body>

<h1 id = "head_id"> Internal CSS is used to design a single we pages.</h1>

</body>

</html>

In the given example, the h1 element with the id "head_id" will be formatted as defined in the style section. The id selector is used in both internal and external style sheets.

CSS class selector

It selects the HTML element by the specific class attribute. It uses a period (.) character followed by class name in an HTML element.

<!DOCTYPE HTML>

<html>

<head>

<title>Internal style sheet</title>

<style>

.para{

color : red;

margin-left : 10px;

background-color : blue;

}

</style>

</head>

<body>

<p class = "para"> Here, para is a class selector and it is used in external style sheet also.

</p>

</body>

</html>

"para" is class selector, which selects the specific element <p> tag.

CSS universal selector

The universal selector selects all the elements of the HTML page. It uses a wildcard character (*).

Example:

margin : 0;

padding : 0;

}

Here, * is the universal selector. It applies to the entire HTML document.

CSS group selector

It selects all the elements with the same style definition.

<style>

h1,h2,p{

text-align : center;

color : red;

}

</style>

<body>

<h1> Heading </h1>

<h2> Small Heading</h2>

<p> this is a Paragraph</p>

</body>

Here, (h1,h2,p) is a group selector which uses the same design.

Advantages of External Style Sheet

Selector and grouping procedures are used to apply styles to selected or grouped pages in complex situations.
Same html elements can be styled differently using classes.
The style of all the web pages can be altered altogether by changing external CSS file only.

Disadvantages of External Style Sheet

The outer template should be stacked in order to render the documents.
importing style to each documents need extra download of the css file.
Ineffective for small-scale style definitions.

Context and Applications

This topic is significant in the professional exams for both graduate and postgraduate courses, especially for:

Bachelor in Computer Science
Master in Web Technologies

Style specification formats in CSS
Effective use of external style sheet
Inline CSS

Practice Problems

Q1. What is the correct way to link an external style sheet to an HTML page?

<link rel = "stylesheet" href = "style.css"></link>
<link rel = "textsheet" href = "style.css"></link>
<link rel = "stylesheet" href = "style.html"></link>
<link rel = "stylesheet" href = "style.js"></link>

Correct Answer: 1. <link rel = "stylesheet" href = "style.css"></link>

Explanation- <link rel = "stylesheet" href = "style.css"></link> is the correct way to link the external style sheet. The link is mentioned in the head section of the HTML document.

Q2. An external style sheet is used to design ___________.

single web pages
multiple web pages
two web pages
None

Correct Answer: 2. multiple web pages

Explanation- When you wish to make modifications to multiple pages, you should use the external style sheet. It's great for this situation because it allows you to modify the look of the complete website with only one file modification.

Q3. The inline style is used with the specific ______________.

HTML element
HTML file
HTML page
None

Correct Answer: 1. HTML element

Explanation- Inline CSS is a style that is applied to a single HTML element. The style attribute of an HTML element is used in inline CSS.

Q4. Which is the extension used to save an external style sheet?

'.css'
'.CSS'
'.CSV'
'.CSK'

Correct Answer: 1. '.css'

Explanation- The external style sheet files are saved by using the '.css' extension.

Q5. The _____________ attribute specifies an inline style for an element.

class
id
style
sheet

Correct Answer: 3. style

Explanation- Inline style is defined via the style property. It can be found on any control.

Want more help with your computer science homework?

We've got you covered with step-by-step solutions to millions of textbook problems, subject matter experts on standby 24/7 when you're stumped, and more.

Check out a sample computer science Q&A solution here!

*Response times may vary by subject and question complexity. Median response time is 34 minutes for paid subscribers and may be longer for promotional offers.

Search. Solve. Succeed!

Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.

Tagged in

Engineering Computer Science

Web Development

Table