What is CSS and why it is important ?
CSS (Cascading Style Sheets) is a language used for describing the presentation of a document written in a markup language. It is most commonly used to style web pages written in HTML and XHTML, but can also be applied to any kind of XML document, including plain XML, SVG and XUL.CSS is important because it allows developers to separate the presentation of a document from its structure and content. This separation can make the development process more efficient, as the same HTML document can be styled differently for different devices and screen sizes. Additionally, it makes it easier to maintain and update the visual design of a website, as all of the styling can be done in one place. This also enables to have a consistent look and feel across multiple pages of a website.
How CSS works with HTML?
CSS works in conjunction with HTML to style web pages. HTML provides the structure and content of a web page, while CSS is used to control the layout, colors, fonts, and other visual aspects of the page.
When a web browser loads an HTML document, it reads the HTML code and creates a Document Object Model (DOM) from it. The DOM is a tree-like representation of the HTML elements on the page, and it can be manipulated using JavaScript.
CSS rules are applied to the elements in the DOM. A CSS rule consists of a selector, which specifies which elements the rule should apply to, and a declaration block, which contains one or more declarations. Each declaration consists of a property and a value. For example, the following CSS rule sets the text color of all "p" elements to red:
p {
color: red;
}
CSS can be added to HTML in 3 ways:
- Inline styles: adding the style attribute to individual HTML elements
- Internal stylesheet: adding a <style> tag in the head section of the HTML document
- External stylesheet: linking an external CSS file to the HTML document using the <link> tag in the head section.
When the browser encounters a CSS rule, it applies the property values specified in the rule to the corresponding elements in the DOM. If there are multiple rules that apply to the same element, the browser uses the "cascading" nature of CSS to determine which rule takes precedence.
By using CSS, developers can create visually appealing, responsive websites that adapt to different screen sizes and devices.
