Ever wondered what is CSS exactly? Read on to find out more…
CSS stands for Cascading Style Sheets. CSS is what’s known as a stylesheet language, used to describe the layout and presentation of a document produced in a markup language, most typically HTML.
The most common and everyday use of CSS is in styling and formatting web pages written in HTML (and XHTML). However it might also be used in tandem with any of the other XML document types, including SVG, XUL and plain XML.
What Is CSS? – CSS tells the web browser how to behave
CSS provides a set of rules and properties to tell a web browser exactly how each HTML element, be it a paragraph or a heading; should be formatted or displayed. The HTML document file will contain the major content, text and video of a web page and the mark up to describe it. Whereas it is the CSS which determines the presentational semantics of the content such as colour, font size, placement on screen etc.
In its most common application, CSS works alongside HTML documents (often as a linked attachment/file) to describe the layout and presentation which a web browser should use when displaying the content of the web document.
What Is CSS? – Embedded (in-line) CSS
In the early days of web page design it was not uncommon for designers to embed CSS code and styling rules alongside their HTML and within the HTML document itself. This would be placed within the <head></head> element of a typical HTML document and is commonly known as Internal CSS.
Over time, this practise has been deemed cumbersome and inefficient.
The most obvious drawbacks of this approach being the creation of huge <head></head> elements crammed full of CSS rules, and the inherent necessity to write individual CSS rules for each and every HTML page. Using external stylesheets, enables multiple HTML documents to reference a single document containing CSS rules. This method, known as External CSS, is much more efficient, manageable and reduces repetition across the website.
What Is CSS? – Use of external CSS Stylesheets
A typical HTML document will use the <link> element to link to an external CSS document which will commonly be stored in a nearby location. Most typically this will be in a dedicated folder named “css”, on the website’s host server.
A single website may use just one CSS stylesheet. Or it may have many, each of which might refer to the styling unique to different parts of the website. It is also possible to have a separate stylesheet dedicated to describing layout and presentation solely for when the web content is intended for print.
What Is CSS? – CSS Rules
Unlike HTML, CSS does not make use of tags or angled brackets to denote its markup and purpose. Instead, CSS uses CSS Rules made up of a selector and a corresponding declaration. These rules identify specific parts of the web page content and alter their characteristics. They might alter the colour, appearance, format, size, and positioning of elements on the page.
Looking for all the details? – We have an Index Of CSS Properties, and also an Index of CSS Pseudo-Classes, Elements and Rules which are great resources if you’d like to get more in-depth with CSS.
In the same way that they read and interpret an html file; all browsers will also digest and execute css files. Ultimately, it is the combination of the two related files being read simultaneously; which produces the wonderful and varied web pages we see on the World Wide Web today.
Every website currently on the web, whether it be a News Site, a Social Media Site, or a site about Freelancers like whichfreelancer.walshsamuel.com – will make extensive use of CSS.
The primary difference between CSS and HTML is that the purpose of CSS is to describe and define the layout and presentation of a web page, whereas the purpose of HTML is to define the structure of a web page.
What Is CSS? – The introduction of CSS3
As per HTML, over the years since the Web’s inception, there have been multiple efforts to update and standardise the CSS language. Each successive version has served to be an improvement over the last, and at the time of writing the most recent version is CSS3.
As with most current web browsers and languages, adoption of CSS3 is not yet comprehensive. Some browsers lag behind and don’t yet accommodate a few of the most recent additional features.