What does class *= mean in css?
|
Show
Imagine you're designing a web page. You want a group of headings to have a large red text, a group of buttons to have a medium white text, and a group of paragraphs to have a small blue text. Bold choices. But, thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements to achieve your desired web page appearance. In this post, we'll cover the fundamental terms you need to know, like CSS class, class selector, and CSS specificity. We'll also walk through how to create a class in CSS and use it to style your web pages. What is a CSS class?A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS. Let’s look at an example of how CSS classes work. Below, we have a simple HTML page with three headings (h2 elements) and three paragraphs (p elements). Notice how the second heading, third heading, and final paragraph are styled differently than the rest — this is because these elements have been assigned the class bright. Looking at the CSS, we see the .bright selector, which applies its style rules to all elements with the attribute class="bright". See the Pen css class: heading example by Christina Perricone (@hubspot) on CodePen. You can use CSS classes to group HTML elements and then apply custom styles to them. You can make classes and apply them to text, buttons, spans and divs, tables, images, or just about any other page element you can think of. Let’s now take a closer look at how we can use CSS classes to style page elements. How to Create a Class in CSSLet’s try making a CSS class from scratch. Say you want to make a paragraph of text and style certain words for more emphasis. You can do this by creating a CSS class for these special words, then assigning this class to individual words with span tags. Start by writing out the HTML elements you want to style. In this case, it’s a paragraph of text: I’ve also placed tags around the words we’ll soon style with a CSS class. Next, let's add class attributes to these tags. To do so, add the attribute class="name" to the opening tag of the targeted element, and replace name with a unique identifier for the class. Image Source In our example, the HTML looks like this: Here we’ve added two CSS classes to our span tags: orange-text and blue-text. Now, let’s go over some questions you may have about CSS classes. Where Can You Add CSS Classes in HTML?CSS classes can be added to any HTML element. Some of the most common include:
|