HTML

ID and class

You can add classes and/or ID's to HTML elements. We do it, to help ourself then we work with CSS.

HTML

<section class="mySection">
<article id="onlyOneWithThisName"> ... </article">
<article id="thisIsAnotherID">...</article">
</section>
<section class="mySection">
....
</section>
<section class="mySection">
....
</section>

HTML ID

The id attribute is a unique identifier that is used to specify the document.
It is used by CSS and JavaScript to perform a certin task.
There can only be one ID for on every site with the same name.

You use it if you have a single element on the page that will take the style.

HTML ID is like a serial number og CPR number. It is unique.

HTML

<section>
<article id="onlyOneWithThisName"> ... </article">
<article id="thisIsAnotherID">...</article">
</section>

CSS

#onlyOneWithThisName{
background-color: blue;
}
#thisIsAnotherID {
background-color: pink;
margin: 8px;
}

HTML class

The class attribute can be used on any HTML element, multiple times. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
You can have as many classes as you want on the same site.

You use it, if you want to consistently style multiple elements thoughout the page/site.
It could a collection of buttons in one section that need a speciel design, that you do not want have on every button.

Classes are like bar codes on products. There can be many of them. You can change the price thought the bar code, and you can change the design of elements though classes and CSS

HTML

<section class="mySection">
< id="onlyOneWithThisName"> ... </div">
<div id="thisIsAnotherID">...</div">
</section>
<section class="mySection">
....
</section>
<section class="mySection">
....
</section>

CSS

.mySection{
background-color: blue;
}

More than one

You can give a HTML element more than one CSS class

HTML

<p class="center design">This is a text</p>

CSS

.center{
margin: 0 auto;
}
.design{
background-color: red;
}

Font Awesome

- Wow that is some pretty icons! Did you make them?
No I used Font Awesome
- What is that?
Font Awesome is a font and icon toolkit based on CSS. It helps you make icons on a site in a easy way.
Insert the link in the head of your document.

HTML code in head

<!--Insert in head-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" type="text/css">

HTML code in body

Find the icon(s) you want and insert the shortcode in your HTML

<i class="fas fa-camera"> </i>

Menu with icons

See the Pen Menu with icons by Dominoeffekten (@dominoeffekten) on CodePen.