Learn CSS: Introduction & Basics
Tags: learncss
Published: 2021-02-13 06:59:06

---
title: Learn CSS: Introduction & Basics
published: true
date: 2021-02-10 09:11:14 UTC
tags: LearnCSS
canonical_url: https://sharepointanchor.com/learn-css/learn-css-basics/
---

 **<abbr title="Cascading Style Sheets"><a href="https://sharepointanchor.com/category/learn-css/" title="CSS" data-wpil-keyword-link="linked">CSS</a></abbr>** 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 (<abbr title="Hyper Text Markup Language"><strong><a href="https://sharepointanchor.com/category/learn-html/" title="HTML" data-wpil-keyword-link="linked">HTML</a></strong></abbr>). 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](https://sharepointanchor.com/category/learn-html/ "HTML") document.

- Inline Style
- Internal Style
- External Style

## Inline Style:

Inline Style is nothing but defining a style rule to any [HTML](https://sharepointanchor.com/category/learn-html/ "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

![Inline Style](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/chrome_0g8f1EGOco.png)<figcaption>Inline Style</figcaption>

In the above example, we have used the inline style inside the tags **<h2>** `[style="color:#1c87c9"]` and **<p>** `[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 **<head>** section of the [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") page inside the **<Style>** 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:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/chrome_Rb3H2PMdY8.png)<figcaption>Internal Style</figcaption>

## 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](https://sharepointanchor.com/category/learn-html/ "HTML") pages.

To do this, you can use **<link>** tag inside the **<head>** section of the [HTML](https://sharepointanchor.com/category/learn-html/ "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](https://sharepointanchor.com/category/learn-html/ "HTML") element that you want to style. It could be any tag like **<h2>** , **<p>** , and so on. Selectors can have one or more properties.

**Property** – It is a style attribute of the [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") tag. All the [HTML](https://sharepointanchor.com/category/learn-html/ "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>

```

## Result:

![](https://eadn-wc04-3430828.nxedge.io/cdn/wp-content/uploads/2021/02/chrome_AaNAHi996P.png)<figcaption>Syntax Example</figcaption>

The post [Learn CSS: Introduction & Basics](https://sharepointanchor.com/learn-css/learn-css-basics/) appeared first on [Share Point Anchor](https://sharepointanchor.com).