Here's my h1 problem:[link removed]
i need the h1 to blend into the paragraphs perfectly for seo purposes. the tags are around Long Island.
I have the css set to h1{display: inline;padding:0;margin:0;font-weight:normal;font-size:17px;} still breaking... before. i tried adding similar stuff to "< p >" but it completely took out all the breaks, i still need some breaks!
u can just use a H1. use a span to style specific words within your h1.
<h1>Welcome! My name is Nancy Lewis and I’m from <span>Long Island</span></h1>
Then u can style the words Long Island as you like
h1 span {font-weight:700} /*or whatever you like*/
for the second example, try to put margin yo for your body
body {margin:0}
Both H1 and P are block level elements. In order to get the effect you want, both P and H1 need to have their styles set to display: inline;.
Try:
CSS:
.inline { display: inline; }
HTML:
<p class="inline"> Welcome! My name is Nancy Lewis and I’m from </p>
<h1 class="inline"> Long Island </h1>
<p class="inline"> , New York. </p>
So you need the h1 and it's immediate following p element to be inline. Simple!
The h1:
h1 {
display: inline;
}
The immediate following p:
h1 + p {
display: inline;
}
What's the + up there? It's the adjacent sibling selector +. Go ahead, click the link.
That's it! But, of course, there's no need to repeat yourself. Stick the two together, and you get:
h1,
h1 + p {
display: inline;
}
Here's a fiddle (actually, a "tinkerbin"): http://tinkerbin.com/jy3uoWX9
Related
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;
}
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 have a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
I'm trying to set a margin-top of 20px to all my paragraph elements excepting the first one. I've this code:
<div>
<h3>Title</h3>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
And this is my CSS:
div p{
margin-top: 20px;
}
div p:first-child{
margin-top: 0;
}
But this isn't working... I think it's because of the , but I can't figure out how to fix it... I'm sure you can help me out!
I apologize if I messed up with my english, I hope I made myself clear!
Thanks!!!
To set a margin-top of 20px to all paragraph elements in a sequence of such elements excepting the first one, use
p + p { margin-top: 20px; }
If you additionally wish to set the margin top of the first p element in a sequence to zero, as it seems, just add
p { margin-top: 0; }
The rule with a more specific selector will override this for any element except the first one in a sequence.
The selector div p:first-child does not work, because it matches a p element that is the first child of its parent and a descendant of a div element. In your example, no p element is the first child of its parent.
p in your example isn't first child, h3 is. Go with:
div h3 + p {
margin-top: 0;
}
Demo: http://jsfiddle.net/fSZWU/
The pseudo-class :first-child doesn't indicate the first element of that type which is child of its parent. It rather means the first child element of its parent.
I remember being confused at first as well, because I was expecting :first-child = first. The solution proposed by #yabol (h3 + p) will get you the paragraph next to the h3, which, in your case, is the first <p>; but be careful because by changing the structure of your page you might lose that particular style.
To achieve exactly what you are looking for, you have to use the CSS3 pseudo class :first-of-type. Be careful though with the support (only IE9+!)
Try it out yourself!