TemiTech

CSS In Action

CSS In Action

Temitayo Olorunfemi's photo
Temitayo Olorunfemi
·

2 min read

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 :-)

TemiTech CSSCss basics