CSS Class – Creating and using CSS classes
CSS Class Selector
In previous chapter we saw how to use HTML selectors to style with CSS. In CSS you can also define your own selectors. These selectors are Class and ID selectors. This chapter explains only CSS class selectors.
Alternatively we can select and style HTML elements by class names. Class selectors are used when you need to apply same style to many elements. Whereas CSS ID selector is used to style single HTML element.
Syntax of defining class selector
The class selector is defined as follows:
i.e. a dot (.) followed by class selector name. All definitions are enclosed in curly braces.
Example of defining and using class selector
In example below we will define a test class with certain properties. Then we will use this class in HTML elements. Same style will be applied to a <div> and <p> HTML elements.
/*defining class selector*/
<div>This DIV will use testclass.</div>
<p>This paragraph also uses same class, i.e. testclass</p>
<p>No style applied to this paragraph</p>
As you can see, once a testclass is defined this is used in <div> and <p> HTML elements with same styling. If you make changes to testclass, it will depict on <div> and <p> where testclass was being used.
In HTML elements, class selector is referred by class=”classname” where you intend to use that style.
- CSS ID – Creating and using CSS ID
- Basics of CSS Syntax
- CSS border: 3 Examples to Style Borders in div, table
- Setting CSS Table Border with Collapse and other Properties
- CSS hover – 4 Examples of hover in div, a: link, p, headings etc.
- Easily Understand CSS background Properties with 4 Demos
- How to Use Hand, Pointer and other CSS Cursors
- Learn to set CSS background image with 4 Demos