What is CSS and how does it work

CSS stands for Cascading Style Sheets

Cascading Style Sheets, abbreviated CSS, is a programming language that provides the layout of HTML files.

At the base of every page on a website is an HTML file, which provides all the content you see (text, images, links, etc.). You may be thinking, why do I need CSS? This is because CSS ensures that you can shape that HTML code.

Applying a CSS file

Let's say you created a website with HTML without a CSS file linked to it. What do you think this will look like? Let's see what an html file with and without css looks like.

HTML file without CSS

If you do not assign a style sheet (css) to your html file, the browser will apply a standard styling, called a “user agent style sheet”, more information can be found here.

HTML file with CSS

If you do assign a style sheet (css) to your html file, the browser will take over the styling of the css that you linked to that html file.

How exactly does CSS work?

CSS therefore provides the layout, but to format elements differently, there must of course be a way to focus on specific elements. You can do this by using the HTML codes that are used.

Each HTML element can be designed separately via CSS. In addition, classes (class=) and identifiers (id=) are often used to design different sections with CSS. This way, you can design the same HTML elements in different ways, depending on where it is on the website.

Below is an example of CSS:

The body actually always shows the default font and size on a website. In this case, font-family shows that Proxima-nova is used as the default font. If there is something that prevents it from being displayed, we will switch to Helvetica, then sans-serif. The size of the font that is being maintained is 16 pixels.

Another completely different thing is the “a” you see. This allows you to focus on the links that appear on the website. In this case, it is indicated what color a link should be and what color the link should change when someone hovers over it (hover effect).

The benefits of using CSS

You may be asking yourself “Do I have to create a css file for every html file on my website?” The answer is no. Using CSS, you can control the layout and design from one file for the entire website. This means that from a style sheet, you can not only determine the color and font of the text, for example, but the design, layout and presentation of the overall website. In short, the code required for the design of the website can be completely separated from the HTML code.

But there are other benefits of using CSS:

• By means of CSS, the design of the page and placement of the page elements can be done accurately down to the pixel. Something that web designers will definitely like.
• Because all the code for designing the website is contained in one file, changes only need to be made to that file to make a change in the design of the entire website. This not only saves a lot of time, but also reduces the chance of making mistakes.
• CSS style sheets are well supported by all web browsers. Perhaps even better than the old-fashioned method of formatting the HTML code itself.
• By applying Cascading Style Sheets, it is very easy to make all pages of the website look exactly the same. Something that will be experienced as very pleasant by visitors to your website.
• When the website design code is placed in a style sheet, the HTML code of your website is not only easier to read and understand for you, but also for search engines. Clear code is also highly appreciated by search engines and will certainly lead to better search engine results.

Where can I learn more about CSS?

So far, a brief introduction to what CSS actually is. If you want to change the layout of your website, you will therefore have to work with CSS. We recommend purchasing a book that teaches you everything about CSS. You can also find numerous videos online.