Review CSS

CSS stands for Cascading Style Sheets, and it is a language used to style webpages and make them look nice.

CSS is used to style and lay out web pages.
For example, to alter the font, color, size, and spacing of your content, split it into multiple columns, and other decorative features.

In most code editors, you need both an HTML file (with extension .html) and a CSS file (with extension .css). Both the HTML and CSS files have to be linked.

The screenshot example below, shows us 2 different files (index.hmtl and style.css), and you can see the CSS file is referred to inside the HTML file (in the head tag and using the link tag)

Styling HTML tags with CSS:

To add style, such as color, size change, etc., you go to the CSS file and write a simple CSS code to change the property of the HTML tag or class you want to change.

Example: The CSS code example below changes all the HTML H1 tags to color blue:

h1 { color: blue; }

Classes:

Classes are attributes added to HTML tags to specify which element is to receive a particular style in CSS.

To specify a tag as part of a class, you have to use the class attribute within that tag:

Example: <h1 class="first-title"> Poem </h1>

Note: You make up the class name yourself, and you can specify different styles for the same HTML tag.

To style a specific class in CSS:

First, you reference the class by using a dot (.) followed by the class name.
After the class name, you simply enter the properties/values that you want to assign to your class.

CSS Example:

ID Attributes:

IDs are attributes added to HTML tags to specify which element is to receive a particular style in CSS.

You use the id attribute within that tag:

Note: You make up the ID name yourself, and you can ONLY use the ID once.

So, you cannot use the same ID name on multiple tags in the same HTML file.

To style an ID in CSS:

First, you reference the ID by using a # (hashtag symbol) followed by the ID name.
After the ID name, you simply enter the properties and values that you want to assign to your ID.

CSS Example:

IDs vs Classes

Classes and IDs seem very similar, but they are different:

You should use classes when your style needs to be applied multiple times on the same page.
For example, you might have many <h1> headings that need the same style.
You should use IDs if only one element on the page should have a unique style, such as the homepage welcome title.

Review HTML and CSS