Introduction

Web pages are created using HTML and CSS.

  • HTML is used to write a web page's content.

  • CSS is used to define the design and layout of the page.

The HTML to the right never changes. The same HTML file is styled three different ways by using three different CSS files. All the visual differences in color, font, and where elements are arranged on the page are a result of CSS.

CSS

h1 {
  color: red;
}
  • Try it out

    In the CSS rule to the right, change the color from red to yellow.

    
    

    CSS Rules

    CSS uses rules to style HTML elements. Here's how CSS rules work:

    1. A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here the h1 CSS selector selects all h1 HTML elements on the page.

    2. Inside the braces { }, a property and its value define what aspect of the h1 elements to style. Setting the color property to red changes the color of the h1 element to red.

    Together, a selector and its property-value pairs are called a CSS rule.

    Css-rule

    Class Attribute

    <div class="header">
      <h2>Heading</h2>
      <p>Subtitle</p>
    </div>
    
    <p> Hello world</p>
    

    Class Selector

    .header {
      color: blue;
    }
    
  • Combining Selectors

    .header p {
      color: blue;
    }
    
  • color

    The color property sets the color of an HTML element's text.

    We can use color names to change the text's color. But this only works for 140 colors.

    Instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors. RGB values and hex numbers express colors as different amounts of red, green and blue.

    • RGB values range from 0 to 255, with 255 being the brightest.

    • Hex numbers vary from 00 to ff, with ff being the brightest.

    Css-1

    Try it out

    Change the color from red to RGB value rgb(102,153,0).

    
    

    Try it out

    Change the color from red to hex number #9933CC.

    
    

    font-family

    The font-family property sets the font of an HTML element's text.

    Three fonts commonly used with font-family are:

    1. font-family: Arial, Helvetica, sans-serif;
    2. font-family: "Times New Roman", Times, serif;
    3. font-family: "Courier New", Courier, monospace;

    Google Fonts is a free collection of over 600 more web fonts that you can use on your page.

    Css-2

    Try it out

    Change the font-family from Shift, sans-serif to 'Open Sans', sans-serif.

    
    

    font-size

    The font-size property sets the size of an HTML element's text.

    Text size can be measured in pixels, ems, or rems. We will use pixels here.

    Css-3

    Try it out

    Increase the font-size to 60px.

    
    
  • ?