A Closer Look at CSS- Learn how to style text and add background images with CSS.

• Why use CSS:

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.

• Link to a Stylesheet:

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:

<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.

Exercise:

Let's use the link element to connect index.html and main.css.

Inside the head element of index.html, insert a link element that connects index.html and main.css. Use the code snippet above as a guide.

Click Run and notice the effect in the browser:

1. main.css is now linked to index.html.


2. The CSS from main.css is now applied to the HTML elements in index.html.

• Anatomy of a CSS Rule:

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.

• font-family:

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:

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.

Exercise:

The website could be improved with a more stylish font.

In main.css, locate the h1 selector.

Inside of the { } brackets, add:

font-family: Palatino, 'Palatino Linotype', serif;


Click Run and notice the change to the words "Mystwood Publishers Ltd". Palatino is now the font.

• color:

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:

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.

• 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.

• 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).

Exercise:

1. h1 heading elements on the Mystwood Publishing website are colored black by default. Let's change them to red.

In main.css locate the h1 selector. Directly underneath the line of code where you added the font-family property, add:

color: red;

Click Run to view the color change in the web browser.

2. Replace red with a different named color. Here are some options:

AntiqueWhite
Chocolate
Darko Live Green
DeepSkyBlue

3. HEX color provide millions of different shades of colors.

Try replacing the named color with one of the HEX colors below.

# 2e69a3
# d8dabe
#dabe by
#799575

Click Run to see the result in the web browser.

4. The HEX colors listed in the previous step can also be created using RGB values. Try this out by swapping out the HEX color value on the left for the RGB value on the right. See the result in the browser.

HEX RGB
#2e69a3 rgb(46,105,163)
#d8dabe rgb(216,218,190)
#dabece rgb (218,190,206)
#799575 rgb(121,149,117)

• CSS Class Selectors:

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:

<div class="header">
  <h2>Heading</h2>
  <p>Paragraph</p>
</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.

Here's a refresher on parent and child elements.

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

.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.

Exercise:

Websites often use more than one font family.

In index.html, the h2 heading and paragraph elements are contained inside a div with a class of hero.

In main.css, add properties for the .hero class selector that change the font-family to 'Trebuchet MS', with fallbacks of Helvetica and sans-serif. You can use the code below as a guide:

.hero {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
IMPORTANT: in main.css, two properties, padding and margin, are seen with the .hero selector. We will cover these in unit III, CSS Boundaries and Spacing.

Click Run to view your changes in the web browser.


Notice how child elements of the div with class hero now appear in the Trebuchet MS font.

• font-size:

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.

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.

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

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.

em: A relative value that changes in proportion to the size of the parent element. 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.

Exercise:

1. The h2 heading for the Mystwood Publishing website would be more impressive if its font size were larger.

In main.css, locate the h2 selector and set font-size to 48px.

Click Run and notice how the size of the heading increases in the web browser.

2. 48px may still be too small for a heading. Change the font-size value of the h2 selector to 56px.

Click Run and notice the font size increase in the web browser.

3. Now, let's get some experience using rem values.

In main.css, for the p selector, add:

font-size: 2rem;
Click Run to see the result in the web browser.

The paragraph element on the webpage should double in size.

Note: The paragraph element at the bottom of the page has also increased in size. We will fix this effect later on in the lesson.

4. Now let's resize anchor elements that are children of elements with the "hero" class using em values.

In main.css locate the .hero a selector. Change the font-size property to 1.25em;.

Click Run to see the anchor element's size decrease.

• A Background Image:

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

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

The CSS rule above assigns the image hosted at

https://s3.amazonaws.com/codecademy-content/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:

.hero {
  background-image: url("https://s3.amazonaws.com/codecademy-content/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.

Exercise:

1. Let's add a background image to the Mystwood Publishing homepage.

In main.css, locate the .hero class selector. Inside the rule, insert a background image. Here is a URL for a great photo to use:

https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg
Remember, in order for the background image to work, you will need to include url and parenthesis in the property's value:

background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg");
And, the image URL must be contained within quotation marks.

Click Run and notice the background image assigned to the .hero div in the web browser.
2.
In the web browser, you may notice that the background image seems rather "close up". We can make it so that more of the image is seen by using the background-size property.

In main.css, in the .hero selector below the background-image property, add background-size: cover;.

Click Run and notice the change in the web browser: much more of the original photo is viewable within the .hero div.
3.
Finally, now that a background-image covers the .hero div, the black font color makes it difficult to read the text of the h2 and p.

In main.css, give the .hero selector a color property of #ffffff, which is the HEX code for white.

• CSS id 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:

<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:

#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.

Exercise:

1. In the exercise titled "font-size", we enlarged the font-size property for paragraph elements. This unintentionally increased the size of the paragraph which reads, © 2016 Mystwood Publishers Limited at the bottom of the webpage. We can use an id attribute to fix this effect.

In index.html, locate the paragraph element mentioned above. Set its id to "footer":

<p id="footer">&copy; Mystwood Publishers Limited</p>
Click Run to continue.

2.In main.css, add a new id selector. Use #footer as the name of the id selector.

#footer {
}

Click Run to continue.

3. Give #footer a font-size property of 0.75rem.


Click Run to see what changed in the web browser: the "footer" paragraph is now sized 0.75rem.

• CSS review:

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.
WEB CONCEPTS

# CSS: Language used to style websites. Colors, fonts, and page layouts for a site are managed using CSS.

# CSS Selectors: specifies exactly which HTML elements to style

* class selectors: used to target classes of HTML elements
* id selectors: used to style an HTML element which has an id attribute.

# External Stylesheet: CSS file that styles an HTML file externally via the HTML link element.

CSS PROPERTIES:

• font-family: sets font for a CSS selector.
• color: sets font color for the CSS selector.
• font-size: sets font size for text.
• background-image: sets a background image of your choosing for a given selector.