CSS stands for Cascading Style Sheets. It’s a technology that is used to design a website or web application. If we consider a human body, the skeleton of our body is compared to Html for a website, and our skin and hair are compared to CSS for a website. It means that we can design a website in various types with the help of CSS. We can add various colours, different fonts, different icons, etc. In another way, we can say that CSS is a style sheet language used for describing the look and formatting of a document written in a markup language.
CSS defines how the HTML elements are to be displayed. Styles are normally saved in external (.css) files. External style sheets allow you to change the appearance and layout of all the pages in a Website just by editing one single file.
Some benefits are listed below for which we use CSS
- Facility for Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this, we can view offline websites.
- Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
- Fit for Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
- Maintenance is easy: To make a global change, simply change the style, and all elements in all the WebPages will be updated automatically.
- Time-saving: You can write CSS once and reuse the same sheet on multiple HTML pages.
- Global web standards − Now, HTML attributes are being deprecated, and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.
- Platform Independence− The Script offers consistent platform independence, which means it can be used in any operating system.
Syntax
A CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in our document. A style rule set consists of a selector and declaration block. We can say that,
- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a CSS property name and a value, separated by a colon.
As we can say-
- Colour is property, and blue is value.
- Font-size is property and 50px is value.
- A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
As like –
- Another example we can take-
ab {
background color: blue;
color: white;
}
Here it means, in this container, where the elements are present, the background colour will be blue, but the letters or sentences will be white.