CSS Course

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

In this Course, You will learn about the basics of CSS and also learn about designing your websites with CSS.

"Click on any of the Lessons and it will open a new window of the Tutorial"

"Introduction of CSS Course"

1. What is CSS
2. How does CSS Works
3. Colors and Backgrounds
4. Fonts
5. Text
6. Links
7. Identification and Grouping of Elements (class and id)
8. Grouping of Elements (span and div)
9. The Box Model
10. Margin and Padding
11. Borders
12. Height and Width
13. Floating Elements (floats)

PLEASE SHARE

Tweet

Read More

Floating elements (floats) - CSS Tutorial 13

Floating elements (floats)

An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle:

If we for example would like to have a text wrapping around a picture, the result would be like this:

How is it done?

The HTML code for the example above, look as follows:

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <p>causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 
 

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture and thereafter set the property float to left:

 
 #picture {
  float:left;
  width: 100px;
 }
 
 

The Result:

A floating image

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.
Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror.
Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Another example: columns

Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML-code with <div> as follows:

 
 <div id="column1">
  <p>Haec disserens qua de re agatur
  et in quo causa consistat non videt...</p>
 </div>

 <div id="column2">
  <p>causas naturales et antecedentes, 
  idciro etiam nostrarum voluntatum...</p>
 </div>

 <div id="column3">
  <p>nam nihil esset in nostra 
  potestate si res ita se haberet...</p>
 </div>
 
 

Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by defining the property float:

 
 #column1 {
  float:left;
  width: 33%;
 }

 #column2 {
  float:left;
  width: 33%;
 }

 #column3 {
  float:left;
  width: 33%;
 }
 
 

The Result:

Columns

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit m







float can be set as either left, right or none.

The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall behave.

By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates.

The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <h1>Bill Gates</h1>

 <p class="floatstop">causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 
 

To avoid the text from floating up next to the picture, we can add the following to our CSS:

 
 #picture {
  float:left;
  width: 100px;
 }

 .floatstop {
  clear:both;
 }
 
 

The Result:

A floating image

Bill Gates

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror.
Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Summary

Floats are useful in many situations and will often be used together with positioning. In the next lesson we will take a closer look at how to position a box, either relative or absolute.

PLEASE SHARE

Tweet

Read More

Height and Width - CSS Tutorial 12

Up until now, we have not cared much about the dimensions of the elements we have worked with. In this lesson, we will take a look at how you easily can define the height and width of an element. These two things would be discussed in our this lesson.

• width
• height

Setting the width [width]

With the width-property, you can define a certain width of an element.

The simple example below provides us with a box wherein text can be typed:

 
 div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

The Result:

200px width <div> with text

volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium

Setting the height [height]

In the example above notice how the height of the box is set by the content of the box. You can affect the height of an element with the property height. As an example let us try to make the box in the example 500px high:

 
 div.box {
  height: 500px;
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

The Result:

200px width and 500px height <div> with text

volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium

Summary

Lesson 9 have given you an introduction to the box model in CSS. As you can probably see, the box model gives you many new options. You might have been using tables in HTML to create your layouts until now, but with CSS and the box model you should now be able to achieve elegant layouts more precisely and in accordance with the recommendations of W3C.

PLEASE SHARE

Tweet

Read More

Borders - CSS Tutorial 11

Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages. We will discuss the following things in our this tutorial.

• border-width
• border-color
• border-style
• border

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 8 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.

The values none or hidden can be used if you do not want any border.

Examples of defining borders

The three properties described above can be put together by each element and thereby produce different borders. To illustrate this, we will take a look at a document where we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty but it illustrates some of the many possibilities:

 
 h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
 }

 h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
 }

 p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
 }

 ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
 }
 
 

The Result:

Borders

 

Iste quidem veteres:

• inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.
• Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus
• ratione ruentis acervi, qui redit in fastos et annis miraturque.

Quod si tam Graecis novitas

Ennius et sapines et fortis et alter Homerus:

• critici
• dicunt
• leviter curare
• videtur
• quo promissa

Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.

Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem et praemia posci. Recte necne crocum floresque perambulet Attae fabula si dubitem, clament periisse pudorem cuncti paene patres, ea cum reprehendere coner, quae gravis Aesopus, quae doctus Roscius egit; vel quia nil rectum, nisi quod placuit sibi, ducunt, vel quia turpe putant parere minoribus, et quae imberbes senes.

It is also possible to state special properties for top-, bottom-, right- or left borders. The following example shows you how:

 
 h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
 }
 
 

The Result:

Different colors on borders

Compilation [border]

As it is also the case for many other properties, you can compile many properties into one using border. Let us take a look at an example:

 
 p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
 }
 
 

Can be compiled into:

 
 p {
  border: 1px solid blue;
 }
 
 

Summary

In this lesson you have learned about the endless options CSS gives you when using borders in your pages.

In the next lesson, we will look at how you define the dimensions in the box model - height and width.

PLEASE SHARE

Tweet

Read More

Margin & Padding - CSS Tutorial 10

Margin and padding

In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.

• Set the margin in an element
• Set the padding in an element

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.

As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

The CSS code for this would look as follow:

 
 body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
 }
 
 

Or you could choose a more elegant compilation:

 
 body {
  margin: 100px 40px 10px 70px;
 }
 
 

The Result:

Document with margins

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

 
 body {
  margin: 100px 40px 10px 70px;
 }

 p {
  margin: 5px 50px 5px 50px;
 }
 
 

The Result:

Document with margins

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

 
 h1 {
  background: yellow;
 }

 h2 {
  background: orange;
 }
 
 

The Result:

Headings and padding

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

 
 h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
 }

 h2 {
  background: orange;
  padding-left:120px;
 }
 
 

The Result:

Headings and paddings

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.

Summary

You are now on your way to master the box model in CSS. In the next lesson, we will take a closer look at how to set borders in different colors and how to shape your elements.

PLEASE SHARE

Tweet

Read More

The box model - CSS Tutorial 9

The box model

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:

The box model in CSS:

The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):

 
 <h1>Article 1:</h1>

 <p>All human beings are born free
 and equal in dignity and rights.
 They are endowed with reason and conscience
 and should act towards one another in a
 spirit of brotherhood</p>
 
 

By adding some color and font-information the example could be presented as follows:

The example contains two elements: <h1> and <p>. The box model for the two elements can be illustrated as follows:

Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.

The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:

• Lesson 10: The box model - margin & padding
• Lesson 11: The box model - border
• Lesson 11: The box model - height & width

When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.

Summary

In this lesson you have been introduced to the box model. In the following three lesson we will take a closer look at how to create and control elements in the box model.

PLEASE SHARE

Tweet

Read More

Grouping of elements (span and div) - CSS Tutorial 8

Grouping of elements (span and div)

The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.

In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.

• Grouping with <span>
• Grouping with <div>

Grouping with <span>

The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.

An example of this could be this Benjamin Franklin quotation:

 
 <p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
 
 

Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:

 
 <p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
 
 

The CSS belonging to it:

 
 span.benefit {
  color:red;
 }
 
 

The Result: 

Benjamin Franklin quotation - emphasized benefits

Early to bed and early to risemakes a man healthy, wealthy and wise.

Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.

Grouping with <div>

Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.

Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:

 
 <div id="democrats">
 <ul>
 <li>Franklin D. Roosevelt</li>
 <li>Harry S. Truman</li>
 <li>John F. Kennedy</li>
 <li>Lyndon B. Johnson</li>
 <li>Jimmy Carter</li>
 <li>Bill Clinton</li>
 </ul>
 </div>

 <div id="republicans">
 <ul>
 <li>Dwight D. Eisenhower</li>
 <li>Richard Nixon</li>
 <li>Gerald Ford</li>
 <li>Ronald Reagan</li>
 <li>George Bush</li>
 <li>George W. Bush</li>
 </ul>
 </div>
 
 

And in our style sheet, we can utilize the grouping in the exact same way as above:

 
 #democrats {
  background:blue;
 }

 #republicans {
  background:red;
 }
 
 

The Result:

U.S. presidents

• Franklin D. Roosevelt
• Harry S. Truman
• John F. Kennedy
• Lyndon B. Johnson
• Jimmy Carter
• Bill Clinton

• Dwight D. Eisenhower
• Richard Nixon
• Gerald Ford
• Ronald Reagan
• George Bush
• George W. Bush

In the examples above, we have only used <div> and <span> on very simple things such as text and background colors. Both elements have the potential to do much more advanced things. However this will not be introduced in this lesson. We will look into these later in this tutorial.

Summary

In lesson 7 and 8, you have learned about the selectors id and class and the elements span and div.

You should now be able to group and identify, more or less, all parts of a document, which is a big step in the direction of mastering CSS. In lesson 9 we will introduce you to the box model.

PLEASE SHARE

Tweet

Read More

Identification and grouping of elements (Class and ID) - CSS Tutorial 7

Sometimes you want to apply a special style to a particular element or a particular group of elements. In this lesson, we will take a closer look at how you can use 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:

 
 <p>Grapes for white wine:</p>
 <ul>
 <li><a href="http://upload.wikimedia.org/wikipedia/commons/7/76/Riesling_grapes_leaves.jpg">Riesling</a></li>
 <li><a href="http://blog.windsorvineyards.com/wp-content/uploads/2011/05/chardonnay4.jpg">Chardonnay</a></li>
 <li><a href="http://upload.wikimedia.org/wikipedia/commons/b/b3/Pinot-blanc.jpg">Pinot Blanc</a></li>
 </ul>

 <p>Grapes for red wine:</p>
 <ul>
 <li><a href="http://www.winesofchile.org/site/wp-content/uploads/2012/01/cabernet-sauvignon-03.jpg">Cabernet Sauvignon</a></li>
 <li><a href="http://www.kamiljuices.com/assets/images/grape-photos/italian/merlot.jpg">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>

 <p>Click on any of the Grape link and its picture will be opened</p> 
 

The Result:

Two groups of links

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for red wine:

• Cabernet Sauvignon
• Merlot
• Pinot Noir

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:

 
 <p>Grapes for white wine:</p>
 <ul>
 <li><a href="#" class="whitewine">Riesling</a></li>
 <li><a href="#" class="whitewine">Chardonnay</a></li>
 <li><a href="#" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Grapes for red wine:</p>
 <ul>
 <li><a href="#" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="#" class="redwine">Merlot</a></li>
 <li><a href="#" class="redwine">Pinot Noir</a></li>
 </ul>
 
 

We can hereafter define special properties for links belonging to whitewine and redwine, respectively.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }
 
 

The Result :

Two groups of links

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for red wine:

• Cabernet Sauvignon
• Merlot
• Pinot Noir

This is an example of a link without any class - it is still blue.

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 attribute id.

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:

 
 <h1>Chapter 1</h1>
 ...
 <h2>Chapter 1.1</h2>
 ...
 <h2>Chapter 1.2</h2>
 ...
 <h1>Chapter 2</h1>
 ...
 <h2>Chapter 2.1</h2>
 ...
 <h3>Chapter 2.1.2</h3>
 ...
 
 

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 follows:

 
 <h1 id="c1">Chapter 1</h1>
 ...
 <h2 id="c1-1">Chapter 1.1</h2>
 ...
 <h2 id="c1-2">Chapter 1.2</h2>
 ...
 <h1 id="c2">Chapter 2</h1>
 ...
 <h2 id="c2-1">Chapter 2.1</h2>
 ...
 <h3 id="c2-1-2">Chapter 2.1.2</h3>
 ...
 
 

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:

 
 #c1-2 {
  color: red;
 }
 
 

The Result :

Chapter 1

...

Chapter 1.1

...

Chapter 1.2

...

Chapter 2

...

Chapter 2.1

...

Chapter 2.1.2

As shown in the example above you can define the properties in a specific element by using #idname 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>.

PLEASE SHARE

Tweet

Read More