CSS In Action

CSS In Action

Table of contents

As we already know, CSS stands for Cascading Style Sheets. It is used to add styles such as color, font designs, padding, margin e.t.c to a website or webpage.

CSS in Action

Using the external linking method (because it is most recommended):

1- Create an HTML file for example- index.html

2- Create a CSS file for example- Action.css

NOTE: The HTML file should have the extension of .html and the CSS file should have the extension of .css .


  • In the HTML file, include the broilerplate. Add the CSS link of the CSS file in the head element and add an h1 element in the body element.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML and CSS</title>
    <link rel="stylesheet" href="Action.css" type="text/css">
</head>
<body>
    <h1> HELLO WORLD </h1>
</body>
</html>

Save and open the file in a browser.

nothing added.PNG You'll get the above output since no CSS code has been included in the CSS file.

  • In the CSS file copy and paste or type the following:
body{
    background-color: black;
}
h1{
    color: aqua;
    text-align: center ;
    font-family: 'Franklin Gothic Medium';
    padding:25%;
}

EXPLAINING THE ABOVE CODE SNIPPET:

  • The first code block
    body{
      background-color: black;
    }
    
    Tells the browser to give the body a background color of black. The "HELLO WORLD" text didn't disappear...It is hidden in the black background because they are of same color.

background.PNG

  • The second code block

  • h1{
    color: aqua;
    ...
    ...
    }
    

    Tells the browser to give all h1 element's text an aqua color.

aqua text.PNG

  • h1{
    ...
    text-align: center;
    }
    
    Tells the browser to centralize all h1 element's text.

centralised.PNG

  • h1{
    ...
    ...
    font-family: 'Franklin Gothic Medium;
    }
    
    Tells the browser to give all H1 element's text the 'Franklin Gothic Medium' font family.

font family.PNG

  • h1{
    ...
    ...
    padding:25%;
    }
    
    Tells the browser to give "space" of 25% around all H1 elements.

padding.PNG


NOTE: Save as you write or type

Open the HTML file in a browser to get the below output

padding.PNG


There are alot of CSS property and property selector Click HERE to learn more about CSS.

CSS is INDEED a Styling Sheet :-)