Cascading style sheets, also known as CSS is a straightforwardly built language that makes it easier to present web pages. Applying styles to web pages is possible with CSS. More crucially, CSS makes it possible for you to do this without relying on the HTML that each web page is composed of. It specifies the colors, fonts, spacing, and many other elements that go into how a web page should look. In other words, you can design your website any way you like. CSS gives designers and developers the ability to control a variety of behaviors, including how items are displayed in browsers. CSS employs rulesets instead of tags like HTML does. Although CSS is simple to grasp and learn, it offers strong control over how an HTML document is presented.
Purpose of CSS
CSS uses an offline cache to enable local storage of web apps. We can visit offline websites using this.
Simply changing the style will cause all elements across all web pages to be updated when a universal modification is made.
Compared to HTML attributes, CSS provides a far wider range of properties, allowing you to give your HTML page a lot nicer appearance.
CSS is regarded as a clean coding style, therefore it won't be difficult for search engines to "understand" its material.
CSS can be created once and reused in various HTML pages.
CSS Syntax
CSS consists of style directives that the browser interprets and then applies to the relevant elements in your document. An expression block and selector make up a style rule set. Selector
The HTML element you want to style is indicated by the selector.
One or more declarations are contained in the declaration block and are separated by semicolons.
A comma separates the name of the CSS property from its value in each declaration.
For example: color is property and blue is value. font-size is property and 12px is value. CSS declaration blocks are encircled by curly braces and always terminate with a semicolon.
Example: In the example below, all p elements will be centered and have blue text:
HTML
P [ **
color: blue;
text-align: center;
CSS selectors: CSS selectors are used to "find" (or select) HTML elements based on the elements' names, ids, classes, attributes, and other characteristics.
UNIVERSAL SELECTORS: The universal selector simply matches the name of any element type, as opposed to choosing only items of a certain kind.
CSS
{
color: #000000;
}
Output: This rule renders the content of every element in our document in black.
ELEMENT SELECTORS: The element selector chooses elements based on the element name. On a page, you can select all p items by doing something similar (in this case, all p elements will be center-aligned, with a red text color).
CSS
p {
text-align: center;
color: red;
} DESCENDANT SELECTORS: Let's say you only want to apply a style rule to an element when it is contained by another element. The style rule will only be applied to the em element when it is included within the ul tag, as shown in the example below.
CSS
ul em {
color: #000000;
}
ID SELECTORS The id selector chooses a particular HTML element by using the id attribute.
The id selector is used to choose one distinct element because each element on a page should have a distinct id!
A hash (#) character should be written after the element's id to pick It.
The HTML element with the id="para1" style rule will be subject to the following:
CSS
#gfg{
color: green;
text-align: center;
}
5. CATEGORY SELECTORS:
A specific class attribute is used by the class selector to choose elements.
Write a period (.) character, followed by the name of the class, to select components that belong to that class.
All HTML elements with the class="center" attribute will be green and centered in the example below:
A given element can have multiple class selectors applied to it. Think about the following instance:
HTML
.gfg{ color: green; text-align: center; }
- SELECTORS FOR GROUPING When elements share the same style definitions, for example:
CSS h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
} p {
text-align: center;
color: blue;
}
To reduce the amount of code, grouping the selectors will be better. Selectors should be separated by commas to be grouped. The selections from the aforementioned code are grouped in the example below:
CSS
h1, h2, p {
text-align: center;
color: red;
}
CSS AFFECTS ELEMENTS IN HTML
Before CSS: In this example, no CSS is included.
HTML
HTML Page
This is a basic web page.
After CSS:
In this case, we put some CSS after it.
HTML CSS
My first Page
This is a basic web page.
Conclusion:
Colors, layout, and typefaces are all described in CSS, the language used to describe how websites are presented. It enables one to modify the presentation for various gadgets, including printers, big screens, and small screens. Any XML-based markup language can employ CSS, which is independent of HTML.