CSS 'Cascading Style Sheets' is what is used to style your HTML sites. CSS stlye properties are targeted with so called 'selectors', for example, an element's name, its ID or classes.
So, let us take a look at how CSS works in this short introduction.
IDs are used to refer to a certain element. Each ID must be unique to one element. They are set with the 'id' attribute in HTML.
<element id="id">
Classes are just like IDs, with the difference being, that they can be applied to multiple elements. They are set with the 'class' attribute in HTML. It's also possible to assign multiple classes to one element, simply put a space between each one. This also means that classes (and IDs) mustn't have spaces in their names; use hyphens or underscores instead.
<element class="class1 class-2">
To do this, first, use one of the above mentioned selectors (element name, id, class), css can target by. Note, that you have to add a hash ('#') before an ID and a period ('.') before a class when trying to target them. After that, we open a curly bracket. Inside, we write the style property's name, add a colon after that, then the value it should be set to and end it with a semicolon. Once all properties are included, we close it with a curly bracket.
/* css property to deined element */
element
{
property: value;
}
or
/* multiplte css properties to element with specified id */
#id
{
property: value;
property2: value;
}
or
/* css property applied to elements with specified class */
.class
{
property: value;
}
Extra Note: To make a CSS comment, make a slash followed by an asterisk, enter your desired comment and end it by an asterisk followed by a slash like shown in the examples above.
For a full list of CSS properties, click here.
If you want to know more about HTML elements, consider reading our guide on them here.
Here's how to load your CSS and JavaScript into HTML.
A guide to CSS Selectors can be read here.