Put simply, I have a page with these two styles:
* {
color: black;
}
div.error {
color: red
}
And a page structure like:
<html>
...
<div class="error">
<div class="row form">
<div class="column">
Error text.
</div>
</div>
</div>
...
</html>
You would expect "Error text" to be red, wouldn't you. But it is, in fact, rendered black in all browsers. Is this the expected behavior?
My second question, is contingent on whether this is the expected behavior. if it is, then why would a designer ever color every element on his whole website with "black" or some other color if that means it cannot be overridden with inheritance in specific places?
--EDIT--
The question is asked in the context of where you'd want a default color to be placed across the whole website, but wherever you want, you could say "this whole section inherits color #ffeeff". For example, a special form, contained by a divider of class "form." You don't want to label every sub-element of form with a special class like "white-text" to color everything white. You just want to set the "form" class's color and have it propagate to sub-elements.
* is more specific than agent stylesheets (the default stylesheets that come with the browser), and inherited properties are nothing more than something like this:
div {
/* ... */
color: inherit;
/* ... */
}
In the agent stylesheet, so your * with color: black is more specific than agent:div with color: inherit, thus it wins.
It is the expected behavior, for the text to be red, you want to specify:
div.column {
/* ... */
color:red;
/* ... */
}
Do check: (why) is the CSS star selector considered harmful? as suggested by 4castle.
just do that instead:
<style>
* {
color: black;
}
div.error {
color: red
}
</style>
<div>
<div class="row">
<div class="column error">
Error text.
</div>
</div>
</div>
Related
Brand new to coding, just started the META Back-End Certificate on Coursera, and I am having trouble with one of the quizzes. We are provided the HTML, and then we have to write CSS to meet certain criteria. I have listed the Prompt, HTML, CSS, and errors below:
Prompt:
"
Open the styles.css file.
Add a CSS rule for the body element that sets the background color to #E0E0E2.
Add a CSS rule for the h1 element that sets the text color to: #721817.
Add a CSS rule for the h2 element that sets the text color to: #721817.
Add a CSS rule for the center-text CSS class that aligns the text to center.
Add a CSS rule for the HTML element with the id logo. Set its left and right margins to auto and changes its display to a block element.
Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.
Add a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em."
HTML Code that was provided for the quiz:
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="logo.png" id="logo">
</div>
<div class="center-text">
<h1>Our Menu</h1>
<h2>Falafel <span>NEW</span></h2>
<p>Chickpea, herbs, spices.</p>
<h2>Pasta Salad</h2>
<p>Pasta, vegetables, mozzarella.</p>
<h2>Fried Calamari</h2>
<p>Squid, buttermilk.</p>
</div>
<div class="center-text">
<p id="copyright">
Copyright Little Lemon
</p>
</div>
</body>
</html>
"
CSS code that I wrote:
body {
background-color: #E0E0E2;
}
h1 {
color: #721817;
}
h2 {
color: #721817;
}
.center-text{
text-align: center;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
span {
color: #fa9f42;
font-size: 0.75em;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
}
When I submit, the autograder on Coursera is returning the two error messages:
"Failed - ✗ The 'NEW' labels within tags should have a color of '#fa9f42' (+ 1 related test)"
"Failed - ✗ The element with the ID 'copyright' should have a font-size of 0.75em"
I am not sure why these two tests are coming up as failed, as it appears that the webpage view reflects that the 'copyright' font size is correct, and that the 'NEW' labels within do in fact have that color. Any ideas why this is coming up as wrong?
Thanks anyone and everyone!
The second to last prompt asks to modify span elements that are children of h2 elements, however, your code modifies all span elements.
To fix this, change
span {
color: #fa9f42;
font-size: 0.75em;
}
to
h2 > span {
color: #fa9f42;
font-size: 0.75em;
}
This small change requires all spans to be children of an h2 element in order to be modified, thus, fulfilling the request of the second to last prompt.
I am designing a basic news-ish blog. Let's say on my news blog I have about 10 categories, and each of those categories will have a label that will appear to the top right of the card image. Now each label will have it's own specific identifying color. So for example, the video label will be red, the lifestyle label will be green, programming will be orange... etc.
The code I have on the bottom works, but my problem with it is that it is reusing the same 10 lines of css, with the only changing factor being the label color.
Is there a more efficient way of doing this?
.article-tag-news{
...
background-color: #ff8fd2;
...
}
.article-tag-games{
...
background-color: #f4f4f4;
...
}
.article-tag-videos{
...
background-color: #123456;
...
}
I would use a general class for the main css for the labels .article-tag and add the color with an new class tag .news etc.
.article-tag{
... //all the css applied to all the tags
}
.news{ //or .article-tag.news depending on your code
background-color: red;
}
And in your HTML use
<label class="article-tag news"></label>
You can use a class for all tagged articles:
.article-tag-all{
...
}
.article-tag-news{
background-color: #ff8fd2;
}
And use it like:
<article class="article-tag-all article-tag-news"></article>
Note: I am on my phone right now, formatting would be appreciated.
While keeping your current markup, styles common to all articles can be grouped in a rule with an attribute selector like:
[class="article-tag-"] {
/* common styles */
}
.article-tag-particular {
background-color: salmon;
}
My 2¢: problem with <label class="article-tag news"></label> is that from now you can't style the .news class anywhere else OR you can't style it independently/must always style .something-something.news {}.
I have a xhtml page and i am trying to override the element.style.
source page view when i inspect
I had tried to apply my own CSS but it didn't work at all.
I have search through the similar question that i face but no one is working for me.
.element .style {
text-align: center;
background-color: green;
}
Anyone have any idea how can i apply my own CSS so that i could override this style.element?
<h:panelGrid id ="cibBulk" styleClass="interfaceDashboard" >
<h:outputText style="text-align: center;background-color: green;" styleClass= "interfaceTransactionTitle" value="CIB BULK UPLOAD TO HOST" />
<..../>
</h:panelGrid>
The output of my screen page (the background color not fit at all) would not be what i expected for as the screen attached.
Output screen image
That is inline CSS style which is used to apply a unique style to a single HTML element.They come from the style="" attribute that sets element.style.someProperty.
For example :
<h1 style="color:blue;">Blue Heading</h1>
This will set heading to color blue. If you inspect then you will see like this:
Like in your snapshot if you want to change the style, you can put style attribute in tbody. Learn more here.
div{
background-color: green;
}
.element.style {
text-align: center;
color: #fff;
}
<div>
<span class="element style">Hello</span>
</div>
I'm building some sort of framework where the content of the page can be edited with ContentTools. A requirement of ContentTools is that the regions must be parents.
If you try this:
<h1 data-editable data-name="heading">Content</h1>
It wont work as a region has to contain editable block level elements. A way around this is to wrap the tag like so:
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
But I just want to make the text editable, so I automatically wrapped the inner elements in a div. This works but it affects the styles.
Is there a way to make a div 'transparent', so it will inherit all styles?
I tried the following code.
To be clear: In this example I don't write the h1 css, so i have no influence over which styles are used.
$("[data-editable]").wrapInner("<div class='innerWrap'></div>");
/* example h1 css, could be anything */
body > h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
As you can see some things work. But things like a border will double.
It has to be no difference with or without the innerWrap.
Is it possible to do this with css? It has to work on every css property.
I think you need to wrap the h1 with a div not div with h1.
for eg. .wrapInner() will produce something like
<h1 data-editable="" data-name="heading">
<div class="innerWrap">Content</div>
</h1>
But what you want is
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
So please try with .wrap() instead of .wrapInner()
$("[data-editable]").wrap("<div class='innerWrap'></div>");
h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
.innerWrap{
all: inherit; /* remove it*/
}
As a default behaviour, if you not specify css props for ".innerWrap" it will look same as parent only
The ability to make an individual element editable standalone as opposed to as part of a collection (e.g in a region) is currently being worked on: https://github.com/GetmeUK/ContentTools/issues/79
There is however a short-term imperfect approach you could try, first change you're HTML as follows:
<h1 data-editable data-name="heading">
<span data-inline data-ce-tag="h1">Content</span>
</h1>
This will make the h1 tag the region and tell ContentTools/Edit to treat the inner span element as a h1 (text) element (thanks to the data-ce-tag).
But the next problem is that if the user hit's return you'll end up with a new paragraph tag inside of your h1 - which we don't want. This is where the data-inline attribute comes in, we need to listen for mount events and if the element mounted has the data-inline attribute we'll modify its behaviour so it can't do certain things which might produce undesirable events:
ContentEdit.Root.get().bind('mount', function(elem) {
// We're only interested in elements that are marked as inline
if (elem.attr('data-inline') === undefined) {
return;
}
// Change the default behaviour of the element
elem.can('drag', false);
elem.can('drop', false);
elem.can('remove', false);
elem.can('spawn', false);
});
You can find out more about modifying behaviours here, along with their current limitations here.
I have this CSS class
.background-color-blue {
background-color: #00C0FF;
}
and I want to be able to use it on some elements if needed.
I now it is not very semantic, but it is used for HTML template that is meant to be easy to use, small in size, and universal.
I want to be able to use it on elements like some panels, sidebars, modals, top-bar menu , or whatever I want
of course it works, but only for divs that do not have background-color already specified.
in this case:
<div class="modal background-color-blue"></div>
.modal has already specified bg color to #fff. now it does not work - it stays white.
I have found two solutions for that:
.background-color-blue {
background-color: #00C0FF !important;
}
and
div.background-color-blue {
background-color: #00C0FF;
}
I am not sure about these... which solution is better? Or is there any other solution that would work better?
I think this method:
.modal.background-color-blue {
background-color: #00C0FF;
}
is not good since I would have to do it with any similar element.
and
<div class="modal">
<div class="background-color-blue">
</div>
</div>
also isn't good since modal already has some padding.
Just use !important it will help to override
.background-color-blue {
background-color: #00C0FF !important;
}
Take a look at this : when-using-important-is-the-right-choice
If you think that modal will be able to have different colors, i guess you'd like this (ITCSS - BEM inspired). This will help you to stay at a low specificity rate, preventing you to have some problems with future classes or have to overwrite them.
Exemple here :
http://codepen.io/AxelCardinaels/pen/ZGVKzp
HTML :
<div class="container">
<div class="modal modal--grey">
<h1 class="modal__title"> Modal Title</h1>
<p class="modal__text">Hello this is the content of the modal !</p>
</div>
</div>
CSS :
/*Base Class */
.modal{
width:40%;
margin:0px auto;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
/*Attribute classes for the modal, just make a choice in your HTML ! */
.modal--grey{
background:rgb(220,220,220);
border:1px solid rgb(200,200,200);
}
.modal--blue{
background:rgb(65,105,225);
border:1px solid rgb(58,95,205);
}
The proper usage is
! important
Normally it should have been blue background. Perhaps something else that is preventing the elements of blue.
But don't forget that; the last !important taken into account.