CSS stands for Cascading Style Sheets and is a document styling language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript CSS is designed to enable a separation of presentation and content, including layout colours, and fonts This separation can improve content accessibility while providing more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting while making maintaining the overall look of a website quicker and easier.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader ), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes which enhances “responsiveness” that is the ability for the same document to look appealing on various types of devices.
How Does CSS Work?
CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page, for instance, a paragraph which in HTML might look like this:
If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:
In this case, “p” (the paragraph) is called the “selector” it’s the part of CSS code specifying which HTML element the CSS styling will effect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector. Properties are things like font size, colour, and margins, while values are the settings for those properties. In the example above, “colour” and “font-weight” are both properties, and “pink” and “bold” are values.
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
This is a heading
This is a paragraph.
When tags like, and colour attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and colour information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!