CSS Stylesheet

CSS: Cascading Style Sheets

CSS is a stylesheet language used to specify the display of an HTML or XML document (including XML dialects such as SVG, MathML, or XHTML). CSS specifies how items should be shown on screen, paper, during the speech, or in other mediums.

CSS is one of the open web's basic languages, and it is standardized across Web browsers according to W3C guidelines. Previously, distinct portions of the CSS standard were developed simultaneously, allowing for the versioning of the most recent suggestions. CSS1, CSS2.1, and even CSS3 may have been mentioned to you. CSS3 and CSS4 will never exist; everything is now CSS without a version number.

The Basics of Style Sheets

Style sheets are a significant breakthrough for Web page designers, allowing them to improve the aesthetic of their pages. People are more interested in the content of their documents than the appearance in the scientific contexts where the web was developed. As more people found the web, the constraints of HTML became a source of ongoing dissatisfaction, and authors were obliged to work around HTML's aesthetic limits. While the goals were noble -- to improve the display of Web sites -- the strategies used to do this had unintended consequences. These strategies work for some individuals part of the time but only for some of the time. They are as follows:

Making use of proprietary HTML extensions
Creating pictures from words
Using pictures to regulate white space
Tables are used for page layout.
Instead of using HTML, write a program.

These strategies significantly increase the complexity of Web sites, provide limited flexibility, have interoperability issues, and make life difficult for persons with impairments.

Style sheets fix these issues while superseding HTML's restricted display techniques. Style sheets make it simple to set the amount of white space between text lines, the amount of indentation between lines, the colors used for text and backgrounds, font size and style, and a variety of other features.

CSS (Cascading Style Sheets) are used to style web pages that incorporate HTML components. It controls the background color, font-size, font-family, color, and other attributes of web page components.

CSS is classified into three categories, which are listed below:

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS

To style a specific HTML element, use inline CSS. Selectors are not necessary for this CSS style; you need to add the style property to each HTML tag.

Given the necessity to design each HTML tag separately, this CSS type is not advised. If you utilize inline CSS, managing your website could become too challenging.

HTML's inline CSS, however, has its uses as well. For instance, if you need to apply styles to only one element and you don't have access to CSS files.

<!DOCTYPE html>
<html>
<head>
<title>Example for Inline CSS</title>
</head>

<body>
<p style="color: red; 
             font-size:60px;
font-style: bold; 
             text-align: left;">
Welcome back!!!
</p>
</body>
</html>

Output

Internal CSS

You must include a <style> element in the <head> section of your HTML page to implement internal or embedded CSS.

A single page may be effectively styled with this CSS style. It takes time to use this style for several pages since CSS rules must be added to each page of your website.

How to utilize internal CSS is as follows:

Locate the opening <head> tag on your HTML page.
Place the following code immediately below the <head> tag.

On a new line, add the CSS rules. Here's an illustration:

<!DOCTYPE html>
<html>
<head>
<title>Example for Internal CSS</title>
<style>
.main {
text-align: left;
}

.main1 {
color: red;
font-size: 60px;
font-weight: bold;
}

.main2 {
font-style: italic;
font-size: 30px;
}
</style>
</head>

<body>
<div class="main">
<div class="main1">Welcome to course</div>

<div class="main2">
Let's learn
</div>
</div>
</body>
</html>

Output

External CSS

External CSS consists of independent CSS files that, with the aid of tag attributes (such as class, id, header,... etc.), solely include style characteristics. CSS properties should be connected to the web page content using a link element and are written in a separate file with a .css extension. It implies that a style may only be specified once per element and will be used consistently throughout web pages.

Example: The file provided below has CSS properties. The .css extension is used to store this file. Example: one.css

body {
    background-color: pink;
}
.main {
    text-align: left;   
}
.main1 {
    color: black;
    font-size: 60px;
    font-weight: Italian;
}
#one {
    font-style: bold;
    font-size:40px;
}

The HTML document using the newly built external style sheet is shown below.

The external style sheet is connected to the HTML webpage using the link tag.
The href property indicates the external style sheet file's location.

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

<body>
<div class="main">
<div class="main1">Welcome</div>
<div id="geeks">
Let's learn now
</div>
</div>
</body>
</html>

Output