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
Related
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
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.
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 have been using the following at the top of every page.
body, html {
color: #333333;
font-family: Arial,sans-serif;
font-size: 0.95em;
line-height: 1.15;
}
But my workmate tells me I don't need both body and html.
Is this correct?
No you don't, you can omit html. All visible and presentational content to be formatted and styled with css will (and should) be within the <body> tag.
For the code above, you really don't need to style both html and body
However, some browsers apply margin and padding to one or the other, so it is a good practice to reset both
html, body{
margin:0;
padding:0;
}
This helps especially if you are trying to place elements against the top/bottom of the browser window.
If you're dealing with margin, width or height and perhaps background you may need to target both, but for general properties, you don't. The properties you list here are fine on just body.