class
and id
to specify properties for selected elements.How can you color one particular headline differently than the other headlines on your website? How can you group your links into different categories and give each category a special style? These are just examples of questions we will answer in this lesson.
Grouping elements with class
Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this:show example
Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.
To achieve this, we divide the links into two categories. This is done by assigning a class to each link using the attribute
class
.Let us try to specify some classes in the example above:
We can hereafter define special properties for links belonging to whitewine and redwine, respectively.
show example
As shown in the example you can define the properties for elements which belong to a certain class by using .classname in the style sheet of the document.
Identification of element using id
In addition to grouping elements, you might need to identify one unique element. This is done by using the attributeid
.What is special about the attribute
id
is that there can not be two elements in the same document with the same id
. Each id
has to be unique. In other cases, you should use the class
attribute instead. Now, let us take a look at an example of a possible usage of id
:The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an
id
to each chapter as followsLet us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:
show example
As shown in the example above you can define the properties in a specific element by using #id in the stylesheet of the document.
Summary
In this lesson we have learned that through the use of the selectors,class
and id
, you are able to specify properties for specific elements. In the next lesson, we will take a closer look at two HTML-elements which is widely used in connection with CSS:
<span>
and <div>
.
Thank you a lot fοг sharing this wіth all of us you actuаlly
ReplyDeleterecognizе what yоu're talking approximately! Bookmarked. Please additionally seek advice from my web site =). We will have a hyperlink exchange arrangement among us
Have a look at my weblog: come si crea un sito creare un Sito web creare un sito web
I am truly delighted to read thiѕ blog posts which carries
ReplyDeletetons of useful facts, thanks for providіng these κinds of datа.
Vіsit my wеb ρage; http://www.2of7.com/