Cascading Style Sheets, also known as CSS, are what form a computer-based language describing the presentation of HTML and XML documents. All standards defining CSS are published by the World Wide Web Consortium (W3C). Introduced in the mid-1990s, CSS became more commonly used in website design and properly supported by web browsers after 2000.Wikipedia
selector refers to the name of the HTML element. Selectors are used to target the elements to which we wish to apply styles.
property refers to the style effect we wish to apply. There are a number of CSS properties used to format elements.
value refers to the property value we wish to apply.
Below is an example of how to apply a green colour to HTML paragraph elements:
How is CSS used?
In HTML elements, as part of a style attribute
<p style="color:green;">My text</p>
As part of a style tag in the HTML head
In an external .css file
We recommend using an external .css file for improved readability, maintenance and style-sharing between several HTML files. The third option is therefore the best. To achieve this, simply create a file with a .css extension and place it in your project along with the .html file.
Then, add a reference to the style.css file in the index.html file head so it takes all styles into consideration:
<link rel="stylesheet" href="style.css">
id attributes and class
Using HTML element names as selectors for applying styles will soon become very restrictive. This is where selector attributes come in. They are merely HTML attributes used to apply a specific name to our elements, and there are two different ones:
- id ->
<p id="paragraph">My text</p>
- class ->
<p class="paragraph">My text</p>
In CSS, an id is used with a hash sign (#) in front and a class has a dot (.) in front:
The only difference between the two is that an id can be used on just one element within an HTML page. A class can be used on as many elements as you like.