Lessons menu
CSS - intermediate - Lesson nr. 1
Coloring texts

What this lesson is about?

In this lesson we take a first look at the usage of the CSS language. We will apply some easy formatting settings to the HTML documents. In this lesson we will insert CSS keywords to different places: we add color to different texts. Colors can be defined with English color names or numbers, we use color names in this lesson and numbers in the next one.

About CSS:

• The abbreviation CSS comes from the Cascading Style Sheet phrase.
• The use of CSS is formatting HTML documents.
• The browser uses the formatting closer to the HTML tag targeted – we will have the opportunity to try this in the exercises.

New HTML tags of this lesson:

<style></style> - with this tag we mark in the header of the HTML document the possible CSS formatting referring to the document.
<link> </link> - using this tag in the header of a HTML document we can refer to outside CSS files. We used this tag once before for inserting a small picture beside the title of the webpage, which is called favicon.


New HTML attribute in this lesson:

style – this attribute can be used with every HTML tag, so we can define CSS formatting referring to an HTML tag.


New CSS property in this lesson:

color – we can set the color of a text with this CSS keyword.



In the example above, we changed the text color of a header to red. We use the style attribute in the <h1> tag.
This is an inline style referring only to this tag.
In the part color:red; the color keyword is a CSS property, the red  is its value.


In the example above the style is set in the HTML document`s header. This way the color setting is referring not only to one title, but to every <h1> tag in the document.
The <style> tag appears additionally in the head part of the document, the h1 selector defines that the formatting in the brackets are to be used to every first level heading.

In the example above, the CSS formatting gets out from the HTML document, to a file having css extension. We have to create a separate file and use the <link> tag to refer to this style sheet. This way we can use the same CSS file in multiple HTML documents – they only need to refer to it.

1. Choose a color from the list on the https://www.w3schools.com/colors/colors_names.asp page and use it in the index.html to the Coders Work header. Give the color directly in the <h1> tag.
View the result
2. Add color style to the toplangs.html files header. This setting should apply only to the h3 tags, and change their color. Choose the color from the list provided in the previous exercise.
View the result
3. In the index.html file add a color to the caption of the picture. Use the <style> tag in the header part to define this color.
View the result
4. Create an empty file with the name style.css in the folder of the webpage. You can create it by saving from the Notepad++ program too. Change the color of every paragraph to a color of your choice. Apply the CSS file to every HTML document in your folder using the <link> tag. Change the color and check that the color changes in every document.
View the result
5. Apply a new color to the second level headers in the HTML documents in your folder, by adding the setting to the style.css file. Add to the style.css file a color setting for the <body> tag and check that this setting will be applied to the texts we did not color before.
View the result
1. When do we use the HTML tag named style?
2. Why is it advantageous to write the formatting in a CSS file?
3. After processing the code below, which color will the text appearing have?
In the style.css: p { color: red; }
In the index.html:
<link rel="stylesheet" type="text/css" href="style.css">
p { color:blue; }
<p style="color:green;"> Text </p>
4. As a result of the HTML and CSS codes below, which color will the text Some text have?
HTML part:
<h1><p>Some text</p></h1>
CSS part:
h1{  color: red; }
body { color: blue; }
p{ color: green; }
Supplementary information
You can read about links and you can exercise visiting the following links:
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept