Say that my base stylesheet defines that when I have something like:
<h2>My heading</h2>
...
<h3>My other heading</h3>
the first heading will use font-size: 1.5em and the other one 1.3 em. What I'm trying to achieve is that when those heading have classes like this:
<h2 class="larger">My heading</h2>
...
<h3 class="larger">My other heading</h3>
both headings should be 20% larger than what they would have been without the classes. Is it possible to somehow achieve this using a single CSS rule, i.e.:
.larger {
/* what to put in here? */
}
or will I need to create rules for h1.larger, h2.larger, h3.larger etc. separately and duplicate the styling rules?
I dont believe this can be done in a single rule, at the simplest level, you could surely use:
h2.larger{
font-size:1.8em;
}
h3.larger{
font-size:1.56em;
}
Where the font size is 1.2x the original in both cases- although this is hard coded.
It doesn't work that way…
But you could add a children to each h and it will make what you want:
(explanation at the bottom)
HTML:
<h2>My heading</h2>
<h3>My other heading</h3>
<br>
<br>
<h2 class="larger">My heading</h2>
<h3 class="larger">My other heading</h3>
<br>
<br>
<h2><span class="larger">My heading</span></h2>
<h3><span class="larger">My other heading</span></h3>
CSS:
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}
.larger {
font-size: 130%;
}
Case 1: the size is applied as normal to the h's
Case 2: the size is applied to both h's disregarding their font-size initial definition.
Case 3: adding a child (in this case a span) will obbey the font-size of the parent as intended
Fiddle here: http://jsfiddle.net/z3ztr/
Related
I'm using 'component' approach to CSS as in SMACSS / ITCSS, I'm still scratching my head about styling sections with alternative (dark) background.
e.g. Stripe has regular (dark text on white) and alternative (white text on dark) sections.
As I understand there are options assuming HTML:
<section class="dark">
<h2>Title</h2>
<p>Text</p>
Action
</section>
Style in context of section, e.g.:
.dark h2, .dark p, .dark btn {
color: white;
}
But a) context styling is not recommended; b) where does one put the styles? (Harry Roberts argues that in component's file)
Create alternative-colored components with modifiers
And change the HTML, e.g.:
.title--alt-color {color: white;}
.text--alt-color {color: white; }
...
But a) it doesn't work when you don't know which components will go in there; b) more work of managing HTML.
Maybe there is a better way to handle this?
In a component based approach the ideal way to do this is to have a mapping ready between backgrounds and foreground colours in your style guide. It should be a one to one mapping that should apply to majority of your elements. Have CSS classes defined for the same.
Next have a wrapper container for all your components. Its purpose is to impart text colours to its wrapped components. So the approach is to have a background colour class for the section and then a foreground colour class for the contents that runs applies to wrapper but runs the style through all the contents.
Note: Specific colour overrides can always reside inside your components file for instance using a highlight on some text etc.
The library that is suggested in the comments does the exact same thing. There is a primary and secondary colour in the theme object. The primary applied to the section and secondary is passed on to the individual components as context. I suggest having it passed only to the components' wrapper.
A somewhat clever way to have classes defined is like
t-wrapper-[colorName]
Now this can be generic and colorName can come in as a context to your wrapper based on the background color
Hope this helps. Let me know if this answers what you need or you would need supporting snippets for the same.
What you're asking for is essentially to style a component within a section based on the section itself. Unfortunately this is impossible with CSS, as there is no parent selector in CSS. However, there is the inherit value, which allows you to style a component based on the rules defined by its parent - perfect for component-driven CSS.
In my opinion, the best way you can go about alternating background styling is to make use of the :nth-of-type pseudo-class on <section>:
section:nth-of-type(2n) {
background: #464646;
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Considering :nth-of-type makes use of math to target elements, you can access literally any combination of elements you would like:
// Style every second element, starting with the first element
section:nth-of-type(2n - 1)
// Style every third element, starting with the second element (2, 5, 8, etc.)
section:nth-of-type(3n + 2)
This way, it won't matter whether you're using a component-driven approach or not, as you'll be able to alternate the styling directly off of <section> itself.
Elements that inherit an attribute from internal stylesheets (such as <a> tag colour) will unfortunately still be styled based on the internal stylesheet, rather than rules defined by their parent.
You can get around this by either using context-styling:
section:nth-of-type(n) {
background: #464646;
color: #fff;
}
section:nth-of-type(n) a {
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Or alternatively (and preferably) making use of the inherit value to tell every <a> tag to inherit its color from its parent:
section {
background: #464646;
color: #fff;
}
a {
color: inherit;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
Hope this helps!
You can set alternating background styling using nth-child(odd) and nth-child(even) pseudo-classes on <section>:
body{
margin:0;
}
section{
padding:20px;
}
section h2{
margin:0;
}
section:nth-child(odd){
background:#f5f7f6;
color:#333;
}
section:nth-child(even){
background: #113343;
color: #fff;
}
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
<section>
<h2>Title</h2>
<p>Text</p>
Action
</section>
I am trying to change the background colour of PARAGRAPH 4 only. I want to leave Paragraph 2 alone (because it is after a H4). I have tried the not selector but can't seem to get the logic working right. Not wanting to use JavaScript, PHP or jQuery. Only pure CSS please.
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-title + .textwidget {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If the first child of .widget-wrap will only either be an h4.widget-title, or a p.textwidget (i.e. when the h4 is not present), simply use :first-child:
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-wrap > .textwidget:first-child {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If there any other elements may appear before the first p.textwidget absent an h4.widget-title, that will complicate things slightly. You would use :not() with a sibling selector in that case, but if there can be a variable number of elements, you won't be able to do this reliably.
check this out
.widget-wrap:nth-child(2) .textwidget {
background-color: green;
color: white;
}
Why you being not using different class name or id for the paragraph 4. that will be more simple and crystal clear. I would rather suggest you to use.
In current code as class names are same for parent div and P hence the color is changing for all not only for h4. sl please kindly use these.
Html
<div class="widget-wrap">
<p class="textwidget redcolor">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
CSS:
.widget-wrap .redcolor {
background-color: Red !important; /*use important if not works*/
}
so now all elements having class redcolor inside class widget wrap will be having background color red. you can use id or any other class name.
that will be more easier and best approach for than using the any other javascript etc.
It will add more css lines but that will not cause any harm to it.
If you have a div which has various elements inside it, what would be a good way to show relationships and hierarchy when it comes to writing the CSS rules for this HTML:
<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>
I'm wondering how to write and apply a style for the <p> element. This could be done in two ways:
.tweet-general-item-summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>
OR
.tweet-general-item .summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item summary">Some summary text here</p>
Which way would be better/scalable/good-practice and why? I have to be able to show some level of hierarchy/relationship in the CSS. I can't simply have a style of .summary by itself because it has no semantic meaning to anyone - the designers/devs need to know what kind of summary it is just from reading the CSS.
Have a look at the BEM Methodology:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://bem.info/method/
Your example would look like:
<div class="tweet">
<p class="tweet__summary"></p>
</div>
I realize that in the modern day, most people use CSS to perform styling, and will have CSS define what H2 looks like.
However, please imagine that I'm trying to make my text looks like it is the default appearance of <h2>, but have it on a line with other text.
Is it possible to do this in HTML4?
Alternatively, is it possible to emulate it using CSS?
Assume I am NOT setting a style on <h2> directly.
By default, all HTML headings (<h1> to <h5>) are displayed as block. This means a heading will be in a separate line if there is other elements surrounding it.
You can change that with CSS by applying display: inline to your heading. If you need it to keep some block behavior (like having a certain width, for example), you can use display: inline-block instead.
Give a try to that:
<!DOCTYPE html>
<html>
<body>
<style>
.h2{
font-size: x-large;
font-weight: bold;
display: inline;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p class="h2">This is heading 2</p>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
And you should disable your current styles applying to the current h2.
For example: color: black !important; (if it's defined)
You can make the h2 display inline with the following CSS:
h2 { display: inline; }
Demo
You could just use a <span> on the text in question and add an h2 class to the span.
Example on jsfiddle
.header2{
font-size: 120%;
}
The way to do it in HTML4 (which is what the question was primarily about) is to use two-cell table:
<table><tr valign=baseline><td><h2>Your heading</h2> <td>Other text</table>
Not many people would recommend this these days.
Note: The only way to ensure that the default rendering of h2 (which is browser-dependent, though tends to follow similar lines) is to refrain from using any CSS rule that could apply to an h2 element. I don’t see any particular reason to want to achieve that, though, perhaps on a page that discusses HTML rendering in browsers, or something similar.
I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.