Css style by class name

CSS – Selecting Specific Elements for Styling

So far, we have seen a few CSS style properties and how they can be applied to HTML elements. However, this way of styling affects all the HTML elements, it would be useful to selectively style certain p tags rather than all of them.

Contents

CSS Selectors

We’ve seen that CSS Styling has the following format:

 selector property-1: value; property-2: value; . property-n: value; >

The only selector we used was the HTML element type ( p , h1 , etc). There are five different types of selectors.
You can apply the same style to multiple selectors by listing them and separating them with commas:

 selector-1, selector-2, . , selector-n property-1: value; property-2: value; . property-n: value; >

This is commonly used to set default styles for various elements. For example, perhaps you want all heading items to have the same appearance, you could do it like this:

 h1, h2, h3, h4, h5, h6 color: blue; background-color:cornsilk; >

Type Selector

This is the one you have already seen – the unadorned HTML element type:

 h1, h2 background-color: red; >

ID Selector

We have seen that all HTML elements can have attributes. One attribute they can have is the id attribute – it is often used as a link reference for the a tag. The id is accessed by prefacing its value with the pound sign (#):

  >"contents">Contents .  href="#contents">Return to Contents 

You can use this id as a CSS Selector as well:

 #contents color: white; background-color: black; >

The above code snippet will select the HTML element which has an id value of contents.
As a reminder, every id in a document must be unique. 1

Class Selector

HTML tags can have another attribute called class. Classes do not have to be unique in the document. Several HTML elements can use the same class:

  >"important">This is an important paragraph. 

The class definition is very similar to the id definition. The value should be composed of letters, digits, underscores, or hyphens. No spaces or other characters. It should begin with a letter or underscore, not a digit or hyphen.
To access a class and use it for styling, you need to preface the class name with a period (.):

 .important background-color: yellow; >

The above code snippet will set to yellow the background colour of all HTML elements with the class of important.
You can apply multiple classes to the same HTML element by listing them and separating them with a space: 2

  >"c1 c2 c3">This is a sample paragraph. 

In the code snippet above, the classes c1, c2, and c3 will be applied to the paragraph. Consider the following class style definitions:

 .c1 color: blue; > .c2 background-color: yellow; > .c3 border: 2px black solid; >

Applying the above classes to the HTML fragment above results in:

This is a sample paragraph.

It should be obvious that you should try to select meaningful names for your classes (just as you should for ids).
Your class names should reflect the purpose of the class, not its behaviour (there are always exceptions). For example, instead of calling a class red-bg, it might be better to call it alert or warning. Or instead of calling a class background it might be better to call it article-bg or header-bg.
I can’t stress enough how important it is to properly structure your HTML documents.
Having said that, you will probably never get it 100% right, but that doesn’t mean you shouldn’t try to get it as right as possible. A good trick is to imagine that in the future the document needs to be completely restyled. If you can simply change the styling in the class without having to change the class name, then you probably got it right. Consider the red-bg class in the previous paragraph – if you change it to blue then the class name no longer makes any sense. However, had it been warning, you can change the background colour all you want and it doesn’t affect the class name.

Universal Selector

Sometimes, you want to apply a particular style to all the elements on the page. This can be done using the universal selector:

The above code snippet will set the margin to 5 pixels for every single element in the document.
It is very powerful tends to be used different ways:

1. To change the default behaviour of everything in the document. We’ll see an example of this in a future tutorial when we change the behaviour of the CSS Box Model.
2. It is also useful for certain selection behaviour. This tutorial only covers basic selection. Future tutorials will explore more advanced selection. 3

Attribute Selector

You can select HTML elements based on their attributes. The attribute name is enclosed in square brackets ([])

 [reversed] background-color: gray; >

The above code snippet selects all HTML elements with the reversed attribute. It only tests if the attribute has been specified for the element, it doesn’t care about the value of the attribute.
You can also test for specific attribute values:

 [start="10"] background-color: yellow; >

The above code snippet selects all HTML elements with a start attribute having the value of 10. Values must be enclosed in quotes (single or double quotes). The value must exactly match.
Instead of using class or id selectors, you could use attribute selectors for class or id. Consider the following:
Consider the following:

  [class="bob"] color: blue; > [class="mary"] background-color: yellow; > [class="bob mary"] color: green; background-color: red; > [class="mary bob"] color: red; background-color: green; >  >"bob">This is Bob.  >"mary">This is Mary.  >"bob mary">This is Bob and Mary.  >"mary bob">This is Mary and Bob. >

The code snippet above is a non-standard way of styling using classes or ids – but it can be done (remember, just because something can be done, doesn’t mean it should be done). You have to exactly match the class value to style it. Had you styled the classes instead, then the styles combine and build one atop the other.
There are more ways to select using attributes, but we’ll cover those in a future tutorial.

Conclusion

1. There are 5 different ways to select HTML elements for styling:
   1. Type
   2. ID
   3. Class
   4. * (universal)
   5. Attribute

    #table-of-contents color: blue; >

   Источник

   Class selectors

   The CSS class selector matches elements based on the contents of their class attribute.

   Syntax

   .class_name  style properties > 

   Note that this is equivalent to the following attribute selector :

   [class~=class_name]  style properties > 

   Examples

   CSS

   .red  color: #f33; > .yellow-bg  background: #ffa; > .fancy  font-weight: bold; text-shadow: 4px 4px 3px #77f; > 

   HTML

   p class="red">This paragraph has red text.p> p class="red yellow-bg"> This paragraph has red text and a yellow background. p> p class="red fancy">This paragraph has red text and "fancy" styling.p> p>This is just a regular paragraph.p> 

   Result

   Specifications

   Browser compatibility

   BCD tables only load in the browser

   See also

   Found a content problem with this page?

   This page was last modified on Jul 22, 2023 by MDN contributors.

   Your blueprint for a better internet.

   MDN

   Support

   Our communities

   Developers

   Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
   Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

   Источник

   Select and Style by Class

   In this lesson, we’ll learn about how you can apply styles to specific «classes» within your HTML files. We’ll take a look at the text-align, border, and border-radius CSS attributes, and also explore some of the useful online resources available to help developers pick and choose styles and design rules.

   Developers use digital resources on a daily basis to locate hints, tips, and tricks to speed up their job. There’s a whole bunch of great resources available to help you pick and choose the styles and attributes you use during your development process, as well as heaps of helpful forums and communities to keep up to date with new features as they are introduced!

   With new rules being added to CSS every year, there’s really never been a more exciting time to get started with web development.

   In this lesson, we practiced writing and applying styles to classes. Instead of limiting our stylesheet to specific tags or elements, we can create custom names or shortcuts, and apply them to any element on the page. This means that we can apply a style to just one element on a page, without having to style them all at once.

   h1> My Shopping List! h1>  ul>  li> Eggs li>  li class="urgent"> Milk li>  li> Bread li> ul> 

   To make our urgent class stand out on our shopping list, we’ve used the .urgent class selector in our stylesheet and applied a red color to the text for all elements in our HTML that share this tag.

   New Terms:

   • class — A global attribute that can be applied to any HTML element. Classes allow CSS and JavaScript to select and style specific elements or groups or elements with consistent themes, colors, or other interactive qualities.

   Further Reading:

   References

   Related Discussions

   Have questions about this video? Start a discussion with the community and Treehouse staff.

   Related Discussions

   Have questions about this video? Start a discussion with the community and Treehouse staff.

   You need to sign up for Treehouse in order to download course files.

   You need to sign up for Treehouse in order to set up Workspace

   Источник

   CSS Selectors

   A CSS selector selects the HTML element(s) you want to style.

   CSS Selectors

   CSS selectors are used to «find» (or select) the HTML elements you want to style.

   We can divide CSS selectors into five categories:

   • Simple selectors (select elements based on name, id, class)
   • Combinator selectors (select elements based on a specific relationship between them)
   • Pseudo-class selectors (select elements based on a certain state)
   • Pseudo-elements selectors (select and style a part of an element)
   • Attribute selectors (select elements based on an attribute or attribute value)

   This page will explain the most basic CSS selectors.

   The CSS element Selector

   The element selector selects HTML elements based on the element name.

   Example

   Here, all

   elements on the page will be center-aligned, with a red text color:

   The CSS id Selector

   The id selector uses the id attribute of an HTML element to select a specific element.

   The id of an element is unique within a page, so the id selector is used to select one unique element!

   To select an element with a specific id, write a hash (#) character, followed by the id of the element.

   Example

   The CSS rule below will be applied to the HTML element with

   Note: An id name cannot start with a number!

   The CSS class Selector

   The class selector selects HTML elements with a specific class attribute.

   To select elements with a specific class, write a period (.) character, followed by the class name.

   Example

   In this example all HTML elements with will be red and center-aligned:

   You can also specify that only specific HTML elements should be affected by a class.

   Example

   In this example only

   elements with will be red and center-aligned:

   HTML elements can also refer to more than one class.

   Example

   In this example the

   element will be styled according to and to

   This paragraph refers to two classes.

   Note: A class name cannot start with a number!

   The CSS Universal Selector

   The universal selector (*) selects all HTML elements on the page.

   Example

   The CSS rule below will affect every HTML element on the page:

   The CSS Grouping Selector

   The grouping selector selects all the HTML elements with the same style definitions.

   Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

   h2 text-align: center;
   color: red;
   >

   p text-align: center;
   color: red;
   >

   It will be better to group the selectors, to minimize the code.

   To group selectors, separate each selector with a comma.

   Example

   In this example we have grouped the selectors from the code above:

   All CSS Simple Selectors

   Selector	Example	Example description
   #id	#firstname	Selects the element with >
   .class	.intro	Selects all elements with >
   element.class	p.intro	Selects only elements with >
   *	*	Selects all elements
   element	p	Selects all elements
   element,element.	div, p	Selects all elements and all elements

   Источник