CODEWITHSUNDEEP
htmlcss
Jon M
Jon M

Reputation: 33

Using CSS to format lists

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>

Upvotes: 0

Views: 84

Answers (4)

grinmax
grinmax

Reputation: 1855

<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/

Upvotes: 0

Dan Weber
Dan Weber

Reputation: 1237

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>

Upvotes: 0

Dan Soper
Dan Soper

Reputation: 678

ul.a li {padding:7px;}

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

Upvotes: 0

Nate Beers
Nate Beers

Reputation: 1425

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

Upvotes: 2

Related Questions