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.
• 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.
<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.
style – this attribute can be used with every HTML tag, so we can define CSS formatting referring to an HTML tag.
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.
In the style.css: p { color: red; }
In the index.html:
…
HTML part:
https://www.w3schools.com/css/css_colors.asp
https://www.w3schools.com/colors/colors_names.asp