Learn how to style text and add background images with CSS.

A Closer Look at CSS

In CSS, the *background-image* property sets a background image of your choice for a given selector, as seen below.  

```css
.hero {
  background-image: url("https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg");
}
```

The CSS rule above assigns the image hosted at 
```
https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg
```
to  elements that have a class attribute set to `hero`. 

To control the size of the chosen background image, use the property _background-size_ as seen below: 

```css
.hero {
  background-image: url("https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg");
  background-size: cover;
}
```
Here, we have specified that we want the image to completely cover elements with the `.hero` class.   

A Background Image

CSS is a language used to style websites. Colors, fonts, and page layouts for a site can all be managed using CSS. The more comfortable you are with CSS, the better equipped you will be to create stylish and contemporary-looking websites.   



Why Use CSS?

The size of text has an impact on how users experience a website. The *font-size* property sets the size of an HTML element's text. 

```css
h1 {
 font-size: 60px; 
}
```

In the CSS above, `font-size` is set to `60px`. In CSS, size can be assigned in _pixels_ (px), _rems_, or _ems_. 

1. _pixel (px)_: Standard unit of measurement for sizing fonts and other HTML elements. 

2. _rem_: Represents the default font size for the web browser. Rems can be used to ensure that HTML elements scale in proportion to each other on various web browsers and screen sizes. On most web browsers, `1rem` is equivalent to `16px`, `2rem` is equivalent to `32px` (a doubling), 3rem is equivalent to `48px` (a tripling) and so on. 

3. _em_: A relative value that changes in proportion to the `font-size` of the element on which `em` is used. Because `font-size` is an inherited property, this usually means the `em` value will change in proportion to the `font-size` of the parent element unless a `font-size` is explicitly set on the element on which `em` is used. For example, if a parent element has `font-size: 20px;`, child elements with `font-size: 1em;` would be equivalent to `20px`. Child elements with `font-size: 0.5em;` would be equivalent to `10px` (a halving) and so on. 

We will primarily explore px and rem values since these are the most commonly used today.

font-size

The new font looks great! However, black is not your only option when it comes to font color. 

In CSS, the *color* property sets the color of a CSS selector's font: 

```css
h1 {
 color: red;
}
```

CSS comes equipped with 140 _named colors_, such as `red`, used above. For many situations, these named colors will suffice. However, web developers who want to get even more exact with their color choices can use _hexadecimal_ and _RGB_ color values.
 
1. _Hexadecimal color (#RRGGBB)_: Hexadecimal values that represent mixtures of red, green and blue. For example, red can be expressed with the hexadecimal value of `#FF0000`: the value `ff` represents red, `00` represents green, and `00` represents blue. 

2. _RGB (Red, Green, Blue) colors_: Color created by three numbers representing red, green, and blue. When mixed together, the three values create a specific color. For example: purple can be represented as `rgb(128,0,128)`.

color

Congratulations! You worked hard and made it to the end of a challenging lesson. There were a lot of new concepts, so let's take a moment to review what you've learned.

CSS Review

Take a look at the web browser. Technically, this is the same site you saw in the previous exercise. It contains the exact same HTML elements and content as before. What's missing? The CSS that was used to previously style the site has been _unlinked_. 

The HTML _link_ element links a CSS file to an HTML file so that CSS styling can be applied. Here's an example of the link element: 

```html
<link rel="stylesheet" type="text/css" href="main.css"/>
```
About _link_: 

1. The link element uses three attributes: 
 -`rel`: Specifies the _relationship_ between the current file and the file being linked to: in this case, the `rel` attribute is "stylesheet". 
 -`type`: Specifies the type of file linked to. 
 -`href`: Provides the URL of the file being linked to. 
2. Like the HTML image element, link is self-closing. It does not need a closing tag. 
3. In the example above, __main.css__ is an external style sheet. Using external stylesheets is one of the most popular ways to write CSS. Inline CSS is another method.

Link to a Stylesheet

One of the most effective ways to enhance the look and feel of a website is by changing the font. In CSS, font is managed using the _font-family_ property:

```css
h1 {
  font-family: Georgia, serif;
}
```

Above, the `font-family` property of the `h1` selector is set to the value of  `Georgia`, with `serif` as a fallback font. Fallback fonts are included in case a visitor's web browser does not support the first font. Sometimes, more than one fallback font is included. 

font-family

Up to this point, we've used CSS to select an HTML element by its tag name only. However, we can use _class selectors_ to target classes of HTML elements. 

Consider the HTML below:

```html 
<div class="header">
 <h2>Heading</h2>
 Paragraph
</div>
``` 
Here, the `div` is the parent element and the `h2` and `p` are children. CSS styles applied to the `header` _class selector_ will automatically apply to the `h2` and the `p`.

<a href="https://www.codecademy.com/en/courses/make-a-website/lessons/site-structure/exercises/parent-child" target=_blank>Here's a refresher</a> on parent and child elements. 

In CSS, class selectors can be identified by a dot `.` followed by the class name, as seen below: 

```css
.header {
 color: #ffffff; 
}
```
As a result of this code, child elements of divs with the `header` class will have a font color of `#ffffff` (white). 

Below, we will use a CSS class selector to style more than one HTML element at once.

CSS Class Selectors

The background image makes a big difference. Nice work! 

A previous exercise introduced CSS class selectors to style HTML elements of specific classes. What if a webpage design calls for an individual page element to be styled uniquely, but all other elements of that kind to be styled a different way? 

For example, to style one anchor element differently than all the others on a webpage, you could use the HTML _id attribute_: 

```html
<a id="learn-code" href="https://www.codecademy.com">Click here to learn to code!</a> 
``` 

Then in the CSS file, you would create a rule for the id selector, using a `#` symbol: 

```css
#learn-code {
 color: #2e69a3; 
}
``` 

About using id:

1. An id attribute can only be used once because the id is unique to the element it is assigned to. 

2. Ids have greater specificity than classes. If an HTML element is using both id and class attributes, the CSS rule for the id will take precedence over that of the class. 

Below we will use an id selector to style a single HTML element differently than others of that kind on the webpage.

CSS id Selectors

Awesome job! Now __main.css__ is linked to __index.html__. Before we start writing our own CSS, let's take a look at how CSS code works. 

The diagram to the right shows the anatomy of a CSS rule: 

1. _rule_: a list of CSS instructions for how to style a specific HTML element or group of HTML elements. 

2. _selector_: specifies exactly which HTML elements to style. Here `h1` is the selector. 

3. _properties_ and _values_: located inside the `{ }` brackets, properties and values specify what aspect of the selector to style. In the diagram's example, the `color` property is set to `red`, which will display all `h1` elements in red. 

Click Next to continue.