Step 22: CSS ID and CLASS rules

Lets say you want to make a box on the right of your page where you can insert text...then you would need to make your own tag and define it via CSS in order for it to do so....

We use ID and CLASS selectors to get the job done for us...

We use them like this :

HTML file

This content goes into the box on the right hand side of the page </p>

CSS file

border: 2px solid black;

To style div id's that you make, you <span style= “background-color: #FFFF00″>use the "#" sign</span> in the CSS file...
To style div classes that you make, you <span style= “background-color: #FFFF00″>use a "." (period)</span> in the CSS file

IDs are used when you are making it like a whole different tag like in the example above, but CLASSES are used when you want to style things inside another tag, like


<p> This <div class="MYFIRSTDIVCLASS"> text </div> is styled by div class...</p>

CSS file


So classes are used when you have the specific div class inside another HTML tag (Excluding HTML, Body and Head tags)
Pre-defined elements like (h2, p, h1, br, em, i, b etc...) are edited using the div class function because they are repeated a lot of times in the document, and therefore it has to be a class div...
Div IDs are used when you are going to use the styles element only once in the HTML document...

<p>Great article !</p><p>We are experts in Website Design &amp; Development (PSD to HTML5, Wordpress, PHP), Software Development, Mobile App Development and more.</p><p>Visit us: <a href="http://imperialservices.co.in/" rel="nofollow">http://imperialservices.co.in/</a></p>
<p>Well it is good for you that you learning HTML &amp; CSS. Keep learning about <a href="http://dubaimonsters.com/services/web-design-dubai/" rel="nofollow">web design dubai</a> services how they work on web designing. </p>
<p>Great guidelines. Thanks.</p>
Awesome tutorial!<br>Just made a little page for my birthday to provide qr codes. <br>We re doing a rally. <br>Maybe I will upload an instructable. Using pi web server; qr codes and my new hot page!<br>Thanks!
<p>You can check out my tutorial, it is simply the basics. I'll create an even deeper one later!</p>
<p>I can web design and code very well.. my weak point is only CSS sometimes I don't understand it.. Any tutorial for help would you suggest?</p><p><a href="http://www.webdesignerdubaicompany.ae/" rel="nofollow">Web Design Dubai Company</a></p>
<p>Cool visual tutorials. Help me a lot in my academic web designing projects.</p><p><a href="http://www.gulfwebdesigncompany.com/" rel="nofollow">Dubai Web Design Company</a></p>
<p>Well defined basic web design tutorial. What is the first step to take in web design please tell me?</p><p><a href="http://www.dubaiwebdesignagency.com/" rel="nofollow">UAE Web Design</a></p>
<p>How about an advanced web design where do I get tutorials from? Any help would be appreciated</p><p><a href="http://www.adwebstudiodubai.com/" rel="nofollow">Web Design Dubai Company Adwebstudio</a></p>
<p>In this post, very informative knowledge has been shared by vishalapr. Here, I want to suggest HTMLPanda (<a href="http://www.htmlpanda.com/" rel="nofollow">www.htmlpanda.com</a>) for the best web and mobile app development services. They convert your PSD file into 100% hand coded HTML or HTML5 and CSS.</p>
<p>Thanks for nice post ! I am working in <a href="http://www.proweb365.com" rel="nofollow">Minneapolis web design</a> firm. It's really helpful to learn more about HTML and CSS. I also keep track some more posts about responsive design in your blog.</p>
<p>Thanks for nice post ! I am working in &lt;a <br>href=&quot;http://www.proweb365.com&quot;&gt;Minneapolis web design&lt;/a&gt; <br>firm. It's really helpful to learn more about HTML and CSS. I also keep <br>track some more posts about responsive design in your blog.</p>
<p>Great post if you want can found more on devox.io</p>
<p>Great post thanks for sharing </p>
<p>OMG thank you,i've been such a n00b at thisXD </p>
<p>Very Useful guidelines for Beginners. Thx </p>
<p>Nice guidelines indeed, also I see you where interested in certificates so I would like to recommend you to check this out:</p><p>http://www.testdome.com/Certificates</p><p>These are free certificates for which you need to solve some online coding tests, something like these ones (which you can use for practice):</p><p>http://www.testdome.com/Programming-Tests/Html-Css/13</p>
<p>Nice post for learning web designing!! Get web design and web <br>development services at <a href="http://inoday.com" rel="nofollow">inoday</a></p>
<p>I am currently taking a class and trying to figure out how to do the HTML formatting, and I am very, very confused with the formatting of the text. Any help as far as websites or information would be greatly appreciated. </p>
<p>Very nice post!!! This post is so much helpful for everyone. If you want to know more about HTML5 CSS3. <a href="http://psdtohtml5express.com/" rel="nofollow">http://psdtohtml5express.com/</a></p>
<p>This is a wonderful post, This post is very helpful for me I am a website designer Thanks for sharing very nice information. <a href="http://psdtohtml5express.com/" rel="nofollow">Responsive Web Development Company</a></p>
<p>forgot the doctype...</p>
<p>upgrade to html5! Nice though.</p>
I have two questions<br/>1.Did you use notepad? <br/>2.How did you view your text on a page without the code?<br/>I'm new to HTML and CSS<br/>Thank you for everything!
<p>Yes I used notepad and I took a screen shot of the text in the web browser and cropped out the rest.</p>
<p>Nice these basic steps are useful and helpful for <strong><a href="http://www.mastercomputech.com/" rel="nofollow">website designing</a> </strong></p>
<p>Ensure you use Google Chrome, Safari or Firefox if you would like to find the &quot;Inspect Element&quot; tool, which allows you to highlight specific parts of the HTML and see which part of the website they correspond to.</p>
<p>This was very helpful - clear and effective. Thank you so much for all your time and effort</p>
<p>Glad I could help, :D</p>
My company name is Sparx IT solutions and we also provide web design services in all the countries at affordable price. Check out our portfolio: <a href="http://www.sparxitsolutions.com/portfolio.shtml" rel="nofollow">http://www.sparxitsolutions.com/portfolio.shtml</a>
HTML is use for designing purpose, and JavaScript is use for doing validations as well as to perform some action.
lol, that is exactly what johnmacd said....
HTML is use for designing purpose, and JavaScript is use for doing validations as well as to perform some action.
hi vishalapr im new in html <br> i have 2 questions. <br>1.how can i find my html on the web? <br>2.how can i make its name like =name.html <br>nice instructables
go here http://www.webs.com
Once you have coded the whole website, you will need to host it for it to be online and for others to see it. You can either do this by setting up your own server(Not really recommended) or you can buy a server slot from others or buy a domain online, <br> <br>These sites provide web hosting but they charge you; <br>http://www.ipage.com/ipage/index.html <br>http://www.justhost.com/ <br> <br>there you can name it with the domain name, to make it the name of your website. <br> <br>By name,html do you mean like how to save the file that way or once its online the name that you type in like www.instructables.com? if thats what you mean then using the above websites you can name it. <br> <br>Thx :) glad you liked the ible
Thanks for sharing this great information! I have been looking into <a href="http://www.yellowpages360solution.ca/en/advertising-solutions/web-site-creation.htm" rel="nofollow">website design toronto</a> to help me but I have still been wanting to learn and this has been so great! Simple but yet I learned a lot! Thanks for sharing!
I've wanted to be able to make my own website for a while now. My friend does <a href="http://www.teeitupmarketing.com/mobile-solutions/" rel="nofollow">mobile website design</a> and I've always been jealous of their skills. I wonder if I'll be able to figure this out.
This really confuses me. I am thinking of hiring a <a href="http://www.teeitupmarketing.com/" rel="nofollow">website design company</a> that can take care of this for me. Thanks for the post.
Not meant to offend but maybe you could use a doctype? <br>Doctypes are a form of metatags that tell your browser which version HTML you wrote in your webpage. There are subtle differences for each version so it matters quite a lot which one you use. <br> <br>You can find all the info on w3schools, <br>btw, you can also apply a HTML5 doctype to #1 of your html page to make the page HTML5 instead of 4.01
Yeah doctypes are quite useful and should be added, and yes W3Schools is an awesome website, I did learn a lot for that website.
Thanks a Bunch. I have started my own site www.Nove-Noga.com based on my study of w3schools available info. You managed to clearly present much of their content in a very clear, concise format. REALLY appreciated your discussion of IDs and CLASSes. Please forgive my site. I only started using the style sheet a couple of days ago. <br>Thanks, Nove-Noga
That's a nice website you have got there :) <br>Glad I was able to help,
I never thought that I could do my own web design. I'm not very computer savvy. I probably will continue to look for a <a href="http://www.teeitupmarketing.com/" rel="nofollow">website design company</a> to help me. I want to make sure it is done right.
Thanks for the informations. If you have incerrect coding in a web site you cannot have a good position in search engines. Also SEO is very important for a website. i am also amking web sites <a href="http://webintr.com/blog/index.php/15/05/2012/web-tasarim/" rel="nofollow" title="Eskisehir web tasarim">Eskisehir web tasarim</a> <br>Thanks
welcome.....I agree.....
html 5?
You can use HTML code to make your comments on other instructables cooler, and more noticable, like<br><br><font color="red" face="Verdana" size="35">THIS FONT IS BIG AND IN RED COLOR</font><br><br>ABBR

About This Instructable


218 favorites


Bio: Coolest site ever -I-N-S-T-R-U-C-T-A-B-L-E-S-.-C-O-M
More by vishalapr: Diffused Glue Stick Lamp ATtiny85 POV Display Artoo [R2] (ATtiny2313 Wall Avoiding Robot)
Add instructable to: