2

I'm learning HTML from scratch, I have no background with CSS or any web development language, during the tutorial they posted the following exercise:

Add the "intro" class to all <p> elements.

And then I have to change the following code:

<!DOCTYPE html> <html> <head> <style> p.intro { background-color:black; color:white; border:1px solid grey; padding:10px; margin:30px; font-size:150%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>

To solve this, I added the class to each paragraph, but this looks highly inefficient. Is there a way that allows me to add the class to all the paragraphs?

Improve this question
4
  • 2
    Yes indeed, JavaScript, but @j08691 brings up a valid solution, in that you can use the tag name instead. Commented May 3, 2016 at 2:47
  • Which tutorial? It would be helpful to know what exactly you are being asked to do. If you are asked to add the class at runtime and are using a library such as jQuery, you just call $('p').addClass('intro'); but if you are being asked to add class="intro", you can use a string replacement in your editor. Commented May 3, 2016 at 2:53
  • This is plain vanilla css. The simplest solution that works is usually the best. Commented May 3, 2016 at 2:55
  • @Steve the question is there, all i have to do is add the class to the paragraphs. The tutorial is from w3schools.com Commented May 3, 2016 at 3:17

4 Answers 4

Reset to default
3

p.intro selects all paragraphs that have the class intro. Ex: <p class="intro">. To apply the class to all paragraphs without having to add the class to each paragraph, change the selector to p

Ex:

p { background-color:black; color:white; border:1px solid grey; padding:10px; margin:30px; font-size:150%; }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

He's looking for a better way to add the class to all paragraphs without doing it manually.
Precisely, but from the answers given, i guess there's no way to add it, and it makes more sense to do it this way, am I right?
@JoaoAmaral The only ways to do this are via JavaScript (unnecessary), as I do above, or manually add the class to every paragraph.
okay, that answers the question :) in fact it is pretty useless to add a specific class to all the paragraphs, from what i know, which is very little, so far, thank you @j08691!
1

try this

p{ background-color:black; color:white; border:1px solid grey; padding:10px; margin:30px; font-size:150%; }
Improve this answer

2 Comments

This doesn't answer the question for how to better add the class to all paragraphs.
Yes, this solves the problem regarding the output page, but doesn't answer the question, is there a way to add a class to all paragraphs? After giving some thought i guess it is a bit useless unless you can override a "default" class.
0

you can do this in jQuery. $( "p" ).addClass( "intro" ); but you need to download the jquery file to use this and other jquery features.

Improve this answer

3 Comments

Or you can use plain javascript and not download anything.
i mean using only html and css, adding the class to all paragraphs.
I think by using only pure html code, you can only type the classname to each "p" tag manually
0

Depends on your editor or OS. In Windows editors, typically ctrl+H will open the search&replace dialog. Put

as the search and for the replace. In Linux/Mac, you can use sed. -i means in-place (as opposed to using a new file). The s/...part is a standard substitution call common among many Linux based programs that says find the empty tag and replace it with one having the class="intro" part.

sed -i '' 's/\<p\>/<p class="intro">/g' yourFile.html

The list of how to do it is as large as the list of editors.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.