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?
Related
This is a pretty basic thing, but something that has always seemed weird to me. I develop sites for content management systems where I cannot always reliably expect a content author to use the correct markup. Many times, they do not even know what a p tag is.
So let's say I have a description element that should be styled a certain way, separate from my global paragraph styles. Inside of it will be text, ideally in a paragraph tag, but who knows, maybe it won't be. To work around this, I add the styles both to the parent and to the paragraph tag:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
p {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
}
This seems like repetative and overkill, but if I only add the styles to the p, the author may not use a p tag, and if I only apply the styles to the parent, global or other paragraph styles will overtake the styles of the parent. I also generally do the same thing with anchor tag colors. Sometimes I can enforce the tag with my backend code, but I'm really more interested in the solution from purely styling architecture.
What do other people do? Is this a bad strategy? To date, the above styling has been the most reliable for me.
You can try with this:
.description {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
*{
font-family: inherit;
color: inherit;
font-size: inherit;
line-height: inherit;
}
}
Can you safely assume that the author (or whatever WYSIWYG is being used) will insert an element at all? Be it a p or div, span, blockquote, article, main, section basically the most commonly used text-containing elements.
A few options would be:
Make sure the output is always going into a container with an id and/or a class (to make it the styles harder to override).
Make sure what ever WYSIWYG editor (if using one) will only output a handful of controllable elements
Ask the authors to only use a handful of elements
There aren't really that many HTML elements to choose from anyway.
The CSS:
.description,
.description p,
.description span,
.description td,
.description article,
.description main,
.description blockquote,
.description section,
.description any_selector_here,
.description div {
font-family: $LatoLight;
color: white;
font-size: 16px;
line-height: 1.25;
}
This way you are only writing your styles once.
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
currently i have
<div class="rightBoxesTop">
<h3>My Pages</h3>
<h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
show in-active <input id="show-in" type="checkbox"></h3>
</div>
I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly
Thanks
You can try this to style 2nd, 3rd and other following h3 tags:
.rightBoxesTop h3 + h3
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
Also you can use CSS3 selector to style only the second h3:
.rightBoxesTop h3:nth-child(2)
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
if you are able to remove the inline styles, then you can also add a class for it.
This gives you the option to style it easily by its class in the CSS.
UPDATE: Because you must remove the inline styles, you can not override them in your CSS.
You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.
But in this case, I would consider adding a class (rather than an id) to the second h3.
You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:
.rightBoxesTop>h3:first-child+h3{
//your css here
}
Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"
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.
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.