CSS In Action
I am a developer from Nigeria A Computer Engineering student - ABU Zaria.
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.
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; }
The second code block
h1{ color: aqua; ... ... }Tells the browser to give all h1 element's text an aqua color.
h1{ ... text-align: center; }
h1{ ... ... font-family: 'Franklin Gothic Medium; }
h1{ ... ... padding:25%; }
NOTE: Save as you write or type
Open the HTML file in a browser to get the below output
There are alot of CSS property and property selector Click HERE to learn more about CSS.
CSS is INDEED a Styling Sheet :-)
