Building a new website and using the 960 grid system, with the following css:
960_24_col
text
rest
I'm also using my own style.css.
So, I am trying to apply the following css to my header 2 (h2)
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}
But it doesn't seem to apply. When I inspect the element in Chrome, some of the h2 elements are crossed out (line through it) in my style.css...when I copy the above code to say text.css..its works (but also applies to the other h1, h2, h3 etc)
Any of you css wizards go any ideas?
CSS files are read in order. So if one file is loaded which sets style on h1, and another file is loaded that also sets style on h1, the second one will overrule the first.
A nasty way to fix that is to add !important to the end of your style, ie:
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow !important;
padding-bottom: 30px;
margin-bottom: 15px;
}
There must be some other style also defined for h2 in style.css the strike-through in chrome inspector means that this style has been over ridden, try finding any other occurrences for h2 in style.css
Or if you want to keep both of style definitions due to some intentional changes you made try using !important after respective property which you don’t want to be over-ridden to ask browser to give top priority to this style instead of others
h2 {
font-size: 26px !important; /*same with every other property you want to give top priority*/
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}
Related
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
I am using the Bandsintown widget for one of my own sites (Not Wordpress, etc.) and can't figure out how to increase the line spacing between events. Is it even possible? Too keep inline with the overall formatting of the site, I'd like there to be a bit more space between each. Thanks
.bit-events a {
color: #39B082;
text-decoration: none;
}
.bit-events th,
.bit-events td {
padding: 0!important;
font-family: "font_1";
}
#bit-events th.bit-date {
width: 100px;
}
#bit-events th.bit-date,
#bit-events th.bit-venue,
#bit-events th.bit-location,
#bit-events th.bit-tickets {
color: #39B082;
font-size: 16px;
text-transform: uppercase;
height: 20px;
}
#bit-events td.bit-description-links,
#bit-events th.bit-description-links,
#bit-events {
color: #121212;
}
You likely want to add a relative line-height to your css:
CSS - Line Spacing
#bit-events * {
line-height: 2rem;
}
You can use > for direct descendants, * for all descendants of your container, or specify them individually https://stackoverflow.com/a/21410191/4541045
Otherwise, a border-width may be what you're looking for.
Here's an example of its usage http://www.w3schools.com/cssref/pr_border-width.asp
To find out the value to change and to edit a live copy, you can play with a browser's inspector tool.
Normally this is accessible through some menu, and may be available when right-clicking in a webpage
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
https://developer.chrome.com/devtools
I would think this was easy to find somewhere, but I haven't been able to. I don't want to use the blockquote class, but create a custom named one. Basically I want the same font and size, but not the border of the blockquote and a custom name.
Could anybody give me the Bootstrap CSS for blockquote?
Check out the source code and look for the blockquote tag.
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
There's lots more. CTRL + F will help you.
The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
Please look at the attached image, below:
This, I made up easily in Photoshop and is for the corporate identity on papers and such. However: I now need to create that for an email signature. Though.. I don't have a clue how to achieve the effect of having a square/rectangular background to the - well let's say - first letter of the sentence.
Since It should not cut off the text to the next row, I can't use a <p> tag.
I hope someone could help me! However, it's for an E-mail signature and all CSS must be inline. edit: And besides that: You can't use DIV's either.. Thank you very much!
You can use :first-letter
div:first-letter {
padding: 0 3px;
background: #f00;
}
Demo
Or a better one
div:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
Note: You can replace div with a p element too, but :first-letter will not work on inline elements.
Demo 2 (Using p tag)
As you wanted to do this with a span tag, you need to define it as inline-block; to make the :first-letter work.
Doing this with a span tag - Demo
span:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
span {
display:block
}