Is it is okay to have classes and ids inside HTML tags?

HTML & CSS
1

I am trying to learn HTML and CSS.

I am wanting to know if it is okay to have classes and ids inside HTML tags.

I am trying move a few messages in from the left by 10px, because they are too close to the edge of the white part. Anyway I have added my html and css here, so you can see what I am talking about. Could someone please tell me how to move the text in by about 10px, if it is not all right to have classes and ids inside HTML tags?

My HTML code:

<div id="wrapper">
		<h1>Blog Title</h1>
    
    <div class-"mainMsg">
    	<h2 class="mainMsg">My Blog is Coming Soon</h2>
        
        <p class="mainMsg">What the blog is going to be about.</p>
    </div> <!-- End of main message -->
    
    <div id-"formMsg">
    	<h3 id="formMsg">Be Informed!</h3>
        
        <p class="formMsg" id="formMsg">Subscribe to be the first to know when my blog is ready.</p>
        
        <div id="subscribeForm">
        	<!-- Form here -->
            <form><input type="email" /></form>
        </div>
   </div>
        
        <div id="socialIcons">
        	<!-- Social media icons here -->
            <p></p>
        </div>
</div> <!-- End wrapper - end of the page -->

My CSS code:

body {
	background: url(../images/forestImage.jpg) #000 center center no-repeat;
	background-size: 100% auto;
	
}

#wrapper {
	background-color: #FFF;
	margin: 100px;
	
}

h1 {
	font-family: 'Rochester', cursive;
	font-size: 60px;
	text-align: center;
}

.mainMsg {
	padding-left: 10px;
}

#formMsg {
	padding-left: 10px;
}

#subscribeForm {
	padding-left: 10px;
}

#socialIcons {
	
}

#socialIcons p {
	
}

.formMsg {
	
}
2

Perfectly OK. That’s exactly their intention and they’d not be valid anywhere else.

2 Likes
3

Thanks.

4

Hi Sunnydays and welcome to the forum.

It is important to note that as well as classes and ids it is also possible to include styles which are useful for temporarily adjusting content. Once satisfied the style should be copied, deleted and transferred to the stylesheet.

There is always a possibility that each class, id and style could have their own width, height, color, etc settings and because of CSS Specificity only one rule can applied.

As a general rule of thumb the order of precedence is style, id and class.

A comprehensive article on this topic by one of our CSS gurus.

Two free useful tools for validation can both be used by “URI input”, “File upload” or “Direct input” methods:
HTML Validator
CSS Validator

Using the above tools will highlight your incorrect syntax which is possibly preventing your page from rendering correctly :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.