CSS allows you to save some of the stylistic building blocks that are used in HTML documents in a file. You can then apply these styles to all of your HTML files.
What is CSS?
CSS stands for Cascading Style Sheets, and it is a way for HTML documents to decouple the content of a page from the design of the individual elements, such as headings, quotations, etc.
You can create a CSS file for a domain and include it on all sub-pages as an external resource. This can save a lot of time if there are fixed defaults for design elements that do not change between documents.
The ‘cascading’ aspect of CSS becomes clear when you’re dealing with different classes. For example, you can specify in the CSS file that all H2 headings (parent element) are to be printed in font size 46. You can then insert a subclass of the H2 headings (child element) that prints the text in bold when a certain class (e.g. “bold”) is defined.
This means that, when you’re using HTML documents, you don’t have to repeat the instruction for the font size of the subclass, as this is inherited from the parent instruction – it spills over.
With these instructions, every <h2> element gets the font size 42, and only headings with <h2 class=”bold”> are printed in bold.
Why do cascading style sheets exist?
The possibility to decouple the design from the content of a document brings noticeable speed advantages. The individual HTML documents become shorter because the design instructions are outsourced.
In addition, the website operator does not have to make sure that all necessary design instructions are present in every document. This can reduce the administrative effort immensely, especially if there are a lot of documents.
In addition, I can tell browsers for how long the CSS file can be used (and for how long it can be cached). This means that the browser does not have to download the file every time, which reduces the loading time.
How can I pass CSS information to a document?
There are several ways to embed CSS in an HTML document. The two most common are linking an external CSS file and embedding it directly within an HTML document.
External CSS file
The easiest way is usually to combine all style information in a CSS file and reference it in the <head> part of the HTML document:
<link rel='stylesheet' id='admin-bar-css' href='https://www.sistrix.com/wp-includes/css/admin-bar.min.css?ver=5.6.1' media='all' />This tells the browser that the file “admin-bar.min.css” must be loaded in order to display the content of the HTML document correctly.
Inline CSS
You can also choose to add part of my style sheet directly, inside the <head> area of the HTML document.
You can do this using a <style> tag. For example, if you want to create a class that ensures that images are delivered correctly on mobile devices, you can write the following directly in the <head> of the document:
<style>
.img-responsive {
display:block;
max-width:100%;
height:auto;
}
</style>Using CSS for Search Engine Optimisation
The ability to specify the styles that you want and then implement them on all sub-pages also brings advantages when it comes to search engine optimisation.
Instructions in CSS files can be used to specify exactly how a document is displayed by a desktop and/or a mobile browser. So you can create a responsive design once and all subpages can benefit from it, as there is no need for two versions for desktop and mobile.
In addition, CSS has been used over the years to increase the loading speed of many websites. This became necessary when a large number of files were required to display the web page correctly.
An abundance of requests in the older HTTP standard, HTTP/1.1, meant that the loading time was increased for the sole reason that the browser was only allowed to create a maximum number of connections.
With the new HTTP/2 standard, this restriction no longer applies.
CSS and HTTP/1.1
With HTTP/1.1, most browsers only allow six simultaneous connections per host. In addition, the connections are terminated after the transmission of the resource. This can lead to increased loading times due to latency – and this is particularly noticeable with mobile connections).
You can also load graphic elements that are used on the website as a large image sprite and then use CSS to display only those parts of the image that contain the required graphic.
CSS and HTTP/2
With the new HTTP standard 2.0, the limit on maximum connections is relaxed and connections can also be used for more than one resource. This means that the latency of the connection establishment plays a much smaller role in the page speed.
Conclusion
CSS is an integral part of web design, and it makes sense for SEOs to deal with the possibilities offered by cascading style sheets.
When it comes to PageSpeed optimisation, your First Contentful Paint (this is a measure of how long it takes the browser to render the first piece of DOM content after a user navigates to your page) can be made much shorter if you use inline CSS.
