Learn CSS: Introduction & Basics

CSS is a Style Sheet language used for describing a presentation of Web pages like font, colors, and layout of the page. It helps to format a document written in a markup language (HTML). CSS was developed by World Wide Web Consortium.

It allows a web page to adapt the presentation to different types of devices such as large screens, small screens.

The latest version of CSS is CSS3. It provides JavaScript and mobile development features and so on.

Usage and Basic Syntax of CSS:

There are 3 ways to add CSS styles to the HTML document.

Inline Style
Internal Style
External Style

Inline Style:

Inline Style is nothing but defining a style rule to any HTML element which is done by using the Style attribute. The style attribute can contain any CSS property.

Example to Create an Inline Style:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 style="color:#1c87c9">Welcome Everyone!!</h2>
    <p style="color:#8ebf42; font-size:15px">Have a good day</p>
  </body>
</html>

Result

In the above example, we have used the inline style inside the tags

[style="color:#1c87c9"] and [style="color:#8ebf42; font-size:15px"]. So it will apply the style only to those two tags.

Internal Style

Internal Style is used to add a unique style for a single document. It is defined in section of the HTML page inside the tag.

Example to Create an Internal Style


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      p {
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Internal Style in CSS</p>
  </body>
</html>

Result:

External Style:

The External Style Sheet is a separate file where you can define all the styles that you want to use on your web page. You can give the link to the external style sheet from all your HTML pages.

To do this, you can use tag inside the section of the HTML document.

Example to Create an External Style:


<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Basic Syntax:

The CSS syntax contains 3 parts, they are selector , property , and value.

Selector – It is a HTML element that you want to style. It could be any tag like

, , and so on. Selectors can have one or more properties.

Property – It is a style attribute of the HTML tag. All the HTML attributes are converted into CSS properties such as color, border, etc.

Value – The value assigned to a property. For instance color : #F1F1F1.


selector {
  property: value;
}

Example of Syntax:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #23036F;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #23036F.</a>
  </body>
</html>