Creating Classes for HTML Elements

with the Class Attribute

The class attribute is a Global Attribute.

You can define a class for any web page element that accepts global attributes.

Since the id attribute must be unique and only used once on a page, the class attribute is the preferred method of defining custom properties for HTML elements.

Division class="right"

The HTML/CSS

In HTML code it looks like this:
<div class="right"></div>

To define its properties in the style sheet it would be referenced as:
div.right {
properties here
}

Example

div.right  {
flex: 1;
margin: 0;
padding: 0;
border: none
}

Example of Image Nested in Right Division

The HTML

To define the properties of an image inside div.right:
<div class="right">
<img src="image url" alt="alt text" >
</div>

The CSS

To define its properties in the style sheet it would be referenced as:
div.right img {
margin : 1rem ;
box-shadow: 1px 1px 4px #000 }

Be More Specific

You should define specific classes for your images and most page elements:
👉See: Rule #2 Images and Aligning Images

More Examples

Element	HTML	CSS
paragraph	<p>	p {font-size:1.25rem; padding :1% 5%} p {font-size:1.25rem; padding :1dvw 5dvw}
p centered	<p class="center">	p.center {text-align:center}
h3 heading	<h3>	h3 {font-size: 1.25rem; text-align:center} h3 {font-size: 1.25rem; text-align:center}
h3 left	<h3 class="left">	h3.left {text-align:left}
ul list	<ul class="special">	ul.special {list-style:none; color: #0066cc}
span	<span class="slogan">	.slogan {font-style:oblique;}

***You should if you haven't started, begin converting to REMs and DVWs. See: Clamp Function

 

 

Top