Learn CSS in 5 Minutes

CSS or Cascading Style Sheets is a language used to design a web page’s appearance. It is easy to learn, and this guide will help you grasp CSS basics in just five minutes.

How to implement CSS in any HTML project?

CSS can be included within an HTML project in any of the three ways:

Inline CSS (added to an HTML element directly)

      Example: 
      <!DOCTYPE html>
      <html>
            <head></head>
            <body>
                     <p style= “font-size: 20px; color: orange”>Hello CSS!</p>
            </body>
      </html>

Learning CSS

Internal CSS (added within the head tag towards the starting of the HTML code)

      Example: 
      <!DOCTYPE html>
      <html>
            <head>
                     <style>
                              p {
                                        font-size: 20px; 
                                        color: orange;
                              }
                     </style>
            </head>
            <body>
                     <p>5 Minutes!</p>
            </body>
      </html>

Learning CSS

External CSS (making an external stylesheet and integrating it with the HTML code)

      Example:
      HTML code
      <!DOCTYPE html>
      <html>
            <head>
                     <link rel=”stylesheet” href=”style.css”>
            </head>
            <body>
                     <p>Guide</p>
            </body>
      </html>

      CSS code
      p {
            font-size: 20px; 
            color: orange;
      }

Learning CSS

Syntax

Most developers use the External CSS method because it makes the main HTML code clean and more readable. The basic syntax of implementing External CSS is:

selector {property1: value;
        property2: value;
        …
        ...
        }

Selectors are used in style sheets to target the elements from the HTML code and apply styling to them. The types of Selectors in CSS are Elements, Classes, and IDs. Division (<div>), Header (<h1> to <h6>), Paragraph (<p>), etc., are the various Element tags while class or id can be assigned to an element as a marker which can be used as a selector while styling. The class name can be the same for multiple HTML elements, whereas Ids are unique for every element. Element tags are indicated by simply writing the tag in the style sheet.

Example:
div {
        color: blue;
        padding: 10px;
}
p {
        background-color: red;
        margin: 30px;
}

Class tags are indicated with a dot before the class name in the style sheet.

Example:
.homePage {
        color: red;
        font-family: Courier New;
}
.searchBox {
        text-align: center;
        padding: 40px;
}v

ID tags are indicated by the hashtag (#) symbol in the style sheet.

Example:
#page1 {
        background-color: black;
        color: white;
}
#page2 {
        background-color: white;
        color: black;
}

Properties in CSS are numerous style elements that can be implemented in a web page to make it look awesome. Every property has its distinct name and functions and is usually assigned a value that denotes the magnitude of its effect. It is impossible to mention all CSS properties in one guide. You can find many CSS cheat sheets on the internet that list all the properties and functions. Examples of the most commonly used properties in CSS are:

color: set the font color of the text
background-color: set the background color of a page
font-family: set the font of the text
text-align: set the horizontal alignment of inline elements
border: display a border around any element
display: specifies how an element should be displayed on the screen
padding / margin: set a padding / margin for an element

Conclusion

Congratulations! You have mastered the basics of CSS. You can now decorate your web page with your own style sheet.

Other useful articles: