I was wanting to know if there is anything wrong with writing the paragraph tags within the code body tags like this:
paragraph tag question
I'm very new to programming and HTML/CSS as well, but I have not seen any coding examples doing this. I do see people using h1, h2, h3, etc... but these text sizes are different by default where the p and p1 tags give the same exact size. Also, would writing the code like this cause any problems with commonly used browsers?
The reason I want to do this is because I can change each paragraph using the CSS style section of the code rather than setting each paragraph to the same paragraph tag and then the corresponding attributes affect all the paragraph text.
thanks and sorry if this has been asked before, but I couldn't find it on the web
Brian
Use <p class="first"></p> <p class="second"></p> <p class="third"></p> and so on.
These are called classes.
You can define classes in your CSS sheet and style them independently without affecting other elements which don't have the class.
Identifiers such as "first", "second" and "third" are arbitrary, you can choose your own class names.
.first {
color: red
}
.second {
color: blue
}
.third {
color: green
}
<p class="first">I am a paragraph</p>
<p class="second">I am a paragraph</p>
<p class="third">I am a paragraph</p>
Related
Currently i'm trying to overhaul a reddit page and i'm struggling to style multiple links in the sidebar. Is it possible to style links in a paragraph without a class? If not are there any other possibilities as i can't seem to find any except having multiple images.
<p>
Only links in this paragraph will be styled.
</p>
Is this what you are looking for?
p a {
color: red;
}
You might need to add an !important to the properties you are trying to override.
Basically, there are a few answers to this. I am going to order them I what I think would be most important to you.
Way #1:
If you want to limit the styling to a specific paragraph you need to give the paragraph an ID or a CLASS. Here is an example below.
<p id="myParagraph">
Link
</p>
Then in your CSS you must "select" your paragraph and the tag you want. You can do that like this...
p#myParagraph a {
/* Style elements */
}
Please note that you would put your ID after the pound sign and not necessarily "myParagraph"
Way #2:
You could just call the Paragraph tag and then the Anchor tag
p a {
/* Style Elements */
}
I have created some CSS classes that simply declare certain hex colors that will be used in my web app. In HTML I am trying to apply these colors to specific text. For some reason I am having trouble getting the styles to be applied.
CSS
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
HTML
<p>This is the custom <style class="custom-orange-color">orange</style> color and this is the custom <style class="custom-pink-color">pink</style> color.</p>
In fact when I use this, the text within the style tags disappears all together?
You are misusing the css classes. Instead of <style> tags use <span>. Style tags are used to put css in it, not use classes or whatever css rules.
The span tag is used to group inline-elements in a document.
The span tag provides no visual change by itself.
The span tag provides a way to add a hook to a part of a text or a
part of a document.
In your case you can assign the desired colors by assigning the correct class to corresponding span element. It would be something like this:
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>
The <style> element is designed to hold a stylesheet. It is not designed to hold content.
The <body> of your document should contain text and the HTML elements which best describe the semantics of that text.
The <style> element should appear in the <head> and contain only CSS.
Replace <style class="custom-orange-color"> which something that best describes what it is you want to convey by making the text orange. For example:
<em>
Then write CSS for it.
em {
color: #F58B30;
font-style: normal;
}
strong {
color: #ED178F;
font-weight: normal;
}
<p>This is the <em>emphasised</em> color and this is the <strong>strongly emphasised</strong> color.</p>
Add HTML classes (CSS has class selectors, other kinds of selector, rules, rulesets and various other features, but not classes) only if you need them.
Your syntax for a class selector was correct (although the names were poorly chosen: They should describe meaning not presentation), it was the HTML that was wrong. This would have been picked up if you had used a validator.
Here is working code for you. You need to use HTML tags, in order to have the style render for you. tag is used to define the CSS for your HTML. It basically holds a stylesheet and not the content.
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>
This is for a drop down menu of 4 columns.
On the first column with is the "HOME" within a div, I have the text "HOME" in a tag.
ex. <p style="text-align:center;"> HOME </p>
now if I try an add in <H2> </H2> between HOME, it cancels out the text-align:center and just uses the H2.
What so I need to do in the css to keep both the style="text-align:center and H2 in the same tag?....if possible anyway, because I like to keep the text-align:center with H2 on the text in the same paragraph
First of all: why do you need a paragraph inside a heading element?
Heading elements are meant to highlight important parts of your site, i.e. headings, and are also indexed by search engines. Read more here: http://www.w3schools.com/html/html_headings.asp. While paragraphs are larger trunks of text, and will add some space before and after the paragraph (since it's a block element) read more here: http://www.w3schools.com/html/html_headings.asp.
To answer your question:
Semantically it is not correct to a paragraph inside a heading or reversed: i.e.
<!-- INCORRECT -->
<h2>
<p>Your heading</p>
</h2>
What you should do is style the heading element directly:
<!-- HTML -->
<h2>Your heading</h2>
/** CSS **/
h2 {
text-align: center;
}
I also realized something similar has been answered before: Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
Just a little side thought: you mention having a drop-down of 4 columns. Wouldn't an <h2> element be too big to have in a drop-down? I immediately was thinking that it would be better having a bold font instead to highlight that specific element. But notice that I do not have any knowledge of your project! :P
Try below
<h2>
<p style="text-align:center;">HOME </p>
</h2>
you may try this instead of inline css code.. try to use tag
<h2><center>HOME</center></h2>
Which is the right way to style different elements in a document:
Class:
<style>
.red {
color: red;
}
</style>
<h1 class="red">Hello, world!</h1>
<p class="red">This is some text.</p>
HTML tags:
<style>
h1,
p {
color: red;
}
</style>
<h1>Hello, world!</h1>
<p>This is some text.</p>
I'd say it depends. If the "red" class has a styling that is repeated many times across the site I would use the .red class (although that is not a good name for a class as it describes the aspect of the element, what happens if the graphic designer decides that the red elements are now green? your class won't make sense anymore)
This ultimately depends on what you feel more comfortable with.
Usually I would recommend using classes to style your content. This is because you will probably end up using HTML tags like p, div and the like all over your website for different purposes. And you will probably also want them to look different depending on where they are used for what purpose. While it is possible to define rules that will give you the desired behavior, it is not really easy to do so and a nightmare to maintain. Think of rules that look like this:
div p div div p h1 a { font-family:sans-serif; }
Nobody knows what is going on there. This would be much easier if you had just assigned classes to the elements that make up your document. For example:
.maincontent .quotebox .caption { font-family:sans-serif; }
It is up to you how much you want to drill down with those classes. You can either just assign a class to a top level element (like div) and then define rules for child elements or you can add a class to each element and then define rules for nested classes.
What you should do is think about what sort of CSS structure you would like to have. I like to think of different classes in terms of what I want elements to convey (in terms of information) rather than what I want them to look like. Making red a class name is somewhat beside the point as this does not tell you anything about the element that it is applied to. Also you might want to color it green at some point and then there would be elements of class red that are actually styled green. Better class names would IMHO be navigation or maincontent or infobox.
I think style using class is better than style using html tags.
class have more privilage than html tags while providing style. if we use both the style provided in class taken.
This question already has answers here:
Nesting block level elements inside the <p> tag... right or wrong?
(5 answers)
Closed 7 years ago.
I want to do something like this:
<p>This is a <h2>text</h2> paragraph.</p>
I disabled margin and padding for the h2 but it still breaks the line before and after the h2 tag. How can I use the h2 tag in the middle of a text and make it look like if it was a normal word, just like < b > does?
The doctype of my html document is "XHTML 1.0 Transitional"
It is not valid to have a h2 inside of a p.
Aside from that, and to answer your question, a h2 is a block level element. Making it an inline level element will cause it to behave similarly to how you describe the b tag acting.
p h2{display:inline}
As I said above though, the HTML you've given is invalid.
It's not appropriate to use a tag that means "heading" within body text. The <h..> tags are logical tags; their use imparts meaning to the enclosed text -- namely, that the text is a section heading.
Although you could use the display: inline attribute, consider using a more appropriate tag, or even a <span> tag.
Don't, the whole point of is that it's a header. Headers are on their own line. Instead, use CSS. Say text and then in a CSS file, choose a font size.
You’ll have to make it
display:inline;
h2 is a block element.
The h2 tag marks a headline, which is per definition not part of a text. So what you’re doing is probably not the best way. Consider doing it differently.
Despite of the wrong use of the <h2> tag inside a paragraph, we can style <h2> to keep him into a paragraph. I tested one of the above css trick in Firefox and Chrome as follow:
HTML code <p>One paragraph with <h2>title text</h2> in the middle</p>
CSS trick p h2{display:inline}
BUT it doesn't get the result I expect. The browser truncate the paragraph right before the initial h2 tag. Look at DOM from Firebug:
Therefore the CSS trick p h2{display:inline} doesn't work properly because CSS rule is not true, i.e. the <h2> tag is not inside the <p> tag. It looks like this:
Adding CSS trick only for <h2> tag h2{display:inline} is not the definitive solution. It will look like this:
The final work-around is:
HTML code <p class="inline-object">One paragraph with <h2 class="inline-object">title text</h2> in the middle</p>
CSS trick .inline-object" {display:inline}
This will look as we expect:
If you are trying to mask <h2> title text as ordinary text, just add two more rules to the class .inline-object" {display:inline;font-size: inherit;font-weight: normal;}
Create a class like .myH2 (not the best name) with same code of h2 and use a span in p like
<p>this is <span class="myH2">myH2</span>.</p>
Firefox cutting out my P, because of H2 inside it. And then creating P for (empty paragraph). And its good. Because its auto-generated, and for cleaning out P tags i need to write tens of PHP code.