Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

## Adding CSS to your projects
There are three ways to load CSS into a web page:

- Using a `link` tag
- Using `style` tags
- Using `inline` styles




Let’s take a closer look at each method:

## Using a `link` tag
One of the most effective ways to use CSS is to use a **`link` tag**. This is because our CSS file is connected to all our web pages, so when we make changes to the CSS file, they’re reflected on all of the website’s pages.

We add a `link` tag with the `href` attribute pointing to the CSS file we want to include.
> This line of code should be added inside the `head` tag of the site (and not inside the `body` tag) as follows:

```html
<link rel="stylesheet" type="text/css" href="styles.css">
```

Also, the `rel` and `type` attributes are required because they tell the browser which kind of file we’re linking. An explanation of these attributes is given below:

- The **`rel`** attribute identifies the relation between the current document and the linked document.
- The **`type`** attribute specifies the media type.
- The **`href`** attribute provides the location of the document.

We’re free to link up as many CSS files as we’d like. However, for smaller websites, a single CSS file is desirable because our page will load faster when it only needs to find one style sheet file.

<html>
<head>
    
    <link rel="stylesheet" href="CSS.css">
</head>
<body>
<h1>Welcome to the CSS course!</h1>
<p>Learn how to add CSS using the style tag internally.</p>
</body>
</html>

body {background-color: #E9F3F8;}
h1   {color: #14288A;}
p    {color: #C44536;}


codemirror

## Using a `style` tag
We can use CSS directly inside a **`style` tag**, like so:

<html>
<head>

<style>
body {background-color: #E9F3F8;}
h1   {color: #14288A;}
p    {color: #C44536;}
</style>

</head>
<body>
<h1>Welcome to the CSS course!</h1>
<p>Learn how to add CSS using the style tag internally.</p>
</body>
</html>

This way, we don’t have to create a separate CSS file. 

The point of CSS is to separate our presentation from our document structure - so the `style` tag is not the best practice. However, it can be an excellent way to test some CSS before working with a separate file quickly.

## Using inline style

Another way to add CSS to a web page is to use **inline style**. We can add a `style` attribute to an HTML tag and put our CSS in double quotes:

```html
<div style="">...</div>
```

### Example 

Let’s alter the `background-color` of the `<div>` element to orange using the inline style technique

<html>
 <head>
 </head>
 <body>
   <div style="background-color:  #E9F3F8;">Welcome to CSS course!</div>
 </body>
</html>

### Example 2



Let’s set the font-size to 
`32
32px` on our `<h1>` tag and change the background and font colors.

<html>
 <head>
 </head>
 <body>
   <h1 style="background-color:  #E9F3F8; font-size: 32px; color:  #14288A;">Welcome to the CSS course!</h1>
 </body>
</html>

>**Note:** The unit px stands for **pixels** , we’ll review at CSS units in more detail later in the course.

# Adding CSS to your projects
There are three ways to load CSS into a web page:

- Using a `link` tag
- Using `style` tags
- Using `inline` styles




Let’s take a closer look at each method:

# Using a `link` tag
One of the most effective ways to use CSS is to use a **`link` tag**. This is because our CSS file is connected to all our web pages, so when we make changes to the CSS file, they’re reflected on all of the website’s pages.

We add a `link` tag with the `href` attribute pointing to the CSS file we want to include.
> This line of code should be added inside the `head` tag of the site (and not inside the `body` tag) as follows:

```html
<link rel="stylesheet" type="text/css" href="styles.css">
```

Also, the `rel` and `type` attributes are required because they tell the browser which kind of file we’re linking. An explanation of these attributes is given below:

- The **`rel`** attribute identifies the relation between the current document and the linked document.
- The **`type`** attribute specifies the media type.
- The **`href`** attribute provides the location of the document.

We’re free to link up as many CSS files as we’d like. However, for smaller websites, a single CSS file is desirable because our page will load faster when it only needs to find one style sheet file.

# Using a `style` tag
We can use CSS directly inside a **`style` tag**, like so:

This way, we don’t have to create a separate CSS file. 

The point of CSS is to separate our presentation from our document structure - so the `style` tag is not the best practice. However, it can be an excellent way to test some CSS before working with a separate file quickly.

# Using inline style

Another way to add CSS to a web page is to use **inline style**. We can add a `style` attribute to an HTML tag and put our CSS in double quotes:

```html
<div style="">...</div>
```

## Example 

Let’s alter the `background-color` of the `<div>` element to orange using the inline style technique

## Example 2



Let’s set the font-size to 
`32
32px` on our `<h1>` tag and change the background and font colors.

This way, we don’t have to create a separate CSS file. 

The point of CSS is to separate our presentation from our document structure - so the `style` tag is not the best practice. However, it can be an excellent way to test some CSS before working with a separate file quickly.

# Using inline style

Another way to add CSS to a web page is to use **inline style**. We can add a `style` attribute to an HTML tag and put our CSS in double quotes:

```html
<div>...</div>
```

## Example 

Let’s alter the `background-color` of the `<div>` element to orange using the inline style technique

Learn about the different ways to add CSS to HTML files.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Adding CSS to Your Projects