CSS, the language that complements HTML to design a web page. The overall structure of the file is in the shape of classes, these are called from the names (id=”” or class=””) defined in your HTML.
Prerequisites
Pre-requisites in HTML will be useful for understanding CSS. However, you can learn more from the examples below.
Essential rules
- Favour declaring html tags (of type body, div, nav, …) when you declare them constant elements of your style. This technique will allow you to target elements and make your code easier to read.
- Use .class for redundant style elements.
- Use #id for unique elements.
CSS is a language based on english terms to give more visual meaning to blocs, characters or images for instance. Those terms are called properties and covers a huge panel of customisations such as sizes, proportions, positioning, colors, alignements and plenty of others. These properties wouldn’t work on their own, this is why depending on what you are trying to do, there will be one or multiple attributes that give precise indications on the usage.
Thanks to all those visual properties, you will be able to create a visually pleasing and ergonomically appropriate site for today’s constraints.
Beware of specific properties used, some are unavailable on certain browsers. You will find here the complete list of CSS styles as well as the different compatibilities.
<style>
/* CSS declaration in the HTML */
.className{
width:100px;
height:100px;
background:red;
}
</style>The above option is not recommended for reasons of clarity and code structure. However, this method can be used at will to quickly test your style. The best way to include CSS on your page is to embed it in a dedicated css file and declare it in the “head” of your HTML following the example below:
<link rel="stylesheet" type="text/css" href="style.css">All the included style will be applied in the HTML or PHP files in which you have linked in your “head”.
