I'm trying to decrease my font size for a h4 header and change some other things but the h4 class, .awpcp-listing-title doesn't seem to function as a selector.
Tried several options, including important, like the code I have here:
.awpcp-listing-title {
font-size: 10px;
margin-right: 50px;
padding: 15px;
}
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">Scarf</h4>
<div class="awpcp-listing-excerpt-content">Grey scarf</div>
</div>
<div class="awpcp-listing-excerpt-extra">
05/10/2019<br/>
.awpcp-listing-title {font-size: 10px !important;}
the !important is very "important" to make sure your CSS will be applied.
.awpcp-listing-title a
{
font-size: 10px!important;
margin-right: 50px;
padding:15px;
}
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">Scarf</h4>
<div class="awpcp-listing-excerpt-content">Grey scarf</div>
</div>
<div class="awpcp-listing-excerpt-extra">
05/10/2019<br/>
Check and try this code
You really should not use !important as all the other answers suggest - you simply need to find the right selector and it is is NOT the h4 - its the a within it.
Simply put - browers render h4's with default styling, so first - clear that using the h4 element as the selector - then target its child - the a element.
I have styled it red to show that it is targetted.
h4 {
margin: 0;
padding: 0;
}
.awpcp-listing-title a {
font-size: 10px;
margin-right: 50px;
padding 15px;
color: red;
}
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">
Scarf
</h4>
<div class="awpcp-listing-excerpt-content">Grey scarf</div>
</div>
<div class="awpcp-listing-excerpt-extra">
05/10/2019<br/>
h4.awpcp-listing-title{
font-size:20px !important;
}
<div class="awpcp-listing-excerpt-inner">
<h4 class="awpcp-listing-title">Scarf</h4>
<div class="awpcp-listing-excerpt-content">Grey scarf</div>
</div>
<div class="awpcp-listing-excerpt-extra">
05/10/2019<br/>
</div>
remove style="w" incorrect stansted code
The reason behind your code is not working is that you are using anchor tag and your css has no code to change that font-size.
.awpcp-listing-title a{
font-size: 10px;
margin-right: 50px;
padding : 15px;
}
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">Scarf</h4>
<div class="awpcp-listing-excerpt-content">Grey scarf</div>
</div>
<div class="awpcp-listing-excerpt-extra">
05/10/2019<br/>
I have modified the CSS code slightly. No need to include the URL selector.
h4.awpcp-listing-title {
font-size: 10px!important;
margin-right: 50px;
padding: 15px;
}
Related
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I can't seem to figure out why my style attributes aren't having an effect on my divs. The only one that seems to work is the body tag.
It's for a course I'm currently doing. I feel like I've tried everything but can't get it to work. I'm pretty sure it's something minor that I'm missing but it is really frustrating me.
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
}
PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
}
NavBar {
background: #FD0C10;
}
Header {
text-align: center;
margin-bottom: 20px;
}
Subheading {
text-align: center;
}
Content {}
Footer {}
body>
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner"></div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->
</body>
Have the css class definition like .PageBanner which will work like you expected PageBanner refers to a tag with name PageBanner. And #PageBanner refers to an element which has id PageBanner
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
background: color: red;
}
.PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
background:red;
}
.NavBar {
background: #FD0C10;
}
.Header {
text-align: center;
margin-bottom: 20px;
}
.Subheading {
text-align: center;
}
.Content {}
.Footer {}
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner">
</div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->
You need to put a CSS Selector
to make your style work.
Selector Example Example description
.class .Header Selects all elements with class="Header"
<div class="Header">
#id #firstname Selects the element with id="firstname"
<input id="firstname">
Please do read this link for more info about CSS Selector Reference.
https://www.w3schools.com/cssref/css_selectors.asp
The answer has been given. But make sure to pay close attention to how you write your CSS because this case you were trying to define a class but was missing the dot .class but also you can do ids which are defined #class. You had a good approach you were just missing the signifying selector.
I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/eL7rwLx3/45/
Here's my HTML:
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
</div>
Here's my CSS:
.wrapper-promo {
background-color: #e2e3e4;
margin: 10px 0;
width: 100%;
}
.title-top {
background-color: #2251a4;
height: 40px;
line-height: 40px;
}
.title-top-cell {
display: table-cell;
vertical-align: middle;
}
.promo-content {
margin: 20px;
padding: 0 0 10px 0;
}
h2 {
font-family:Arial,sans-serif;
font-size:19px;
font-weight: bold;
color:#fff;
margin: 10px 0 -10px 0;
text-transform:none;
}
h2.block-title {
font-size:22px;
margin: 0;
text-align: center;
text-transform:none;
}
.promo-content p {
font-family: Arial,sans-serif;
font-size: 14px;
color: #232323;
line-height: 20px;
text-align: center;
}
I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.
In doing so, the entire element is clickable, and you don't have to worry about wrapping the a element around any div or block-level elements:
Updated Example
.wrapper-promo {
position: relative;
}
.wrapper-promo > a {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="wrapper-promo">
<div class="title-top"><!-- ... --></div>
<div class="promo-content"><!-- ... --></div>
</div>
With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements.
http://jsfiddle.net/Nillervision/761tubkc/
<a class="blockLink" href="http://www.microsoft.com">
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less
</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p>
<img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
</p>
</div>
</div>
</a>
Instead of a div, just use an a with display:block;.
It will behave as a block element in your flow, and you can set an href etc.
You may need to override its color, text-decoration, and :visited CSS.
The alternative here is to use a click event with Javascript - blech.
Code request edit:
All you need to do is change the style of .wrapper-promo:
.wrapper-promo {
background-color: #e2e3e4;
display:block;
margin: 10px 0;
text-decoration: none;
width: 100%;
}
then change it to an a:
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>
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>
I am trying to setup a horizontal bar with 3 clickable titles. Before being clicked they are one color but when selected I'm trying to get that section to change color and display a specific paragraph below the bar.
Here is a jfiddle of what I currently have..
<div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
<h5 style="padding:3% 3% 3% 0px; display:inline-block;">Section<br>One</h5>
<h5 style="padding:3% 4%; display:inline-block; border-left:10px solid; border-right:10px solid;">Section<br> Two</h5>
<h5 style="padding:3% 0px 3% 3%; display:inline-block;">Section<br> Three</h5>
http://jsfiddle.net/9g9ybepy/1/
From what I have tried to gather online I might need to use a function of clickable(), but I'm not sure.
Hopefully there is a way to do this, thanks in advance.
You don't need Javascript, you can do this with css :target
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab
storytelling_tabs {
width: 100%;
background: #44c5e1;
text-align: center;
}
storytelling_tabs h5 {
color: #fff;
font-size: 0.9em;
}
.tab .showMe {
display: none;
}
.tab .showMe:target {
display: block;
}
<div class="tab">
<div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
Section One
Section Two
Section Three
</div>
<div class="showMe" id="link1">
<p>Patagraph1</p>
</div>
<div class="showMe" id="link2">
<p>Patagraph2</p>
</div>
<div class="showMe" id="link3">
<p>Patagraph3</p>
</div>
</div>
To do that you need to use JavaScript. You need to create a function and "tell" to the html that your page will execute that function when your h5 is clicked.
Here the html:
<h5 style="padding:3% 3% 3% 0px; display:inline-block;" onClick="myFunction(this.id, idParagraph)">Section<br>One</h5>
Here is JavaScript function:
function sectionClick(idSection, idParagraph){
document.getElementById(idSection).css.backgroundColor = "blue";
document.getElementById(idParagraph).css.display = "block";
}