Naming paras so i can style it in css

Code Help HTML/CSS/JS
1

Question:

How do i style my paras like how do i name it so i can style it in css?
Repl link:

https://mini-project.jacksonmorgan5.repl.co/

code snippet

2

I’m not an expert at CSS, but some things you could do are:

  1. Give each paragraph an id:

html

<p id="paragraph-1">Some text</p>
<p id="paragraph-2">Some text</p>

css

/* the element with the id 'paragraph-1' */
#paragraph-1 { /* some styles */ }
/* the elemtn with the id 'paragraph-2' */
#paragraph-2 { /* some styles */ }
  1. Give each paragraph a class:

html

<p class="paragraph">Some text</p>
<!-- two (or more) classes are separated by spaces -->
<p class="paragraph another-class">Some text</p>

css

/* any element with the 'paragraph' class */
.paragraph { /* some styles */ }
/* any element with the 'another-class' class */
.another-class { /* some-styles */ }
/* any element with both the 'paragraph' class and the 'another-class' class */
.paragraph.another-class { /* some styles */ }
/* any paragraph element */
p { /* some styles */ }

The difference between an id and a class is that multiple elements can share a class, whereas an id has to be unique (meaning no element can have the same id as any other).

2 Likes
3

You don’t even need to give a paragraph a class or id to style it. If you just want to style all paragraphs in general, then you can do this:

p {
/*Your code here*/
}

If you want to style individual paragraphs, you can give them a unique id:

<p id=“p-1”></p>

Style an element with an id like this:

#p-1 {
/*Your code here*/
}

If you want to style a group of paragraphs, use a class:

<p class=“p-group’></p>

Style elements with a class like this:

.p-group {
/*Your code here*/
}
2 Likes