What Is CSS?

How exactly does CSS work?

CSS takes care of the formatting, there must be a way to focus on specific features. You can do this through the HTML codes that are used. Each HTML element can be individually designed via CSS. Also, classes (class =) and identifiers (id =) are often used to develop different CSS sections. This way, you can create the same HTML elements in different ways, depending on where it is located on the website.

I think it is time for an example of a piece of CSS code:The body actually always displays the default font and size on a website. In this case, you will see at font-family that Droid Sans is used as the default font. If there is something that prevents it from being displayed, it will switch to Helvetica Neue. The size of the font used is 16 pixels.

Something completely different is the “a” that you see. This allows you to focus on the links displayed on the website. In this case, it is indicated which colour a link should have and in which colour the link should change when someone moves the mouse over it (hover effect).

So much for a brief introduction to what CSS actually is. If you want to change the layout of your website, you will have to work with CSS. In WordPress, it is wise to work in a child theme if you will work with CSS.

This is how CSS works! Three ways in which you design your website with CSS.

Each web page comprises several HTML elements, and those elements are designed using CSS. This abbreviation stands for cascading style sheets. A stylesheet is a style sheet: a file in which the layout (or style) of a website and its components is recorded. The word cascading (literally translated: like a waterfall) means that a particular HTML element’s style characteristics are automatically applied to all its sub-elements. (Of course, if you don’t want to, you can override those style properties by specifying one or more new attributes for that sub-element.)

Three ways for CSS styling

There are three ways in which you can influence your website layout with the help of CSS (see also the video a little further on this page):

1. You can put the code style = ” in the opening tag of an HTML element. Within the set of double quotation marks, you then place the style characteristics that that element should have. This is called an inline style. For example, suppose you want the text of a particular paragraph to appear in red and bold, the opening tag of that paragraph looks like this:

<p style = “color: red; font-weight: bold;”>

2. What you can also do is put a style block in the head of your page. This is called an internal style sheet. This method is easy if you want to give all elements of a certain type the same appearance on a certain page. Such a style block starts with <style> and ends with </style>.

Suppose the text of every paragraph of your page should turn blue, and the first line of each section should be indented 24 pixels. In the head of your page you put the following style block:

<style>
p { color: blue; text-indent: 24px; }
</style>

As you can see in this example, you start by naming the HTML element (that’s the p element here), and after that, you put a set of braces. Between those curly braces, you place the different style attributes for this element and end each feature with a semicolon. Once you’ve finished styling that particular element, go to the next line and continue with another element’s attributes. In such a style block, you can, therefore store the style characteristics of several HTML elements. NB: within a style block you can add as many blank lines and spaces as you want. So if you find it easier to start each property on a new line, please go ahead!

3. Finally, you can also record an HTML element’s style characteristics in an external style sheet. Most HTML elements will have to have the same layout on all pages of your website. It is inconvenient if you had to put a style block in the head of each page. An external style sheet is then much more straightforward. And suppose you want to give a particular element a different look on a single page. In that case, you simply override the properties from the external style sheet by specifying new stuff for this element in a style block in the head, or directly in the opening tag of the component itself.

Link to the style sheet

Finally, there is one more thing you have to do: you have to tell the browsers which style sheet to use to design your web pages and where exactly that style sheet can be found. You do that with this code, which you put in the head of all your pages:

<link href = “css / basis.css” rel = “stylesheet” type = “text / css” media = “screen”>

What you want to say with this code is this: To design the different HTML elements on this web page, use a stylesheet called basis.css, which can be found in a folder called “CSS”.