CODEWITHSUNDEEP
htmlcsssasscss-selectors
thenakulchawla
thenakulchawla

Reputation: 5254

Css class with multiple html elements

I am new to front end development, especially the styling. I find css classes written like shown below:

.Header-bar p {
    font-size: 18px;
}

.Header-bar p span {
    font-weight: bold;
}

.Header-bar p span span {
    font-weight: normal;
}

I understand that this means to apply font-weight: normal; to the span element which is inside another span element which is in p under div where the class is mentioned.

This doesn't seem like a good practice. I want to create re-usable classes that I can use in my code.

How should I be changing this style to better align to my needs.

Upvotes: 0

Views: 1599

Answers (3)

izzypt
izzypt

Reputation: 180

When we are talking about styling and CSS I think it's important to keep in mind the specificity levels of a CSS selector.

What is Specifcity ?

It's what defines how broad the scope of your stylying rule is.

Simply put :

  • The less specfific a rule is - the more abstract it is - and the more elements it will capture.
  • The more specific a rule is -less abstract it is - and less elements will capture.
  • More specific rules overwrite/replace less specficic rules.

In your example you have chosen a a rule style , which is applied to a very specific element , in this case .Header-bar p span span {font-weight: normal;} and ONLY that element.

However , if you had only written .Header-bar{font-weight: normal;} it would work aswell , except you would be applying that style to not ONLY that element but also ALL the other elements which are contained in that class.

When you want to be more specific and not write all the path to get to that element, you can simply give the HTML element an ID and use it then on CSS , like this , for example :

<footer> 
  <div>
    <div>
      <p id="IDsomething"></p>
    </div>
   </footer>
</div>

Then select on CSS :

#IDsomething { font-weight : 
normal;
}

There are four categories which define the specificity level of a selector:

  • Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.

  • IDs - An ID is a unique identifier for the page elements, such as #navbar.

  • Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

  • Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Upvotes: 1

Johannes
Johannes

Reputation: 67748

Just apply a class to the span which you want to style, then create a CSS rule for that class. Selectors like .Header-bar p span span are rather used when you can't change the HTML code (or at least the structure) yourself.

Concerning reuseability of classes: That class can be used on as many elements as you like, and those elements can be divs, spans, headings or whatever.

Upvotes: 0

josh_fransix
josh_fransix

Reputation: 1

You can easily create a particular unique class that's going to be for a particular styling or set of styling. For example creating a class called "normal" and then adding the font-size property of normal, it'll be easily re-usable that way i.e you can add it to any part of your code if you want the font-weight styling of that particular element to be normal.

Upvotes: 0

Related Questions