I am trying to add padding-right to a code. Inspite of trying I could not get it done (even tried margin-right).
.widget-title {
color: #454545;
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
padding-right: 20px !important; /*First tried it without !important but it did not worked in both the cases.*/
text-transform: uppercase;
}
Here is the markup,
<li id="categories-2" class="widget-container widget_categories"><h3 class="widget-title">Categories</h3> <ul>
Please help me out how can I do it.
Put your <h3> tags on display:block;. Once you have a block element (layer or div/span) you can add padding to it.
On a side note: there's no added value for SEO with h3 tags inside a ul element. You should use <span class="widget-title">my title</span>. Then you don't need display: block;.
EDIT: Since I find this interesting, I went to look for prove to my previous statement about SEO added value:
http://www.seobythesea.com/2010/05/google-defines-semantic-closeness-as-a-ranking-signal/ (see: HTML Formatting used to Determine Semantic Structures) where they seem to claim the opposite. But just imagine someone looking for "Categories backpack" targeting the h3 and a keyword inside the ul. People don't search like that imho.
It makes sense when people find your content with "high sierra Backpack". So the h3 doesn't add value in search terms so to speak and is more of a visual indicator in your case.
Related
For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/
I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.
How I came across this problem:
I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example:
h1 span {
position: relative;
top: -2px;
}
This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.
This isn't possible, but you could do something like
a {
display: block;
border-bottom: 1px solid transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
display: inline-block;
}
This works.
I have the following code
<div class="subNav">
Work Experience
</div>
I have an external style sheet applying the effects to both .subNav and .current. I am using the style .current to overwrite the style applied on .subNav (using it to show what page the user is on, the 4em size is used to test the code).
CSS:
.subNav a, .subNav a:after{
font: normal normal 600 0.75em 'Lato', sans-serif;
margin: 0px 5px;
display: inline-block;
color: #FFFFFF;
}
.current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
Basically, its ignoring .current completely. I have tried putting direct code to change various style properties (such as colour, etc) in the link code directly and it works, but doesn't change with the style.
The HTML style attribute is for writing inline CSS that will be applied directly to an HTML element, and only that element.
Proper Usage of The Style Attribute
<div class="subNav">
Work Experience
</div>
There's no way to attach an existing CSS rule set specifically to a single HTML element, as CSS is meant to come second and be applied on top of pre-existing HTML.
One way many developers work around this, in your scenario where you may not be sure exactly where you want your styles applied because the target can change, is to use a class name. This will apply your styles to any element with the class, as well as any elements in the future you put the class on, at any time the class is present.
Your CSS is already correct if you want to take this approach. Next all you have to do is add the class attribute to any HTML element you'd like to see those styles applied to. So in your case where you're trying to style the current link, instead of making sure the current link ends up with style="current", instead make sure the current link ends up with class="current" on it.
If you're worried about the styles in .current being applied to other elements that have that class name on them, you could change your CSS to only target elements with the class name of "current" that are inside of your subNav like in the code shown below.
.subNav .current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
I feel obligated to point out though however that if you're having this issue it's merely a symptom of a different problem, as you should be responsibly naming things not to conflict with one another.
On a side note, a couple other items I noticed with your code-
If your <div> with a class of .subNav is the only "subNav" on the page, you should be an id not class
May be worth while exploring how the <nav> tag works, and when/where it should be used instead of that <div> all together
You shouldn't leave that empty title attribute on your <a> tag. Having an empty title attribute is worse than not having one at all. I certainly recommend you remedy the issue by filling it in with some useful information rather than just remove it though.
you write style instead of class
<div class="subNav">
Work Experience
</div>
You can't apply CSS class inside style property. Inline styles only you can write using style property. If you want to apply from external either you can use class or ID(if you want unique).
Work Experience
or
Work Experience
If you use ID, you need to write your CSS like below.
#current {
font: normal normal 900 4em 'Lato', sans-serif;
margin: 10px 0px;
}
I'd like some (not all) of my H2 headlines to have a left margin of 10px compared to the "regular" H2 lines.
I tried the below code which works but was wondering if there's a better/cleaner way to achieve this. Thanks
HTML
<h2 class ="marginleft10px">Blablabla</h2>
CSS
h2 {
color: #2970A2;
font-weight: 300;
font-size: 18px;
}
.marginleft10px {
margin-left: 10px;
}
Is there a rule that dictates which h2s you want to have a 10px margin? For example are they all child element of some type of element? If its totally random then what you are doing would be a good solution. Otherwise there is probably a better one. Could you post some of your HTML to give us context?
In one of my recent projects, I noticed that certain styles occur in the same combination repeatedly. According to the DRY principle, I should combine these styles. Regarding a good CSS style, what option is better/the best?
Option 1
Creating a class that contains these styles and simply add it in the HTML to the according elements.
Example
In the HTML:
Link
or
<ul class="myClass">
<li>Item</li>
<ul>
In the CSS:
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
Option 2
Simply combining all elements that need that style in my CSS, like in the following example.
a,
ul {
font-weight: bold;
font-size: 14px;
color: grey;
}
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is best ...
.myclass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is even better (lower-case)
This way, the DOM engine will get to the element without having to stack across all a and all ul tags in your document.
I often encounter the same problem and have learned to go for Option 2.
First, you need to ask yourself why both styles are connected: are the two elements you're styling meant to always be styled the same way or is is just a coincidence that they're styled the same?
For example, if you decide that your links shouldn't be grey anymore, but blue, will you be ok to have your ul list be blue as well? What I mean is: are the links and the list related? Do they have to look always the same? Or it just happens, in this particular situation, that they're the same?
Also, you need to beware of the name of your class.
If you call it something like .boldGrey, you're doing it wrong because your class name is desribing the style, not the content.
If you call it something like .secondary, you're doing it well, because you're describing the content, not the style. In that case, using Option 1 can be ok.
But in the end, I always go for Option 2. Although you connect the same style to multiple elements, it's still easy to modify it afterwards, if you change your mind. I usually put at the top of my CSS (just below the reset) a list of elements that share the same properties. Then, I add specific styles for each element.
Example from my website:
time, code, figcaption {
background:#f5f5f5;
border:1px solid #e9e9e9;
border-radius:2px;
color:#93a1a1;
font-size:11px;
padding:0 4px 1px;
white-space:nowrap;
}
Then, below, I have for example some additional styling for code:
code {
font-size:12px;
position:relative;
top:-2px;
}
While I was styling these 3 elements, I noticed that I wanted them to look the same. But not exactly the same. So I regrouped everything they had in common, and then specified what they had in particular.
Could I have used a single class for that? Maybe. But how would I have called it? .greySmallBordered? .littleBlocks? .tagLooking? It's really hard to come up with a name that only describes the content and not the styling.
So I usually list multiple elements in my selector because:
it's the best way to keep the content in the HTML seperated from the styling in the CSS
it helps specifying additional styling for each element
I have this
<h1 id="coins"></h1>
But cant style it with css, when i use Jquery Mobile ?
.coins{
font-family: Verdana;
font-style: bold;
font-size: 50px;
color: #ecb502;
margin: 30px 30px 0px 0px;
}
have also tryed with h1{} and didnt help ?
anyone knows why ?
if you're styling an id using a period '.' then that's your problem. Style ids with a hash '#' and classes with a period '.'
Also, you would use font-weight: bold instead of font-style. font-style would be for italicizing, primarily.
And, although it is more of a preference thing, as an FYI you don't need to specify units for the values of 0 on your margin. Zero times anything is still zero, doesn't matter what it is.
You just need to be more specific on your selector so that it over-writes the jQuery Mobile CSS (which targets the <h1> elements in <div data-role="header"> elements with: .ui-header .ui-title):
Change:
.coins{
To:
/*this selects all elements that have both the `ui-title` and the `coins` classes and is a descendant of an element with the `ui-header` class*/
.ui-header .ui-title.coins{
Remember that the rule with most specific selector will be used in CSS.
Here is a jsfiddle: http://jsfiddle.net/YdP7S/2/