JasmineDesign

Cascading Style Sheets commonly known as CSS is a modern Style Sheet language (or style language) used for describing the presentation of structured documents. It is widely used by many to style HTML documents, though it can be used to style documents in many other Markup Languages.

Originally styling for Markup Languages like HTML was done within the document itself mixing together both structure and presentation. It can still be written this way now if you so choose, but as the web progressed and people wanted to add more styling to a page it made for longer more complex HTML documents which weren't easy to either read or update. Also when any style change was implemented each page would in turn have to be individually changed, an expensive and tedious task especially if your website had multiples of pages all sharing that same changing element.

So in 1996 the World Wide Web Consortium or W3C as its commonly known created and introduced CSS documents to the web.

Now in 1996 the needs and demands on a website differed from todays technology which is why W3C have continued to update and improve CSS through the years and its current version is CSS Level 3 though they are already working on CSS Level 4.

CSS allowed the separation of a websites presentation from the structure of its page. It did this by putting all styling such as layout, fonts and colours into a single Style document, which could then be linked to each HTML document with one line of code, it made for not just cleaner more readable code with less repetition, but quicker style changes as just one adjustment to your code would then be implemented across all pages at once.

Not only did this make things more efficient for the programmer but by removing the style code from the HTML document it increased the load speed of that document. An even more important factor nowadays with the introduction of mobile devices to surf the web as it reduces the cost of bandwidth used.

CSS can not only control the layout, fonts and colours in your site but it can also be used to adapt your layout and presentation for different types of devices from small mobile to large desktop screens, printers or by voice (screen readers).

When writing CSS you need to be aware that it works in a Cascading manner, meaning if you set a style of a certain element at the beginning of your code but then change it further down your page of code the new style stated will have priority over the first.

For example the colour of font on your page is black but further down the CSS page you want to set some font to red but you don't specify a particular part of the page you wish to change then all the font on your page will be red.

There is fairly good support in modern web browsers today for the new features in CSS3 such as grids, transitions and transforms, unfortunately though some older browsers can't support every CSS3 feature so you need to be aware of websites visiting audience and how they maybe viewing it, as they may not get the benefit of the new features and just see errors.

As modern websites need to be usable on different sized devices this created the need for Responsive Web Design (RWD).

Responsive design allows you to adapt the layout to the viewing environment, CSS3 has allowed us to do this by the use of features such as media queries which allows you to state a change in the style or layout depending on the size of a screen for example on a mobile device making a button have a larger clickable area or changing the direction of the navigation menu.

CSS moving forward in 2024

We released a number of Sprouts of Wisdom on JasmineWS tutorial website at the end of the last year. A Browsing Good Year covered how CSS has grown and updated in 2023.

We have written about Navigation Positioning & Spacing using Flexbox on our JasmineWS tutorial website. Along with an outline to using the newly released Popover which is more HTML focused but still very interesting from a CSS point of view.

We have plans to release more outline guides on JasmineDesign and JasmineWS across a range of CSS properties for example using Subgrid, Container Queries, Anchor positioning and many more interesting releases soon.