What is cascading style sheet (CSS)

Zia

1 Follower

Follow

Mar 7, 2024

-

2 sec read

222

0

0

0

What is cascading style sheet (CSS)

CSS are style sheets that specify the formatting of a web page for both static and dynamic web pages. The formatting options include font, color, background, spacing, positioning, and borders. it is used in combination with JavaScript to format web pages dynamically.

HTML5 along with CSS and JavaScript forms an integrated instrument. CSS is a language that works along with HTML to provide visual styles to the elements of the document, such as size, color, backgrounds, borders, and so on.

A style sheet is a collection of rules that specifies the appearance of data in an HTML document. HTML is a markup language that focuses only on the layout of the content on a web page. However, applying layouts to more than one occurrence of an HTML element in an HTML page is a tedious job.

For example, if you want to change the text in the H2 element to bold, this has to be done manually for all the H2 elements. such as manual tasks might result in human errors such as missing an occurrence of the H2 element for applying the bold format. This results in format inconsistency among the H2 elements within an HTML page. Further, the specified formatting might not have the same appearance across various devices such as computers and mobiles. Style sheets overcome these problems by specifying the formatting instructions in a separate file.

CSS is a rule-based language, which specifies formatting instructions for the content specified in an HTML page. Its purpose is to separate HTML content from its formatting so that web page designers will not in a separate file saved with an extension. CSS. in. CSS file and formatting instructions for an element are referred to as a rule set. Each rule defines how content specified within an element should be displayed in a web browser. While displaying the HTML page, the browser identifies the. CSS file. CSS file for the page and applies rules for the specified element. you can merge rules from different. CSS file or can edit them. This task of combining and matching rules from different files is referred to as cascading.

Working of CSS

You can embed the CSS code within the HTML code or link the HTML file externally to the CSS file. The browser will locate the style sheet irrespective of its location and will apply the style to the HTML page. There are certain steps involved in applying a style sheet to an HTML page. These steps are as follows:

• The user requests a web page from the browser using the URL.
  
  
• The server responds with the HTML file and related files such as image files, audio files, and external. CSS files, if any.
  
  
• The browser executes the CSS code using the rendering engine and applies the styles to the HTML file.
  
  
• The web page is then displayed in the browser.
  
  

The rendering engine is software that applies the formatting instructions to the web pages and displays the formatted content on the screen.

Types of Style Sheet

There are three types of style sheets namely inline, internal, or embedded, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.

An element style sheet can also be included within the HTML document. However, it is defined using the style element within the style element. The style rules appear in a declaration block for each HTML element under the style element. The type attribute of the style element specifies the content type, which is text/CSS. This means that the content is under the style element CSS code. You can specify any combination of specifying style rules. The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific web page.

1. Inline Styles

Inline styles are placed directly inside an HTML element. A web designer cannot use the style builder to create an inline style. An inline style cannot be reused at any point in time on a web page.

2. Internal - Embedded Styles

Internal styles are placed inside the head section of a particular web page source code. These styles can be re-used on the same web page on which they are placed.

3. External Style Sheet

An external CSS is defined in a separate file and is saved with the .css extension. It provides the benefit of reusability by implementing common style rules for multiple HTML pages. Hence, external CSS is widely used to provide a consistent look across the web pages of a website.