CSS stands for Cascading Style Sheets. It controls how HTML elements are displayed consistently across multiple web pages simultaneously.
Why CSS...
The bigger question here is: why do we even use CSS, and how does it help web developers.
HTML was never designed to have the capability of formatting a web page. The addition of tags and attributes in the HTML 3. 2 specification created challenges for web developers. The development of large websites, where styles had to be added to every single page, became a time-consuming and costly process.
In response to this issue, the World Wide Web Consortium (W3C) introduced CSS, which separated the style formatting from the HTML page.
Key features of CSS include:
Defining styles for HTML elements (e.g., colors, fonts, spacing)
Controlling page layouts and responsive design
Enhancing user experience and visual appeal
Improving website performance and maintainability
CSS Syntax
Below is the syntax for adding CSS to HTML elements:
selector {
CSS property: value
}Remember, we have already covered adding an external stylesheet in HTML. Now, we will delve deeper into the same.
The CSS syntax discussed here is more generalized to accommodate all types of selectors, which we will explore in upcoming articles.
To add a style in your CSS stylesheet, begin with selector or html tag
Then, enclose the desired CSS properties within curly braces {} to effectively define and style the elements associated with that specific selector.
Benefits of CSS
- Time-saving: Write styles once and apply them across multiple pages
- Consistency: Maintain a uniform look throughout a website
- Responsive design: Create layouts that adapt to different screen sizes and devices
- Enhanced user experience: Improve the visual appeal and readability of web pages
- Improved performance: Separate CSS files can be cached, potentially speeding up page load times
Want to practice more? Click here for more hands-on exercise.
References: