HOW TO | 3D | CODE | GAMING | PHOTO | SOUND | VECTOR | VIDEO

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)