I want the header of a paragraph to be centered, but I can´t get it working.
The whole and the paragraph have the property text-align:left and the header has text-align:center but still it´s not centered.
body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}
<main>
<b>Header:</b>
</main>
Can somone give me some advice what I´m doing wrong or missing?
Put a div around it. The <b> tag cannot be centered.
body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}
<main>
<div class="header">
<b>Header:</b>
</div>
</main>
A <b> element is display: inline by default.
The text-align property says: Applies to: block containers.
It therefore has no effect on a <b> element by default.
You need to apply it to a block container instead. There are three ways to do this:
Find (or add) an ancestor element which is a block container
Change the <b> (using the CSS display property) so that it is a block
Replace the <b> with a different element which is a block.
In this case, the apropriate thing to do is to replace the <b>.
You should select markup based that describes what content is and not how it should look. (This has been true since CSS 1 was released in 1996 and began the process of separating style from structure in webpages).
You have been calling the element "the header". HTML provides elements specifically for that purpose.
Aside from the <header> element itself, there are the <h1> - <h6> heading elements.
You content makes it look like an <h1> would be appropriate.
h1 {
text-align: center;
}
<main>
<h1>Header</h1>
</main>
You can also remove the !important flag. It is usually more trouble than it is worth and provides no benefit here.
header seems a better tag to group "introductory or navigational aids...heading elements but also other elements like a logo, a search form, and so on.", documentation at MDN.
main would be better suited for "content...unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).", documentation at MDN.
To be clear, text-align property is inherited by child elements, documentation at MDN.
That said, consider the following code:
body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}
<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>
A easy solution may be using positioning. Something like this:
body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}
Another solution would be to just
display: block
the b element.
You can not align b tag content.
Just change in your jsfidle like this.
html
<main>
<p><b>Header:</b></p>
</main>
and css
p{
text-align:center !important;
}
Related
I'm having a very strange problem. I'm simply trying to use Ids and Classes to edit my HTML with CSS and for some reason it's not being recognized. Here is the HTML I've used.
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
Here is the CSS
.Benefits {
font-size: 60px;
}
Id's won't respond either.
Putting center tag inside a paragraph creates invalid markup which browsers try to fix. Also:
The 'center' tag is not supported in HTML5. Use CSS instead.
.Benefits {
font-size: 60px;
text-align: center;
}
<p class="Benefits">Benefits of First Person Shooters</p>
Added center selector has the same font-size as Benefits class
.Benefits, center {
font-size: 60px;
}
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
If you inspect the HTML, you'll notice that the center tag is placed OUTSIDE of your paragraph. Add the class/id to the center tag rather than the paragraph, or use CSS to center the text rather than having a center tag.
Because it's within the "center" element. Put your class within "center".
I need to style h1, h2, h3... and p tags inside a div but I only have access to the content area.
If it where possible, this would be what I'd use:
<div style="h1{padding:0;}p{font-size:1.4em;color:#000}">
Is there a solution to do this ? Apart from adding the style to every element.
Thanks
Although HTML syntax restricts style elements to the head part, this requirement is not enforced in practice. It works inside body, too. You just need to take into account that the effects are global to the document. Thus, to limit the effect to elements inside a certain element, you need to use suitable selectors. Example (I have added a color setting because the effect of just padding: 0 as in the question in not noticeable: it equals the default):
<h1>Heading outside the div</h1>
<p>A paragraph outside the div.</p>
<div class=mydiv>
<style>
.mydiv h1 { padding: 0; color: green; }
.mydiv p { font-size: 1.4em; color: #000; }
</style>
<h1>Heading inside the div</h1>
<p>A paragraph inside the div.</p>
</div>
There isn't a good solution.
Style elements may only appear in the head.
Inline style only applies to the element the attribute appears on.
The closest you can come is to use JavaScript to dynamically modify the stylesheet.
You would be better fixing whatever problem is preventing you from modifying the head section.
To avoid unwanted changes inside divs i will be using to divs with 2 unique id's:red and green
If you want different style for specific divs:
<div id="red"><h1>red</h1><p>red</p>
<div id="green"><h1>green</h1><p>green</p>
body #red > h1,body #red >p{
color:red;
}
body #green > h1,body #green > p{
color:green;
}
I have read Is there a CSS selector for the first direct child only? and http://www.w3schools.com/cssref/css_selectors.asp
I guess I have to apply the effect to the first-child of the <h1> tag, but I couldn't get it to work. So instead, I'm trying to use the nth-child, but still no luck.
JSFiddle
<section>
<article>
<h1>Test Details</h1>
<ul>
<li>Layer This</li>
<li>Layer That</li>
<li>Layers</li>
</ul>
</article>
</section>
<section>
<article>
<h1>Campaign details</h1>
<p>Text</p>
</article>
</section>
CSS
section {
padding:30px;
}
section article {
background:#EBEBEB;
}
section article h1 {
background:#0C79CB;
padding:10px;
}
/* This is where I am struggling */
section article h1:nth-child(2):before {
background-color:white !important;
content:'';
height:10px;
display:block;
}
If you open the fiddle, you'll note that the header has a blue background, and the content has a grey background. All I'm trying to do is to 'insert' a line of white:
Current:
Desired (note white between the blue and grey)
Please note, I know this is quite trivial if I just add a new div with a class, or even add a border-bottom:solid 5px white; to the <h1> tag, the point is I'm trying to learn about CSS selectors so is this possible using CSS Selectors?
:first-child can be used with or without knowing the element type.
You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.
You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.
To complete the example you are attempting using pseudo elements:
It is possible to use :nth-child(1) to select the first child like :first-child. Note: In this example it is pointless, as you will only have one <h1> per <article>.
section article h1 is given position: relative and it's position: absolute children will be positioned in relation to it.
The :after is given position: absolute and width: 100% in order to create a line at the bottom of your <h1> background.
Remember that the :after and :before pseudo elements are the equivalent of:
<h1>
<span>This is the :before</span>
I am the heading
<span>This is the :after</span>
</h1>
Have an example
CSS
section article h1 {
background:#0C79CB;
padding:10px 10px 20px;
position: relative;
}
/*
-- Select the first h1 child of article and generate a pseudo element.
*/
section article h1:nth-child(1):after {
background-color:white;
content:'';
height:10px;
width: 100%;
display:block;
position: absolute;
bottom: 0;
left: 0;
}
In your example, you're trying to select the second child of the h1, but that element doesn't have any children, and so it fails. You have to select the second child of the parent of the h1
section article :nth-child(2):before
This has the advantage that you don't put any tag name in there, so it will work even if one day you'll change the h1 to an h2, for example.
That last selector could be rewritten also to
section article :first-child:after
It's not the same thing, but you can also add generated content after an element (and in your case it'll be fine and work in the same way).
Or, if you want to match something against the h1, you need to target its next sibling, using the sibling selector
section article h1 + *:before
This selector will choose the first element (whatever kind it is) that appears right after an h1.
Or, inserting generated content after the element, you can use this
section article h1:after {
background-color: white !important;
content: '';
height: 10px;
display: block;
}
Which, in my opinion, is the simplest thing to do
I'm using the <section> tag on several pages, but on ONE page I'm using an <aside> tag that is preceded by the <section> tag.
In the case that I have a <section> immediately followed by an <aside>, I would like to apply a width to both and have the section float left, and the aside float right.
Basically, if I have a <section> and <aside> I want the style to work like this:
section {
width: 500px;
float: left;
padding: 8px;
}
aside {
padding:8px;
width:400px;
float:right;
}
If I only have the <section> I want it to be like:
section {
padding: 8px;
}
Is there a way I can do this with either a conditional statement in CSS3, or a pseudo-class, without having to use JavaScript, custom classes, or separate CSS files?
This only works if the <section/> comes after the <aside/>:
<aside>content</aside>
<!-- if there is another node in between, use the '~' selector -->
<section>content</section>
In that case you could use aside ~ section or aside + section:
section {
padding: 8px;
}
aside + section {
width: 500px;
float: left;
}
In all other cases you'll have to use JavaScript because these selectors only work in one direction, top to bottom.
With CSS4 there might be a way using the Subject of a selector with Child combinator, but that's future. This selector was removed from the specification.
I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;