Styling the web: the power of CSS 🎨🖥😍

"I learned HTML in high school and then graduated to CSS. It's a great way to exercise my mind. But it's frustrating as hell." ~ Chris Bosh

We all know how tasking and essential finding the right outfit can be, likewise, every webpage must have a design that is both attractive and adequately depicts the function of the webpage. This is where CSS(Cascading Style Sheet) comes in, it is used to perform functions like adding background colour, editing font style and size, etc, to beautify and design the layout of a webpage. CSS files are saved with the extension (.css).

WAYS OF ADDING CSS

- Inline styling is when the CSS commands are placed in the opening tag of the HTML element using the "style'' attribute.
```
 <h1 style= "color:red; font-size:10px;"> Gracetoffy''s Blogg </h1>
```

- Internal styling is when the CSS commands are enclosed within the style tag in the head tag of the HTML document.

 !DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" 
     content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
 <style>
 h1{
 color: red;
 font-size: 10px;
 }
 </style>
 </head>
 <body>
     <h1>Gracetoffy's Blogg </h1>
 </body>
 </html>

-External styling is when an external style sheet is linked to the HTML file with the "link" tag. i.e. <link rel="stylesheet" href="style.css">

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
   <link rel="stylesheet" href="style.css">// the external css 
                         file(style.css), contains the css commands 
</head>
<body>
    <h1>Gracetoffy's Blogg </h1>
    <p>a fun and informative blog</p>
</body>
</html>

Basic CSS attributes

Below are some basic CSS attributes:

CSS command	Function
background-color	defines the background color of an HTML element eg. background-color: red;
color	defines the text color of an HTML element. eg. color: blue;
border [border: border-width, border-color, border-style]	short-hand property that defines the style of an element's border. eg. border: 10px red solid;
width	defines the horizontal length of an element .eg. width: 200px;
height	defines the vertical length of an element .eg. height: 400px;
padding	defines the space within the borders of an element. eg. padding: 10px;
margin	defines the space outside the borders of an element. eg. margin: 15px;
font-size	this defies the text size of elements. eg. font-size:20px;

Be sure to try out these attributes in your next project, thanks for reading :)

Gracetoffy's blog

Gracetoffy's blog

Styling the web: the power of CSS 🎨🖥😍

Table of contents

WAYS OF ADDING CSS

Basic CSS attributes