SETTING UP CSS FOR DUMMIES

A QUICK REMINDER: WHAT IS CSS FOR?

It is the one that allows you to choose the color of your text. It allows you to select the font used on your site and to define the size of the text, the borders, the background…And also, it is the one that allows you to make the layout of your site. You can say: I want my menu to be on the left and occupy such a wide space, the header of my site to be positioned at the top and always visible, etc.

CSS IS ABOUT THE STYLE

In general, with CSS, you use the markup language to describe the information contained in the document, not its style. CSS is used to specify its style and not its content. A markup language such as HTML also provides some ways to specify a style. For example, in HTML, it is possible to use a tag <B> to make text bold, or to specify the background color of a page in its tag <BODY>. When using CSS, we generally avoid using these possibilities of the markup language so that all the style information of the document is in the same place. More about this subject on webmaster-site-design.com.

WHY AND HOW TO USE CSS VARIABLES?

CSS VARIABLES: EASIER TO READ AND MAINTAIN

First of all, the use of CSS variables makes it easier to read. Who knows what “#3f6aea” means? Not many people apart from the webdesigner, webmaster or digital marketing professional you know! On the other hand, if I record this hexadecimal value in a variable called “royal blue”, it is much easier to understand what it corresponds to.

The second and perhaps most important point concerns maintenance. Indeed, on the day you would like to use a slightly different royal blue, you will have to replace each line indicating “#3f6aea” with the new hexadecimal chosen. On the other hand, if you have stored it in a variable, you only need to modify the value of the variable to make the changes everywhere.

COMPARING CSS WITH ITS PREPROCESSORS

Preprocessors such as SASS or LESS have been offering a variable system for CSS for some time now. In addition, they offer other significant advantages, such as more efficient nesting, Mixins or even small loops. However, these tools also have a serious disadvantage, compilation. Indeed, your SASS or LESS file must be transformed into a CSS file in order to be interpreted by web browsers. This compilation phase, complicating things, is of course not necessary in pure CSS.

CSS : SEPARATING THE CONTENT FROM THE PRESENTATION

The goal of web developers is to remove any presentation element from the HTML code, leaving it clear and semantically correct.

CSS’ COMPATIBILITY WITH WEB BROWSERS

As usual, browsers take their time in terms of compatibility of new features. Firefox, Google Chrome, Safari and Opera play the game well since they have been accepting CSS variables for a while now. It’s on the Microsoft side that things are going badly wrong. Indeed, although Edge supports this new feature since version 15.0, unfortunately CSS variables do not work on Internet Explorer….

BROWSERS SUPPORTING CSS VARIABLES

Firefox : 31.0
Google Chrome : 49.0
Microsoft Edge : 15.0
Safari : 9.1
Opera : 36,0

PAGES LOAD FASTER AND USE LESS BANDWIDTH

Style sheets (downloaded only once and then stored in the cache memory) simplify the HTML code, which allows you to use less bandwidth when loading the page.

CSS IS COMPATIBLE WITH ALL BROWSERS

Websites that correctly use CSS have a similar appearance regardless of the browser used which is great for Web developers using different platforms to navigate.

CSS ALLOWS THE USER TO CUSTOMIZE A WEB PAGE

Today, many websites allow the user to change the layout of a site without changing the content. The style sheets that are stored externally allow that allow users to make the changes by themselves.

MORE ADVANTAGES OF USING CSS SHEETS

WHY LEARN TO CODE IN CSS?

CSS CAN BE USED TO CREATE WEB PAGES THAT ARE EASY TO PRINT

Images, colours and other important elements that are usually difficult to print are then eliminated and pages printed more easily.

ALTHOUGH IT’S ABOUT STYLE, CSS FACILITATES POSITIONING IN SEARCH ENGINES!

The content is provided first to make it easier for engine spiders to “capture” it. CSS also makes HTML code “cleaner” making it easier for indexing robots to work.

CSS FACILITATES CONTENT PORTABILITY

By using CSS, you can set style sheets separately for different media. This gives you greater flexibility in the presentation of your content.

CONTENT AND DESIGN FOR SEO

CSS allows you to modify the location of content on a page. Thus, it is possible to adapt their positioning to appeal to search engines, which focus more on the text at the top of a page. But be careful not to exaggerate, we remind you that the content must have a Perfectdesign for the user: placing a text block on the top of each page will certainly be good for robots, but less so for Internet users.

CSS ERRORS TO AVOID FOR SEO

While CSS allows many possibilities, not all of them are good to take (even if they seem tempting) at the risk of harming natural SEO. For example, choosing to hide content, for example, is particularly driven out by Google, which could consider the site as SPAM and punish it on its natural SEO. Creating a code file full of keywords and making it visible only to search engines is therefore not a good option!