A Brief History of CSS

Cascading Style Sheets (CSS) is a language used to describe the look and formatting of a document written in HTML or XML. The first version of CSS was proposed in 1994 by Håkon Wium Lie, who was working at the time for the company CERN, the birthplace of the World Wide Web. The first web browser to support CSS was Internet Explorer 3, released in 1996. Since then, CSS has been a crucial part of web design and development.

Introduction to CSS

CSS is used to style and format HTML documents. With CSS, you can change the color, font, size, and layout of your web pages. CSS works by selecting elements in an HTML document and applying styles to them. You can apply styles to an element by using CSS selectors.

CSS Syntax

CSS syntax consists of two parts: a selector and a declaration block. The selector selects the HTML element(s) that you want to style, and the declaration block contains one or more property-value pairs that define the style.

selector {
  property: value;
  property: value;
  ...
}

For example, to change the font color of all the headings in an HTML document to blue, you can use the following CSS code:

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

CSS Units

CSS supports various units of measurement, including pixels (px), em, rem, and percentages (%). Pixels are an absolute unit of measurement, while em and rem are relative units. Percentages are also relative units that are used to specify a percentage of the parent element’s size.

Most Important CSS Tags

Here are some of the most important CSS tags that you should know:

1. color
2. font-family
3. font-size
4. background-color
5. border
6. margin
7. padding
8. text-align
9. text-decoration
10. display
11. width
12. height
13. float
14. position
15. z-index
16. overflow
17. box-shadow
18. transition
19. transform
20. animation

Semantic Use of Tags

In addition to its presentational capabilities, CSS also supports the use of semantic tags. Semantic tags are HTML tags that carry meaning, and their use can improve the accessibility and search engine optimization (SEO) of your web pages. Some examples of semantic tags include:

• <header>
• <nav>
• <main>
• <section>
• <article>
• <aside>
• <footer>

By using semantic tags in your HTML and styling them appropriately with CSS, you can create web pages that are more readable, accessible, and SEO-friendly.

That’s it for Chapter 1-b. In the next chapter, we will cover JavaScript, the third pillar of web development.