What is CSS?

CSS or Cascading Style Sheets is a technology that allows you to create beautiful, convenient and responsive website designs. It is also responsible for formatting, presentation and layout.

The main reason we use CSS is not only because it allows us to create flexible, convenient sites, but also because it allows us to keep the design separate from the content, which is very convenient. Сreating websites and understanding HTML will be easier for a person if he is not burdened with styles.

A bit of History

CSS was first introduced in 1996 and then could change fonts, colors, layout and distance between elements. In 2004, CSS 2.1 added layout and positioning. The current CSS standard is CSS3, which is also capable of creating transition effects, animations, and resizing. Modern browsers support CSS3, but there are a few "oldies," such as IE8 that does not support all the available features.

You need only text editor to start writing CSS, because CSS is just a text file. If you save it as a separate file, which is recommended, then .css permission is used. Thus, your first CSS file will be called approximately “main.css”. If you have a fairly simple site, then you will not need more than one file. But in some cases it’s worth creating several files to store the code in a more orderly manner. Then it’s better to put the CSS files in the Styles folder or just “CSS”.

You need to attach your stylesheet to HTML, otherwise it will not work. This is done using the link element in the head element of your HTML. Here is an example of a link element:

The rel attribute tells the browser how it relates to HTML. Remember to specify the location of your CSS correctly. Our file is located in the same directory as the HTML file, so we do not need to tell the browser to change the directory. But if your CSS file was stored somewhere else, then you need to register the path to the file here.

Selectors, Properties, and Values

The term that defines the appearance of a site is always “style” or “styles”. Styles are defined using specific rules. To find the element in HTML, you should use the selector, and then the property-value bunch to set the element to the desired parameters. The selector tells the browser where to apply the rule. The body selector finds the body element in HTML. The code below will give the whole body element a red color:

It is important to pay attention to punctuation as well as braces. All values ​​that you want to change for the selector must be in braces. After the property, there should always be a colon, and after specifying the value - a semicolon. If any of these three elements is missing, your CSS will not display correctly.

There are dozens of different properties for styling HTML. Background color, layout, transparency, and font size are just some of them. You can find a great list of properties on the W3C.

You can add multiple properties for a single selector. This is very convenient because you can write code without repetition. If you know that you want to make the body element not only with a red background, but also with a width of 1200 pixels, you can include all this in one selector, like this:

You can also set the same style for different selectors at the same time, simply by putting a comma between them before putting an opening brace. This is how the code will look if we want all the headers to have the same style and color:

Adding styles

You can write styles directly in HTML without creating CSS. But adding styles directly to HTML, without separating them with a CSS file, you will create a lot of difficulties for yourself in the future. If you want to change something simple, for example, the color of the text, you will need to change the HTML code on each page, instead of changing one parameter in CSS. The great advantage of using CSS is the ability to easily experiment with different designs. In addition, it will be easier for you to work with HTML, since in it you will focus only on the content of the site.

Still, it’s possible to add CSS styles to HTML by placing them in <head>.

You can go to <head>and add a style value to the style element, like this:

External style sheets

External style sheets are connected using a separate file with the extension .css and the tag, which is “embedded” in the HTML document. For example:

Internal style sheets

Internal style sheets are “included” in the HTML document, and are used for this style attribute. For example:

Inline Style Sheets

Built-in stylesheets are “written” in the header of the HTML document. For example: