Defining custom css styles for html tags

Question

I don't do CSS and I'm not even sure what this is called so excuse the ignorance :-)

.examples {
 }

.examples b {
  font-weight: bold;
}

.examples p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

I'm assuming the above means any b or p tags inside a <div class='examples'> will use the styling from .examples and anything custom defined for b or p?

Can I create my own style using that convention, like this?

.examples mystyle {
}

<div class='examples'>
   <div class='mystyle'>
   ...

UPDATE:

I want mystyle to use examples styling, but override with a black bottom border. Using .examples .mystyle the bottom border appears outside examples div, but with .examples mystyle the enclosing div looks good, but the bottom black border is gone. My apologies, so it's not working either way.

http://jsfiddle.net/SAFX/5ft9W/

Your div doesn't appear to be inside of any element, let alone an element with the class of examples. Please take the time to read about CSS selectors: Selectors, Level 3. — David Thomas
– David Thomas, Commented Dec 14, 2013 at 16:35
@raffian Is the CSS selector actually .examples .mystyle (with a dot)? If so, you might want to fix the typo because it distracts people to answer the wrong question. — JJJ
– JJJ, Commented Dec 14, 2013 at 16:40
As to the update, once you correct the selector to use the . you said you were using, it works. — David Thomas
– David Thomas, Commented Dec 14, 2013 at 17:07

Kevin Bowersox · Accepted Answer · 2013-12-14 16:39:45Z

3

Since you are using a class on the tag it would need to be a class selector and the element must be a child of .examples:

/* Notice the `.` on mystyle */
.examples .mystyle {
}

<div class="examples">
    <div class='mystyle'></div>
</div>

There are several parts to a CSS style:

.examples .mystyle { /* selector */
   font-weight: bold;  /* This entire line is a declaration consisting of a property & value*/
}

edited Dec 14, 2013 at 16:39

answered Dec 14, 2013 at 16:34

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

raffian Over a year ago

Yes, that's what I'm doing, mystyle is inside examples div, should have mentioned that.

raffian Over a year ago

@KevinBowersox .examples mystyle { works, but .mystyle does not work, the formatting from examples does not extend to the child div.

Kevin Bowersox Over a year ago

@raffian Does the .examples .mystyle style override any properties set in .examples?

Paul D. Waite Over a year ago

@raffian: I suspect your .examples mystyle styles aren’t actually working how you think they are. Maybe you could be a bit more explicit about what you expect your code to do.

Kevin Bowersox Over a year ago

@PaulD.Waite I don't see how he is getting any styles applied with .examples mystyle

|

David Thomas · Accepted Answer · 2013-12-14 16:43:28Z

2

What you seem to be asking about is the terminology to describe child elements inheritance of style from an ancestor; this is the 'cascade' of 'Cascading Style Sheets.' Not all elements inherit from their parents/ancestors (a links, notably, do not inherit the color property by default, though specifying color: inherit; in their css declaration can make them do so).

If you're asking about how to refer to the list of selectors that determine which elements are targeted by a particular rule, that is the 'selector', or 'selector expression.'

References:

edited Dec 14, 2013 at 16:43

answered Dec 14, 2013 at 16:37

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

Defining custom css styles for html tags

UPDATE:

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related