Using CSS to format lists

Question

I am having a few issues with trying to have different styles of line spacing for two <ul> lists that I have.

How do i make them unique? How to i write the css code to tell one of those to add line spacing?

I was on the w3schools site but i think i am a bit lost as i an using this:

<style type=text/css">
ul li {padding:6px;}

this is applying the padding to both lists, how do i differentiate between the two lists>

ul list example 1:

<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>

ul list example 2:

<ul class="b">
<li><b>Less than 1 year of experience</b></li>
<li><b>At least 1 year but less than 3 years of experience</b></li>
<li><b>At least 3 years but less than 5 years of experience</b></li>
<li><b>At least 5 years but less than 7 years of experience</b></li>
<li><b>At least 7 years but less than 10 years of experience</b></li>
<li><b>At least 10 years of experience</b></li>
<li><b>None of the above</b></li>
</ul>

Add a class to one list (or both) and then add a style rule for that specific class. Share your code if you'd like some help. — Dan Weber
– Dan Weber, Commented Jan 27, 2017 at 20:10
please indent your code properly next time. Highlight your code then hit the CTRL-K keys and use ticks ` to highlight code such as <ul>. Others/I won't always be here to do that. — Funk Forty Niner
– Funk Forty Niner, Commented Jan 27, 2017 at 20:10
thank you fred, I am a newbie at this, just started teaching myself html and css for accessibility dev at my job — Jon M
– Jon M, Commented Jan 27, 2017 at 20:18

Nate Beers · Accepted Answer · 2017-01-27 20:12:06Z

2

.a li {
    padding:16px;
}
.b li {
    padding:6px;
}

answered Jan 27, 2017 at 20:12

Nate Beers

1,4252 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Weber · Accepted Answer · 2017-01-27 20:12:42Z

Here's an example of styling 2 lists differently.

Just add your custom class to the html element in your css. (ul.your-class). You could also just use ".your-class" and not specify the html element.

ul.a {
  list-style-type: circle;
  padding-left: 10px;
}

ul.b {
  list-style-type: square;
  padding-left: 20px;
}

List A:<br>
<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>

<hr>

List B:
<br>
<ul class="b">
    <li><b>Less than 1 year of experience</b></li>
    <li><b>At least 1 year but less than 3 years of experience</b></li>
    <li><b>At least 3 years but less than 5 years of experience</b></li>
    <li><b>At least 5 years but less than 7 years of experience</b></li>
    <li><b>At least 7 years but less than 10 years of experience</b></li>
    <li><b>At least 10 years of experience</b></li>
    <li><b>None of the above</b></li>
</ul>

Dan Soper · Accepted Answer · 2017-01-27 20:12:14Z

0

ul.a li {padding:7px;}

...will target just the class="a" list.

answered Jan 27, 2017 at 20:12

Dan Soper

6788 silver badges18 bronze badges

Comments

grinmax · Accepted Answer · 2017-01-27 20:14:38Z

0

<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>
<ul class="b">
<li><b>Less than 1 year of experience</b></li>
<li><b>At least 1 year but less than 3 years of experience</b></li>
<li><b>At least 3 years but less than 5 years of experience</b></li>
<li><b>At least 5 years but less than 7 years of experience</b></li>
<li><b>At least 7 years but less than 10 years of experience</b></li>
<li><b>At least 10 years of experience</b></li>
<li><b>None of the above</b></li>
</ul>

CSS

.a li {
  padding-bottom: 10px;
}

.b li {
  padding-bottom: 30px;
}

live demo - https://jsfiddle.net/kg0qvmzh/

answered Jan 27, 2017 at 20:14

grinmax

1,8551 gold badge12 silver badges13 bronze badges

1 Comment

grinmax Over a year ago

@JonM Welcome))

Collectives™ on Stack Overflow

Using CSS to format lists

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related