(S)CSS architecture: alternative backgrounds styling - html

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>

Related

Change background color of specific section

I have an HTML home page and what I would like to change a section of a page to a different color, the issue i am facing is that i want the color to the entire page. Here is an example of what i want to achieve:
The code I tried here doesn't seem to change the entire page background color for the div tag
body {
background-color: coral;
}
<h1>The background-color Property</h1>
<div style="background-color:lightblue">
<p>The background color can be specified with a color name.</p>
</div>
First of all, your question is not clear, sorry. There is no such thing as "the entire page background color for the div tag".
I can take a guess though, and assume you mean that the background area for the div should be as wide as the viewport, i.e. extend into the margin of the page. In that case, the solution is as follows.
body {
background-color: coral;
}
/* This could be done inline, but using a class will be more efficient if there
are more of these divs on the screen */
div.highlight {
background-color:lightblue;
margin:0 -8px; padding:0 8px;
}
<h1>The background-color Property</h1>
<div class="highlight">
<p>The background color can be specified with a color name.</p>
</div>
that is very simple
you can put your element in a section with a specific id like this:
<section id='naturePart' >
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
and then write css for this section in one of external , inline or internal way like this.
external way :
create a file like style.css and link it in your html page
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
write this code in your style.css :
#naturePart{
background-color: lightblue;
}
in inline way :
<section id='naturePart' style="background-color: lightblue">
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
pay attention that use must use one of this way and inline way has upper periority.
if you use html4 or latest version you can use div insted of section.
best regard

Class inheritance with specific CSS naming

I can't really remember why this structure within CSS is used?:
h2.class-name
Seems that you could just write out .class-name and just give that the class for the h2:
<h2 class="class-name">Title thing</h2>
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
<div class="class-name">
<h2>Title thing</h2>
</div>
I guess I'm just "fuzzy" on what the reasoning would be for that particualr CSS structure.
h2.class-name means, select all the <h2> elements that have the class 'class-name', consider the following:
p.red {
background-color: red;
color: white;
}
h2.red {
color: red;
text-decoration: underline;
}
<p class="red">
RED PARAGRAPH
</p>
<h2 class="red">RED HEADING 2</h2>
Notice that both the <p> and the <h2> have the class 'red', but its implementation is different for each element, so if a <p> has the class 'red', style it this way, and if an <h2> has the class 'red' style it that way.
There are lots of reasons someone might use that construct. The ones that spring to mind are:
To distinguish between members of the class-name class that are h2 elements and members of it which are some other kind of element.
To control specificity as h2.class-name is more specific than .class-name.
To make it clear to people reading the CSS what elements that class is supposed to be applied to
Unless the reason for it is if you cannot edit the HTML. So this would be it, right?:
No. That would require the use of the child or descendant combinators.
.class-name h2 {}

Include style one CSS class to another

Is that possible to include styles of one css class to another? I mean SASS #extends pretty much does a similar thing, but it also styles extended class, which is not required. See example:
<style>
.myclass1{
background:red;
}
.myclass2{
color:blue;
#extend .myclass1;
}
</style>
<div>
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
</div>
<div>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
</div>
Posted example is inspired by article of CSS-tricks Web, but here everything is very confusing it is not working as it should. myclass2 should give myclass1 according to article. However, it is giving strange output. Am I heading in the right direction? or is the article wrong?
Update:
Question is only about the actual concept behind #extend of SAAS, and including other CSS class to another, and what is the difference?
CSS without pre-processors (SASS, LESS etc.):
.myclass1{
background:red;
}
.myclass2{
color:blue;
}
<div>
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p>
</div>
<div>
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p>
</div>
You can add multiple classes to the same element.
You can use a comma to match multiple selectors:
.myclass1, .myclass2 {
background: red;
}
.myclass2 {
color: blue;
}
<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
SASS is a CSS preprocessor which basically means the SASS syntax gets compiled into plain CSS. The features that SASS offers such as #extend as well as establishing variables with the $ syntax etc. are only possible using SASS (not possible with CSS3)
That being said, you would be able to accomplish the result of the #extend feature of SASS in regular CSS simply by chaining classes together:
.blue, .green {
<your css here>
}

How can I prevent hardcoding of some attributes in HTML?

I have following statement:
<font color="#2B547E">
Now I don't want to hard code it in my html; instead I want to apply a css class. I don't want this color for all fonts in my page, only for a specific part. I tried the following:
<font class="xyz" >
But it's not working. I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.
How can I move that hard coded value to css?
If you can add a CSS class for this <font> element, you should be able to switch over to using a <span>:
HTML:
<span class="coloredText">text</span>
CSS:
.coloredText {
display: inline; /* will stop spans creating a new line */
color: #2B547E;
}
If you still find the span creates a line break, you can change the rule to
display: inline !important; - this will increase the precendence of this rule so it will take effect. I'm not sure if the use of !important is frowned upon by CSS-pedants, but it might help.
Should be:
HTML:
<font class="xyz">...</font> <!-- or any other tag -->
CSS:
font.xyz {color:#2B547E;} /* or just .xyz */
See also: Class and ID Selectors
First off, use a reset css to reset all your styles to a default of your choice.
I use this one, but there are others around : http://meyerweb.com/eric/tools/css/reset/
Then, write your css and use targeting to apply the styles to different elements
This link explains CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/
<link rel='stylesheet' href='reset.css'>
<style>
#top p {
color: blue;
}
#bottom p {
color: red;
}
.black {
background: #000;
}
</style>
<div id='top'>
<p>This text will be blue</p>
<span class='black'>I have a black background</span>
<div>
<div id='bottom'>
<p>This text will be red</p>
<span class='black'>I have a black background too!</span>
<div>
You can use a combination like this:
<div class="xyz">Your content goes here...</div>
and the CSS can be:
.xyz {display: inline; color: #2B547E;}
This will solve the problem of new line and also give the desired color.
HTML
<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>
CSS
.xyz {
color: #66CD00; }
View a live example
I'm sort of lost as to what you can and can't do here ;) but I'll put this in incase
font[color="#2B547E"] {color: red;}
<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>
Unfortunately IE7 has problems with this but it does target if you use font[color] {color: red;} - This will of course not enable you to specifically target by existing colors if that's what you're after - but it will target them all to bring them in line if that's all you require, a mixture of the two might provide a decent enough fallback?
Your problem might be a case of CSS specificity, i cant tell from the details provided. if your style for spans is defined through an ID such as
#somediv span{ display:block}
That css will overwrite something like
span.myspan{display:inline}
because the ID style is more specific, you can solve this a few ways, first you can set the style inline in the html.
<span style"display:inline; color:#2b547e;">some text</span>
or you can make a class and use a more specific style by including the parent ID in the css
#somediv span.myclass{display:inline}
Be more specific with your selector, instead of just div, use div.class, or div.id
<div class="Foo">
Bar
</div>
div.Foo {
color:#2B547E;
margin:0; /* overriding the predefined styles in other sheet */
padding:0; /* overriding the predefined styles in other sheet */
}
replace margin / padding with whatever is causing the new line.
Also I'd always recommend not using style tags; such as Font. Your Html should use declarative only tags. Not to mention the Font tag is deprecated.

HTML element aside from headers <h1><h2>, ect

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.