Styling the web: the power of CSS ๐ŸŽจ๐Ÿ–ฅ๐Ÿ˜

Styling the web: the power of CSS ๐ŸŽจ๐Ÿ–ฅ๐Ÿ˜

ยท

2 min read

"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

  1. - 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>
    
  2. - 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>
    
  3. -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 commandFunction
background-colordefines the background color of an HTML element eg. background-color: red;
colordefines 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;
widthdefines the horizontal length of an element .eg. width: 200px;
heightdefines the vertical length of an element .eg. height: 400px;
paddingdefines the space within the borders of an element. eg. padding: 10px;
margindefines the space outside the borders of an element. eg. margin: 15px;
font-sizethis defies the text size of elements. eg. font-size:20px;

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

ย