CSS Classes and Ids in html with example

CSS 3 cascading style sheets

Classes and ID in css with example source code


CSS – Cascading Style Sheet In this lecture you will learn Classes and IDs, you will know what is classes and IDs and how to apply these in CSS In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). Here you can also define your own selectors in the form of class and ID selectors. The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID. So the CSS might look something like: To use classes and ids in styles, add the classes and ids style attribute to the relevant element. The style attribute can contain any CSS property using this you can apply many places. for instance classes and ids in css examples with source code here: for css classes and ids in html with example <!DOCTYPE html> <html> <head> <style> #top { background-color: #ccc; padding: 20px } .intro { color: red; font-weight: bold; } The HTML refers to the CSS by using the attributes id and class. It could look something like this: </style> </head> <body> <div id="top"> <h1>Chocolate Dish</h1> <p class="intro">This is my recipe for making curry purely with chocolate</p> <p class="intro">This is Second p tag class to presenting content </p> </div> </body> </html>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.recipe { /* whatever */ } will only be applied to paragraph elements that have the class “recipe”.

web development

css

Web development course Data Science courses: Web Development
Online courseOnline Courses: Include Certification
Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2023 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2023