Code n' Social

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:

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.

Examples:

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.

Exercises

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