Introduction to CSS | Part 3 | Build Your Own Static Website | Cheat Sheet

-

1. Font Family

The CSS font-family property specifies the font for an element.

.main-heading {
  font-family: "Roboto";
}
.paragraph {
  font-family: "Roboto";
}

You can use one of the below values of the font-family property,

Value

Note:-

1. To use font families, you need to import their style sheets into your CSS file.
2. There shouldn't be any spelling mistakes in the values of the font-family property.
3. There must be quotations around the value of the font-family property.

2. Font Size

The CSS font-size property specifies the size of the font.

.main-heading {
  font-size: 36px;
}
.paragraph {
  font-size: 28px;
}

Note:-

1. You must add px after the number in the value of the font-size property.
2. There shouldn't be any space between the number and px .
3. There shouldn't be any quotations around the value of the font-size property.

3. Font Style

The CSS font-style property specifies the font style for a text.

You can use one of the below values of the font-style property,


.main-heading {

  font-style: italic;

}

.paragraph {

  font-style: normal;

}

Note:-

1. There shouldn't be any spelling mistakes in the values of the font-style property.

2. There shouldn't be any quotations around the value of the font-style property.

4. Font Weight

The CSS font-weight property specifies how thick or thin characters in text should be displayed.

.main-heading {

  font-weight: bold;

}

.paragraph {

  font-weight: 200;

}

You can use one of the below values of the font-weight property,



Note:-

1. There shouldn't be any spelling mistakes in the values of the font-weight property.
2. There shouldn't be any quotations around the value of the font-weight property.
3. The numerical values given to the font-weight property must be in the range from 100 to 900 and should       be  the multiples of 100 .

5. Text Decoration

The CSS text-decoration property specifies the decoration added to the text.

.main-heading {

  text-decoration: underline;

}

.paragraph {

  text-decoration: overline;

}

You can use one of the below values of the text-decoration property,


Note:-

1. There shouldn't be any spelling mistakes in the values of the text-decoration property.

2.  There shouldn't be any quotations around the value of the text-decoration property.

3. Ensure that text-decoration and line-through are hyphenated.

Example:-

HTML Code:-

<!DOCTYPE html>

<html>

  <head></head>

  <body>

    <h1 class="main-heading">Tourism</h1>

    <p class="paragraph">Plan your trip wherever you want to go</p>

  </body>

</html>

CSS Code:-

.main-heading {

  font-family: "Roboto";

  font-size: 36px;

  font-style: italic;

  font-weight: bold;

  text-decoration: underline;

}

.paragraph {

  font-family: "Roboto";

  font-size: 28px;

  font-style: normal;

  font-weight: 200;

  text-decoration: overline;

}

Output:-



Comments

Post a Comment

Popular posts from this blog

Introduction to CSS Box Model | Part 1 | Build Your Own Static Website | Cheat Sheet

-
Image
  CSS Box Properties 1. Height The CSS height property specifies the height of an HTML element. .card {   height: 200px; } 2. Width The CSS width property specifies the width of an HTML element. .card {   width: 250px; } CSS Background Properties 1. Background Image The CSS background-image property specifies the background image of an HTML element.  .card {   background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg"); } Warning:-  1. The background image takes the height of the content of an HTML element if you don't specify the height to  it. 2. The URL given to the background-image must be a valid URL to display the image.   2. Background Size The CSS background-size property specifies the size of the background image of an HTML element. .card {   background-size: cover; } Note:- Aspect Ratio is the ratio of the width and height (width/height) of an image. Example:- HTML Code:- <!DOCTYPE html...
Read more