[CSS 1/3] Color, Font, Size

New link for CSS

https://CSS-practice.jhc6.repl.co

 Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

1. Change the color of Text

We can change text color like this 

<h1 style="color: blue;">Cat world</h1> 

2. Use CSS selectors to Style Elements

With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. 

When you entered <h1 style="color: red;">Cat world</h1>, you were styling that individual h1 element with inline CSS, which stands for Cascading Style Sheets.

That's one way to specify the style of an element, but there's a better way to apply CSS.

At the top of your code, create a style block like this:

<style>
</style>

Inside that style block, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:

<style>
  h2 {
    color: red;
  }
</style>

Note that it's important to have both opening and closing curly braces ({ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.

3. Use a CSS class to style an Element

Classes are reusable styles that can be added to HTML elements.

Here's an example CSS class declaration:

<style>
  .blue-text {
    color: blue;
  }
</style>

You can see that we've created a CSS class called blue-text within the <style> tag. You can apply a class to an HTML element like this: <h1 class="blue-text">Cat world</h1>. Note that in your CSS style element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.

4. Change the font size of an Element

Font size is controlled by the font-size CSS property, like this:

h1 {
  font-size: 30px;
}

5. Set the Font Family of an element

You can set which font an element should use, by using the font-family property.

For example, if you wanted to set your h2 element's font to sans-serif, you would use the following CSS:

h2 {
  font-family: sans-serif;
}

6. Import a Google Font

In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.

Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.

So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).

To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening style element):

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:

font-family: FAMILY_NAME, GENERIC_NAME;

The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.

Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the "Open Sans" font, but not to use the Lobster font.

7. Specify How Fonts should Degrade

There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif.

When one font isn't available, you can tell the browser to "degrade" to another font.

For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica isn't available, you will specify it as follows:

p {
  font-family: Helvetica, sans-serif;
}

Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.

8. Size Your Image

CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.

For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:

<style>
  .larger-image {
    width: 500px;
  }
</style>

I made like this

<style>
  .fixed-image {
    width: 200px;
  }
</style>

<img class="fixed-image" src = "https://st1.latestly.com/wp-content/uploads/2021/08/31-6-784x441.jpg"  alt ="cute cat">

Now you got better size of the picture.

Website link again

https://CSS-practice.jhc6.repl.co