Add multiple styles to an element with CSS
So you just made a new division or a section in an HTML document and you want to assign it multiple styles or combine a style from multiple parts of the CSS document. For example, you want to assign it the main background color, a drop shadow number 1 and main font family.
So this is your freshly created division
<div>
<h3>New DIV heading</h3>
<p>New DIV paragraph.</p>
</div>
Adding styles to a <div>
In case you want to add multiple styles to an element you don't add it straight into the <div> tag but you assign multiple classes to an element. For example, lets say you have main background color defined in a CSS document of in a head of the HTML file. And then you have a drop box number 1 defined and maybe a font family.
Like this:
.main-background-color {
background-color: #ffff66;
}
.main-font-family {
font-family: Roboto;
}
.box-shadow-nr-1 {
box-shadow: 5px 5px 5px #888888;
}
In order to assign a class to the division you need to add it inside the <div> tag.
<div class="main-background-color">This division has the main background color.</div>
How to assing multiple styles or classes to a <div>
It's really easy actually. You just type them in the class list one by one.
<div class="main-background-color main-font-family box-shadow-nr-1">This division has the main background color, main font family and box shadow number 1.</div>
You can do the same with the text. Just combine different styles together. But remember that you have to define those classes in the head section or in a CSS style sheet.
<font class="slogan light darkshadow mainbgcolor">
Company slogan with a light font color, dark shadow and main background color..
</font>
Last update: 2019-01-17 (Y,M,D)
