This seems like it would be an easy fix with a Content Editor Web Part to modify the css of the page's Web Parts. The underline I mean is the long line that leads to the dropdown arrow where the Modify, minimize, close, etc. options are. I have tried this code with no visible results:
<style>
ms-standardheader {text-decoration:none;}
</style>
You need to read up about CSS selectors.
A CSS rule is composed of two parts: a selector and a declaration block.
Generally, they look something like this:
selector { declaration block }
Your problem is with the selector, and to understand your error I'll have to explain some basic selector syntax.
In the selector you can 'target' HTML elements with styles using various constructs:
Target by tag name
Target by id
Target by class name
Target by Tag Name
The simplest is targeting by Tag Name. In this case use the tag name of the element targetted with white space on both sides:
p { /*...*/ }
Now all <p> elements will be affected by the above rule.
Target by Id
If the element you are targeting has an id attribute you can target by id by prefixing with an octothorpe #:
#p { /*...*/ }
Now the element with id="p" (no matter what the tag name) will be affected.
Target by Class Name
If the element you are targeting has a class attribute you can target by class name by prefixing with a period .:
.p { /*...*/ }
Now the elements with class="p" (no matter what the tag name) will be affected. Note that an element can have more than one class name, separated by spaces, so class="p x" is also affected.
Your Rule Doesn't Make Sense
So your rule doesn't work first and foremost because is doesn't make sense ;)
ms-standardheader {text-decoration:none;}
In the absence of a period . or an octothorpe # this targets by tag name. But <ms-standardheader> elements don't exist, so it has no effect.
Your Rule Is Also The Wrong Rule
You're also trying to style the wrong element, so let's look at the Web Part to style. I assume you're trying to remove the line I've pointed out with the red rectangle:
This line is not actually an underline, but is instead a border-bottom from a <td> element. The rule which creates this underline is on line 2664(ish) of _layouts/1033/styles/core.css and looks a little like this...
.ms-WPHeader TD{
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
Try this in another CSS file:
html body .ms-WPHeader td {
border-bottom:none;
}
Adding the html body increases the specificity of your rule so it will take precedence over the rule in core.css.
Is ms-standardheader a class or an id? If it's a class, use .ms-standardheader. If it's an id, use #ms-standardheader. You should also add type="text/css" in your style tag.
Related
Okay, so I am slightly confused with declaring and calling a class in css. when I create a class it uses a "." but when I call it it doesn't, for example.
.smaller-image {
width: 100px;
}
<a href="#"><img src="someimageurl.com" class="smaller-image" alt="some image
text."></a>
CSS applies style to HTML elements using either their class, id or tag name (e.g. body).
When writing a CSS rule to apply to a class, you prefix the class name with ..
When writing a CSS rule to apply to an id, you prefix the id name with #. Note that an id should only be used by one element on a page, whereas a class can be used as often as you like.
Examples:
div {} /* This is applied to all div elements */
.button {} /* This is applied to all elements with the `button` class */
#header {} /* This is applied to the element with the `header` id */
a.link {} /* This combines both the `a` tag and the `link` class */
The preceding dot defines it as a class in CSS, as opposed for example to a tag like div (no prefix at all) or a hash for an id (#something). In HTML all that is not needed, since the attributes are class , id or no attribute.
In HTML, the class names are clearly class names because they are contained in the class attribute. They don't need anything else to make it clear they are class names.
In CSS, a selector can be made up of many things. IDs, element types, attribute names, attribute values -- and others! So you need something to make it clear that what you are using is a class name. The . character means "what comes next is a class name".
The name HTML stands for Hyper Text Markup Language, and it describes the structure of web pages using markup elements that represented by tags. Each tag can hold attribute(s).
The class attribute specifies one or more class names for an HTML element.
CSS stands for Cascading Style Sheets and it describes how HTML elements are to be displayed on screen (or in other media).
In CSS, to select HTML elements with a specific class, we use period (.) character, followed by the name of the class.
Hope this clarify your mind, and enjoy coding!
Edit: in your example you use .com as source. You can't.
Read here for images format and support:
https://en.m.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
Take a look at this example, simple enough:
http://jsfiddle.net/8YuKb/
Now look at this example:
http://jsfiddle.net/n223Z/1/
The ONLY difference between the two is the line
.text_left { text-align:left; }
is moved above the following line:
.title {
margin:4px;padding:6px;
background-color:black;color:white;
font-size:12pt;font-weight:bold;
text-align:center;
}
... and now the CSS does not work??? (at least not in IE)
Can someone please explain why???
I was under the impression that because the "text_left" selector was last in the list the text in the div should be aligned left (regardless of the order of CSS declarations) -- is that not the case????
I do not understand why it works in one case and not the other.
As you can see, the order of the classes in the HTML has no effect.
Both of the following are the same, as they are merely elements with 2 of the same classes.
class="title text_left"
class="text_left title"
On the other hand, the order of the elements does matter in CSS, as the stylesheet is read from top to bottom (cascade).
Thus text-align:left is being applied on both elements, yet due to the order in which they appear, it is overwritten by text-align:center, as it appears below it.
1.in html
class="title text_left"
class="text_left title"
has the same effect when they apply to the same element: the class sequence they appear in
html attribute has no effect in the final result
2.in css file:
.title {}
.text_left {}
when the two class apply to a element such as
<div class="title text_left"></div>
or
<div class="text_left title"></div>
the html has the same effect(as describe in 1), so the div will apply all rules in .title
and .text_left. if the same style has declared in both .title and .text_left. the rule
in .text_left will win (the one declared last in css file win when their selector has the
same specificity)
3.in css file
.text_left {}
.title {}
when an element has both the two classes, all style rule in the two class will apply to
the element, if two attrbute conflict, .title will win
maybe you mixed the word: the one declare last will win
it means: the sequence of css rule declare in source file effect the final result
not: the sequence of attribute declare in html element
There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:
What the below CSS code means?
#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }
As per my understanding, please correct me if I am wrong:
Line 1: every li element within any element with id="nav" will have styling cssA
Line 2: When I put my cursor over every li element within any element with id="nav" will have styling cssB
Line 3: every a element within every li element within any element with id="nav" will have styling cssC
Line 4: When I hover every a element within every li element within any element with id="nav" will have styling cssD
Line 5: Every span element within every a element within every ul element within every li element within any element with id="nav" will have styling cssE. Also anyother ul or a element will not have this style untill unless the parent element has id="nav"
You are correct on all except .over, The "." represents a class. and "#" represents ID. But yeah, you've got the concept down.
Also, if you want to "Override" as the title says, you'll add
!important
to the end of any rules you want to take precedence over the others.
you can override the css by giving !important or you can give inline style.
priority of inline css is high then external css
All of the existing answers are correct, but there is a bit more to it than has been given already.
As has already been said, "li.over" is a combined selector - it will selector li elements that also have a class of "over". If you wanted to use different CSS properties or property values whilst the mouse is over (hovering over) the element then you use the pseudo class selector "li:hover". These are called pseudo class as you aren't selecting something that is part of the document, but based on the state of an element. There are also pseudo elements which again aren't in the document directly, but logical extensions of the document structure - for example first-child, first-of-type, fifth-of-type, odd items etc.
"#nav li ul a span" is a descendant selector, as you say it will select elements that are children (at any level) of each parent, so "#nav li" selects "li" elements contained within an item with ID "nav" - even several levels down.
If you want to select items that are direct children of the parent then you can use the ">" symbol. I.e. "#nav > li" will select li elements that are directly below any item with an ID of "nav", but not any li elements that are children of that element, or indeed elements below that.
Incidentally "#nav" is exactly equivalent to "*#nav" as it selects any element with the ID, you could also write "ul#nav" if you only wanted to select ul elements with the ID. This could in turn be combined with a class "ul#nav.bar" or even multiple classes "ul#nav.bar.touch".
Removing the space between the selectors like this combines them, so in the last case instead of looking for an item with class "touch" inside an item with class "bar" inside an item with ID "nav" inside a "ul" element, you are selecting a "ul" element with an ID of "nav" and both the classes "bar" and touch". An element like this-
<ul class="bar touch" id="nav">...</ul>
It is also possible to use attribute selectors, so if you wanted to select links which will open in a new window you could use "a[target=_blank]" - which selects based both on the presence of the attribute and the value - or if you wanted to select links with any href value you could use "a[href]". This simply selects all elements with this attribute.
On top of that you can even select items which are adjacent (next to) another element, if you wanted to select all paragraphs directly following an image then you would use "img + p" in your selector, or "p + img" if you wanted to select images directly following a paragraph. As always the last item in the selector is the one the styles are applied to.
It is generally considered good practice not to be overly specific with CSS selectors, as it makes your code much less re-usable. Unless you need to write "div.widget" just write ".widget" as the otherwise you'd not be able to create a "widget" using other elements, and it makes it much harder to override these properties later on in those cases you might need to.
To wrap up selectors, there's a good introduction to CSS selectors on MDN and Code School (paid course provider) also have a excellent online foundation course on CSS available for a very reasonable price which will go through selectors in some detail.
With regard to overriding classes, there are two further concepts you should understand - cascade order and specificity.
Given a HTML snippet of-
<div class="widget">
<p>
Some text you want to style
</p>
</div>
And the following CSS-
#widget p { color: yellow; }
p { color: blue; }
The color of the text would be yellow and not blue because the specificity of the first selector is greater (more specific) than the second. To understand this I suggest you have a play with a Specificity calculator and have a read of the Smashing Magazine tutorial on the subject.
In short though, inline styles trump all, and the more specific a selector the more likely it is to be applied in place of other selectors that would otherwise apply different property values. The value in the selector with the highest specificity score "wins", but other property values from selectors with lower specificity that do not clash will also still be applied to the element.
For example, altering our earlier CSS-
#widget p { color: yellow; }
p {
color: blue;
font-weight: bold;
}
The text will still be yellow, but will also be bold as there is no font-weight property given in the selector with higher specificity.
The last concept you should understand is what happens when two or more rules have identical specificity.
#widget p { color: yellow; }
#widget p {
color: blue;
font-weight: bold;
}
In this case our text is now blue as the second rule appears later in the stylesheet and thus overrides the first. If you have multiple stylesheets then the rules from the last stylesheet to appear in the document head will override rules with identical specificity.
In almost all cases you should use a more specific or the order of the selectors within the stylesheet in order to apply the right styles to the right element, and absolutely should not be routinely using the !important flag to achieve this unless absolutely necessary. See http://james.padolsey.com/usability/dont-use-important/ for a fuller explanation than I give here, but it rapidly becomes unmaintainable (what do you do when everything is "important") and it is also not accessible for users who may wish to override your styles in their user agent stylesheet (local to their browser) in order to help them read or use the page (increasing font size, contrast with background colour etc.)
I have 2 css files in my page:
Site.css
jquery-ui.css
Site.css is listed BELOW the jquery-ui css
I have a link that looks like this on my page:
<a class='closeClueTipLink'>close</a>
and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:
I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.
Any ideas or suggestions why this ordering is happening ?
Because there's an a selector just after .ui-widget-content:
.ui-widget-content a
Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.
You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.
Quick Fix:
Add an "a" before your class selector:
a.closeClueTipLink {
Explanation:
It has to do with Specificity [details].
The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'
By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.
Example:
/* css */
div p { color: red; }
p { color: blue; }
<!-- html -->
<div><p>Text</p></div>
The text in the above paragraph will be red because the first CSS item is more specific than the second.
.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.
change it to read
a.closeClueTipLink
Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.
I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.
There are ways you are amend this problem:
Pinpoint the selector like .ui-content-content a.closeClueTipLink
Use !important at the end of color defination. color: #222 !important;[not recommended]
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.