Submodule 4.1: Selectors

Apply style to a specific context (ul li)

In this section we will apply some CSS rules to unordered list and its list items.

Assume that we want our unordered list to be displayed with a square instead of circle.
There are 3 steps:

Step 1
Go to the HTML, find the <ul> list and create a class.
Example:

<ul class="squarelist">
  <li> My name is .. </li>
  <li> My surname is .. </li>
</ul>

Step 2
Go to your CSS and create your selector. Example:

.squarelist { }

Step 3
In CSS we have the property list-style-type. Since we want our list to displayed with a square, we will give this property the value square.
Example:

.squarelist { list-style-type: square;}

Now assume that we want all list items (li) of our unordered list to be green. We could do that with the class selector. However, since we want to apply this rule to any li inside a ul list, we could do it directly using the element selector.
Example:

li { color: green; }

Also, if we want to ensure that only the list items of the ul will take this style, we can write:

ul li { color: green; }

Navigation bar

Moving to practical use of ul lists, we will show some basic rules that we apply to create a navigation bar.
In general, <ul> of a navigation bar should have no bullets and browser default settings.
To remove bullets of the <ul> we should give the value none to the property list-style-type.
Example:

ul { list-style-type: none;}

To remove the browser default settings we should remove the default margin (the space around elements, outside of any defined borders) and padding (the space around elements, inside of any defined borders).
Example:

ul { list-style-type: none;
  margin: 0;
  padding:0;
}

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
         .squarelist { list-style-type: square;}
         ol li { color: magenta; }
     </style>
   </head>
   <body>
     <ul class="squarelist">
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ul >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ol >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ol>
   </body>
</html>

will create a page displayed as:

style to a specific context

For more information: https://www.w3schools.com/css/css_list.asp

Exercise

Open your editor, create a new file and save it as exersice04.1.03.html in the folder "Exercises".
Copy the above code and paste it in the new file.
Modify and save the file. The browser's output should be as shown in the following image:

style to a specific context

Solution: