On the following page is body text, including some bullet text. I need the bullet text to be the same (larger) size as the body text.
http://www.a-quick-sale.co.uk/howitworks/
There is a global stylesheet in the site (/global.css) and I added an entry to it:
li { font-size: 14px;}
But that font-size style is not being applied. I don't want to start being lazy and applying styles directly to page context, but why is the global style I created not being applied?
I've not done any work with CSS or HTML for over a decade, so please be gentle - the answer is likely obvious to anyone with current skills.
Because div#content li is more specific than just a single type selector, you need to include elements that are higher up in the cascade to override the specifcity
Specificity can be thought of as four numbers (0,0,0,0)
Inline styles are the first - highest precedence
ID selectors are the second number
Pseudo-classes and attribute selectors are the third
Type selectors are the fourth
The universal selector * has a specificity of 0, anything will override it.
So just specifying li has a value of (0,0,0,1) vs div#content li which has a specificity of (0,1,0,1) the latter wins. Just use this concept to come up with a higher selector.
In the global.css file there is a more specific selector div#content li that has font-size selected inside of it. Be as specific with your selector, or more specific for it to apply throughout the content area.
In the same global.css, there is a div#content li { font-size: 12px;} which is applied, because it is more specific.
Try forcing the style, like this:
li { font-size: 14px !important ;}
So it gets priority over existent styles for that element.
If you use Chrome Developer Tools (F12) you can see which styles are being applied to each element, and even see styles being overridden as they are crossed out, very helpful for debugging CSS issues like this.
Because in the same file, at line 208 you define div#content li {font-size: 12px;} which is more accurate than just li.
I should say you need to apply styling to links itself, while it's not just a plain text inside li.
li a { font-size: 14px;}
On 108 line of your global.css you have a CSS rule div#content li { font-size: 12px;} that overrides your: li { font-size: 14px;} rule.
Related
My question: Is there a more efficient way to customize elements when using Bootstrap? I find it tedious to have to target elements in such a specific way, ie:
.navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav
.active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default
.navbar-nav li a:focus {
background-color: #1A77FF;
}
I feel as though something like the following should do the trick, if I want all of my links to be styled the same way, but it doesn't override Bootstrap's default styles.
a:hover, a:focus {
background-color: #1A77FF;
}
What you've written in your custom CSS won't override Bootstrap's CSS for anchors because bootstrap's CSS will be more specific as they will have written a class into their anchors to give them the consistent Bootstrapped look and feel.
If you look on their documentation regarding buttons and links (http://getbootstrap.com/css/#buttons-options), you can get a better understanding of how they style them and build from there - I can understand where you're coming from with these questions though, I've found that Codeacademy doesn't always explain these little quirks particularly well so I shall try and clarify it for you.
Cascading Style Sheets (CSS) operates on a basis of whichever rule is more specific in targeting an element will be processed.
If I was to have a page with two anchor tags on it and styling that targeted an element specifically, as follows:
a {
color: magenta;
font-family: 'Comic-Sans', sans-serif;
font-size: 14pt;
}
a.more_specific {
color: red;
font-family: 'Impact', sans-serif;
font-size: 18pt;
}
<!DOCTYPE HTML>
<body>
Basic link
<br>
More specific
</body>
You'll notice that the bottom link's styling, despite it still being an anchor, gets overridden by the more specific rule.
The way I tend to overcome the issue you're facing with Bootstrap's CSS is to add an id attribute to that element (or those elements if you're targeting more than one) which can then be used to override the styling from bootstrap. This will maintain Bootstrap's specificity in the way that they target the elements but will enable you to effectively jump right to the end of that long chain of refinements, so if you give your anchor in the navbar an id of, say, "navbar-anchor" and then target that in your CSS, it will have the same effect as targeting it with the long chain of refining targets.
This is a much more sustainable way of doing it than simply using !important as suggested in the answer from the first provider.
As far as i know if you include the stylesheet after bootstap.css in which you have written the css code it will override the matching css in the bootstrap.css file but if bootstrap has used selectors along with tag then its difficult to do so.
!important is one way and
2nd way is to extend the css code with the parent class,id or element so that it over rides the bootstap.css code which you already did.
I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
width: 180px;
border: 1px solid #aaa;
}
This CSS referred in header of the page. Later in page I define following:
<style>
.shortField {
width: 50px;
}
</style>
I assign class "shortField" to my input box but size is not applied. F12 screenshot:
The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
width: 50px;
}
An alternative would be:
body .shortField {
width: 50px;
}
Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
margin-left: 0 !important;
}
Try to use the lowest specificty selectors that you possibly can.
You need to learn about specificity...
The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific
And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField { /* This is more specific than simple element selector */
/* Styles */
}
It is because the styles in your main.css file are more specific than in your html head.
If you really need to override it try doing this:
.shortfield {width: 50px !important;}
Might help you to understand the hierarchy of importance for CSS.
Inline > Embedded > External
Inline styles are anything within style="" and override any styles specified from embedded, or external stylesheets.
Embedded styles are styles within <style> within the <head> of the document. They are overridden by inline, but override external.
External styles are written in external files, and are overridden by either embedded or inline.
My theory is that you have styles overriding your external stylesheet.
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody
I am trying to style a menu, and am having troubles styling the "a tag" inside of the html table.
My default a tag styles are:
a:link { color : #69bfc8; text-decoration : none;}
a:visited {color : #69bfc8; text-decoration : none;}
a:hover {color : #606060; text-decoration : none;}
And the styles for the menu are:
td.menu {font-size: 9pt; width:150px; height:7px; border-bottom: 1px solid #e0e0e0;}
td.menu:hover {background: #69bfc8; color: #FFFFFF; }
td.menu div {padding: 3px;}
The problem Im having is the color attribute isnt applied to "a tags" within the td element upon the hover event. It seems to remain compliant with the default styles. Now I know for sure, that this is more of lacking of my knowledge of CSS, so I dont mean to seem ignorant if I am missing some crucial principle. I just wasnt sure how to ask google this question.
So my question is, what am I missing, how do I style "a tags" within the td element, upon hover of the td element??
Any help is appreciated, thanks, Lea.
The anchor tags don't inherit text-specific styles, so you need to set them implicitly:
td.menu:hover a { color: #FFFFFF; }
Just remember that IE6 won't fire the td:hover, so it might be better to change your code around a bit, so the anchor tag itself covers the whole space of the td, and then do:
td.menu a:hover { background: #69bfc8; color: #FFFFFF; }
You can use the following CSS to control the look of an a tag within a td tag:
td a { color : #69bfc8; text-decoration : none;}
The styles that apply to the td elements apply to the td elements.
The styles that apply to the a elements apply to the a elements.
Since the a elements are inside the td elements they inherit various properties from the td elements unless some other piece of CSS sets them to something else. Normally, the default stylesheet built into the browser would apply various properties. In this case the author stylesheet does.
If you want to have different rules for a elements in a td element then you need to write your rules with a descendant selector. You might also want to group the rules if you want multiple selectors to apply to one rule-set.
a { }
td,
td a { }
just a sample:
td a:hover {color : #606060; text-decoration : none;}
The problem Im having is the color attribute isnt applied
When you have several mutually contradictory rules which apply to an element, something called "CSS specificity" defines which rule is applied.
I just wasnt sure how to ask google this question.
A lot of the CSS behaviour is defined in just one place, i.e. in the CSS specifications document.
Each item should, with a display: block and a height and width set at 100%.
a {display:block; width:100%; height;100%; }