Submodule 4.1: Selectors
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Web Design and Digital Content Production |
| Book: | Submodule 4.1: Selectors |
| Printed by: | Guest user |
| Date: | Thursday, 21 November 2024, 9:26 PM |
Description
- id
- Class and multiple classes
- specific context (ul li)
- Group the selectors
id Selector
Earlier we show that element selectors can be used to define the element at which we want to apply our styles.
However, there are additional selectors. The id is one of them.
The id selector is created by a hashtag # followed by the selector’s name. The name can be anything but it cannot start with a digit or a dash.
The id selector selects elements with a specific id attribute (name).
Thus in our CSS the id will be:
#myname { border: 2px solid black; }And in the HTML we will have:
<p id=”myname”>This paragraph will have a black border
When we use id selectors?
The basic rule is that id is unique. This means that one id will only exists once in the HTML page and that each element can contain only one id.
Since ids are unique, we only use them if we want to apply a specific style in an element to distinguish it from its surroundings elements.
For example we may have 100 paragraphs to which we have applied the following style:
p { text-align:center; font-size: 1em; }Assume that we want one of these paragraphs to displayed in italics. This can be achieved by applying an id to the specific paragraph. Thus in our CSS we will have:
#italicparagraph { font-style: italic; }And in our HTML:
<body>
<p> </p>
………
<p id=” italicparagraph”> My italic paragraph </p>
..
<p> </p>
</body>
However, if we want more than one paragraph to displayed in italics, then id should not be used.
That being said, if you try to use id for this propose you will indeed have the desired result. However, your code will not be functional for JavaScript, as we will see later in the course.
There is an alternative selector that is appropriate for this case which is explained in the next section.
Example
The CSS rules:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#rainbowColors {background: grey}
#red {background: red}
#orange {background: orange}
#yellow {background: yellow}
#green {background: green}
#blue {background: blue}
#indigo {background: indigo}
#violet {background: violet}
</style>
</head>
<body>
<ul id="rainbowColors">
<li id="red">Red</li>
<li id="orange">Orange</li>
<li id="yellow">Yellow</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
<li id="indigo">Indigo</li>
<li id="violet">Violet</li>
</ul>
</body>
</html>
will create a page displayed as:
Exercise
- Open your editor, create a new file and save it as
exersice04.1.01.htmlin 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:
Class selector
class is another type of selector. In contrast with id, class is not unique. This means that the same class can be used multiple times in an HTML page.
The class selector is created by a period . followed by the selector’s name. The class selector selects elements with a specific class attribute (name).
Thus in our CSS the class will be:
.mypadding {padding-top: 5px;}And in the HTML we will have:
<p class=”mypadding”> This paragraph will have 5px padding from top </p>Moreover, an element can have multiple classes.
Example:
<p class=”mypadding myborder mycenter myfontsize”> This paragraph has reference to four classes </p>When we use class selectors?
Class selectors are used when we want to apply the same style to multiple elements on our page but not to every element of the same type.
Imagine that you have a page with 100 <p> and 5 <ul> lists.
Assume that you want to apply the same style to 50 of these <p> tags and 1 <ul> list. In this case, class is the appropriate selector.
If you wanted to apply the same style to all <p> tags, then the appropriate selector would be the element selector.
Example
The CSS rules:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.fontBlue {color:blue}
.fontRed {color:red}
.baclLime {background:lime}
.backGrey {background:lightgrey}
</style>
</head>
<body>
<p class="fontBlue baclLime">My first paragraph</p>
<p class="fontBlue backGrey">My second paragraph</p>
<p class="fontRed baclLime">My third paragraph</p>
<p class="fontRed backGrey">My fourth paragraph</p>
</body>
</html>
will create a page displayed as:
Exercise
- Open your editor, create a new file and save it as
exersice04.1.02.htmlin 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:
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:
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.htmlin 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:
Group the selectors to apply styles
Assume that we want to apply the same style to different elements. For example we want all our h3, h4 and p elements to be centered aligned. With what we have learned, we would do that as follow:
h3 { text-align: center;}
h4 { text-align: center;}
p { text-align: center;}However, there is an alternative way to do that by grouping our selectors. In this case each selector is separated from the next one by a comma (,).
By doing this we minimize the code that we have to write.
So, the above can be written as:
h1, h3, p { text-align: center;}
For more information about selectors: https://www.w3schools.com/css/css_syntax.asp