Fonts and Text in CSS

Now that we've covered some basic CSS fundamentals, let's improve the appearance of our example by adding more information to the style.css file.

Go to google fonts and select a font that you like, you can copy the lines of code that google gives you into your text editor. Add the <link> element somewhere inside your csstest.html's head (anywhere between the <head> and </head> tags). It will look like the example below:
```
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
```
This code will link your page to a style sheet that loads the Open Sans font family with your webpage.
Next, delete the existing rule you have in your style.css file. Well let's not continue again with lots of blue text.
Add the following lines (shown below), replacing the font-family assignment with your font-family selection from google fonts. The property font-family refers to the fonts you want to use for text. This rule defines a global base font and font size for the whole page. Since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family.
```
html {
  font-size: 40px; 
  font-family: "Open Sans", sans-serif; 
}
```
Now let's set font sizes for elements that will have text inside the HTML body (<h1>, <li>, and <p>). Let's centre the heading too. Finally, let's expand the second ruleset (shown below) with settings for line height and letter spacing to make body content more readable.
```
h1 {
  font-size: 40px;
  text-align: center;
}

p, li {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1px;
}
```

All these are just examples, feel free to experiment with different values to idenify and understand what changes occurs with change in values.

Discussion

PRAYASU SATAPATHY

@Prayasu

Mar 23 '21

Thanks for making this tutorial mate

Advay Anand

@Advay8

Oct 11 '24

Welcome brother

Overview

1. What is CSS?

2. Applying CSS to HTML Document

3. Anatomy of CSS Code

4. Fonts and Text in CSS

5. Everything about boxes in CSS

6. Positioning and Styling your webpage

7. Conclusion