Using Bootstrap4, have set up a div with the class of greenfooter (that takes care ofthe background color and padding), inside I created a container with four columns.
I set up the css to turn the H5 a lighter green color, and set the a tag to be white and lighter green/no text decoration when hovered.
The css code for the color change isn't working, and I think my css is incorrect, can anybody see where I went wrong?
html
<div class="w-100 g-py-30 greenfooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h5>McDowell Technical<br>
Community College</h5>
<p>54 College Drive<br>
Marion, NC 28752</p>
<p>
Get Directions </p>
<h5>call: 828-652-6021 </h5>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
css
.greenfooter {
background-color: #5C8627;
color: white;
}
.greenfooter.container.row.col-md-3 h5 {
color: #C8E72F;
}
.greenfooter.container.row.col-md-3 a {
color: #ffffff;
}
.greenfooter.container.row.col-md-3 a:hover {
color: #C8E72F;
text-decoration: none;
}
container is child of greenfooter class element so, a space is needed and so on for row, col-md-3 and h5
.greenfooter {
background-color: #5C8627;
color: white;
}
.greenfooter .container.row.col-md-3 h5 {
color: #C8E72F;
}
.greenfooter .container .row .col-md-3 a {
color: #ffffff;
}
.greenfooter .container .row .col-md-3 a:hover {
color: #C8E72F;
text-decoration: none;
}
Related
I was reading MDN docs about inherit keyword and the example there is very confusing to me can anyone PLEASE explain to me the exact example on MDN docs about excluding selected elements from the rule. Thank you.
Examples
Exclude selected elements from a rule
/* Make second-level headers green */
h2 { color: green; }
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }
In this example, the h2 elements inside the sidebar might be different colors. For example, if one of them were the child of a div matched by the rule ...
div#current { color: blue; }
... it would be blue.
It is my first time asking question so please don't mind my formatting.
Let's take it step by step in this snippet:
/* Make second-level headers green */
h2 {
color: green;
}
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 {
color: inherit;
}
div#current {
color: blue;
}
<h2>this is an h2 outside the sidebar so it should have the color set for h2 in the style sheet which is green.</h2>
<div id="sidebar">
<h2>This is an h2 inside the sidebar so it has inherited its parent's color - which in this example is the default which is black</h2>
<div id="current">
<h2>This is an h2 inside a div. The div has id current and color blue. This h2 has inherited its parent's color which is blue.</div>
</div>
Are you looking for this example?
h2 {
color: green;
}
.sidebar h2 {
color: inherit;
}
.sidebar {
color: blue;
}
.red {
color: red;
}
<h2>This is Green Heading</h2>
<div class="sidebar">
<h2>This is Blue Heading</h2>
<div class="red">
<h2>This is Red Heading</h2>
</div>
</div>
the first h2 element will be green, because it has a css rule.
The second h2 for example became black because he has the rule inherit so he get the color of his parent.
If sidebar has another parent with color declared, h2 get this color
h2 {
color: green
}
div#current {
color: blue;
}
.sidebar h2 {
color: inherit
}
<h2> Green </h2>
<div class="sidebar">
<h2>Default color</h2>
</div>
<div id="current">
<div class="sidebar">
<h2>Default color</h2>
</div>
</div>
How do I move these buttons to the bottom, but not like bottom of the page, bottom, but just a bit, not too much. Here's a screenshot:
I want it to be a bit under the text while staying in that blue block. I'm new to HTML and CSS and I've been trying to move this damn thing for days but it's just not going.
a {
background-color: #00ccff;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
background-color: #555;
}
a:active {
background-color: black;
}
a:visited {
background-color: #ccc;
}
<div class="container">
<img src="https://via.placeholder.com/150" class="image">
<div class="overlay">
<div class="text"> Random text <br> Button1
Button2
</br>
</div>
</div>
</div>
you should to add "display" property to your "a" tag
a {display: inline-flex}
or:
a {display: inline-block}
you can see the example in this link
enter link description here
Try with any one of css properties mentioned below to button
Margin-top
Margin - bottom
padding-top
padding - bottom
I would like to force a specific attribute on children elements, from the level of the parent. I thought that using !important would be enough, but it is not taken into account on children elements:
.up {
color: red !important;
}
.down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Is it possible to cascade !important down to the children elements?
You can do the following:
.up > * {
color: red !important;
}
This will affect all direct child elements. (You could probably erase the !important in this case, but that depends on the order of the rules and on theselector specifity of the rules for the child elements)
If you want to apply it to ALL children (not just the direct ones), use it without the >, like
.up * {
color: red !important;
}
.down {
color: blue;
}
.up > * {
color: red;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Please try this
.up>.down {
color: red;
}
I hope this is the solution that what you looking for.
.up > .down {
color: red;
}
.down {
color: blue;
}
If u add the html like below the code and ur css will be correct..
HTML:
<div class="up">
this text should be blue
<div class="down">
this text should be red
</div>
</div>
Or Do u want the reverse color then, change the css code
css
.up {
color: blue !important;
}
.down {
color: red;
}
<div class="up myclass">
<div class="down">
this text should be red
</div>
</div>
.up {
color: red !important;
}
.down {
color: blue;
}
.myclass .down {color:initial; color:inherit;}
Whenever you have this kind of situation if you are working other person's code then never edit the initial code because you never know what that code is working for. In this situation you need to do is create your own class and edit the children with your own class.
If you can change the CSS anyway, you can do this without needing !important.
.up {
color: red;
}
:not(.up) > .down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
<div class="down">
this text should be blue
</div>
Actual webpage
I'm trying to display code snippets on my webpage. I'm a CSS novice and having trouble creating a dark background on which to display my code snippets.
When I create a class called "test" (which should override all other background specifications, right?) and assign it a color property of blue and a background property of black, the color blue shows up within pre tags but the background remains the default color.
When I switch to span tags and assign the class there instead, both properties work as I command. But I don't want to use span because my instructors say non-semantic tags are bad practice. Something tells me that there's some inherent property of pre tags that I need to override somehow.
Any ideas? I can post the code here if that's proper/necessary.
Edit: I posted an abbreviated version of the code here. I tested it, and got the same issue here. Hopefully with less code it will be easier to pinpoint the problem.
Here's the HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
Now the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
The more specific the rule, the more likely it will be to override a parent class or id. Give this one a shot...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
have you tried with background-color property of pre tag?
Please check my codepen link. http://codepen.io/anon/pen/gaydao
HTML:
<body>
<p>
<pre>test</pre>
</p>
</body>
CSS:
.test {
color: red;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
border: 1px solid #000;
height: 50px;
background-color:#DDFFDD;
padding: 10px 0 0 10px;
}
you have to use !important on your class because it's already defined the color property in another class...
.code{
background-color: #000 !important;
}
.box{
width: 250px;
height: 20xp;
background-color: red;
display: inline-block;
margin: 5px;
}
.code{
background-color: #000 !important;
}
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box no_code"> </div>
Hi I'm trying to find a way to skip the first element that are dynamically generated (div class="Title") within the (div class="MyList") class. I've tried with :first-child and :first-of-type but no luck. Basically, I'm trying to remove the double border for the first Title element. Your help would be greatly appreciated!
HTML
<div class="MyList">
<div class="Title">
<h3></h3>
</div>
<div class="List"></div>
<div class="List"></div>
<div class="List"></div>
<div class="List"></div>
<div class="Title">
<h3></h3>
</div>
<div class="List"></div>
<div class="List"></div>
</div>
CSS
.MyList > :first-child{
border-top:none;
}
.Title {
text-align: center;
border-left-width:15px;
border-bottom-width:5px;
border-top: 3px solid black;
padding-top: 1px;
}
.Title:before {
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
.Title h3 { padding: 20px;}
Check out this fiddle: http://jsfiddle.net/j2QLY/
You need to also override the :before code you are applying to the Title element:
.MyList > :first-child {
border-top:none;
}
.MyList > :first-child:before {
border-top: none;
}