Created: April 8th 2021
Last updated: July 14th 2023
Categories: Common Web Development
Author: Tim Fürer

CSS Basics: Short introduction

Tags:  CSS,  CSS Basics,  guide,  HTML
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

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.

What are IDs?

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.

Example:

<element id="id">

What are Classes?

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.

Example:

<element class="class1 class-2">

Applying CSS properties (make a CSS rule)

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.

Examples:

/* 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.

Related stuff

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.

13.58.87.50