What is CSS Style and how it works?

What is CSS Style and how it works?

Hey ! Now that we have completed HTML course. It’s time to introduce Style CSS. For those who are new in programming languages or declaratives languages you need to start your long journey by learning HTML and CSS.

Then if you are reading this means that you have understood even a little bit what is Html ?

CSS stand for for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. it can control the layout of multiple web pages all at once.

Css logo thumbnail

Basic implementation of CSS

Awesome website don’t only display images, links and text they also have style ! For example in a paragraph we can underline, change the colour, italicise , apply a background-color and more with CSS

Let’s now see how it works.

To add style to a HTML element, we will introduce the style Attribute in the tag.

<!DOCTYPE html>
  <html>
    <head>
        <title> Css Style attribute </title>
    </head>
    <body>
     <h1 style ="color:red "> Welcome to my webpage </h1> 
    </body>
   </html>

When we write something like this: color:red; color:green; color:orange. We are adding a declaration, declaration is css not html. A Declaration is made out of a property like color and a value like red.

There are many CSS properties :

  • Color: red;
  • Background-color: red;
  • Font-size: 20px;
  • Font-weight: bold;

It’s is possible to add as many properties as we want as long as we end each one with a semicolon (;).

<!DOCTYPE html>
  <html>
    <head>
        <title> Css Style attribute </title>
    </head>
    <body>
     <h1 style ="color:red;Background-color: blue"> Welcome to my webpage </h1> 
    </body>
   </html>

That’s it, now you know what is CSS and how it works. In more incomings posts we will talk about more features off CSS.

3 thoughts on “What is CSS Style and how it works?

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!