Basics of CSS

css html basics of css web developement
Basics of CSS

In this blog we will be going through the basics of CSS, and by the end of this blog you will be able to stylize and create awesome webpages.

What you'll learn

  • What is CSS?
  • Why to use CSS?
  • Applying CSS to HTML
  • Anatomy of CSS code
  • Fonts and Text in CSS
  • Everything about boxes in CSS
  • Positioning and Styling the webpage

Prerequisites

  • Basic word processing using any text editor. (VS code recommended)
  • Basic knowledge in HTML

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.

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

  2. Next, delete the existing rule you have in your style.css file. Well let's not continue again with lots of blue text.
  3. 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; 
    }
  4. 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

3