Let’s Learn CSS

Add styles to your webpages😍

7 min readFeb 23, 2021

In the previous article, I have talked about HTML. If you haven’t read my previous article yet, and if you are a beginner, I suggest you read my previous article before going through this blog. I have included the link at the end of this article.

Now I am going to talk about CSS. At the end of this article, you will be able to add styles to webpages.

😎Let’s start…

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on the screen.

Why we use CSS?🤔

CSS is used to define styles for your web pages, including the layout, design, and variations in display for different devices and screen sizes.

CSS syntax

Selector points to the HTML element you want to style.
The declaration block is surrounded by curly braces. There can be one or more declarations inside curly braces. Declarations are separated by semicolons.
Each declaration has a property name and a value. The Property name and the value are separated by a colon.

p{
 color: blue;
 font-size: 20px;
 }

Three ways to insert CSS

External CSS
Internal CSS
Inline CSS

1. External CSS

You can change the appearance of your website by using an external style sheet. The external style sheet must be saved with a .css extension. This should not contain any HTML tags. We can link the external style sheet to the HTML file by using the<link> element. Each HTML file should include a reference to the external style sheet inside this <link> element, inside the head section.

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

Let’s look at an example.

<!DOCTYPE html>
<html>
<head>
  <title>My first Webpage</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head><body>
  <p>This is a paragraph</p>
</body></html>

This is how my “styles.css” file looks like,

body{
 background-color: plum;
}p{
 color: navy;
 font-size: 30px;
 font-family: sans-serif;
}

The output of the code:

2. Internal CSS

If an HTML page has unique styles we can add internal CSS. Internal CSS is defined inside the <style> element. <style> element is defined inside the head section.

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title> <style type="text/css">
  p{
    color: darkred;
    font-size: 30px;
   }   body{
    background-color: lightpink;
   }
 </style>
</head><body>
   <p>This is a paragraph</p>
</body>
</html>

Output of the code:

3. Inline CSS

We can use inline styles to apply unique styles for a single element. Here we use style attribute, and It can contain any CSS property. We should add style attribute to the relevant element.

Here is an example:

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title>
</head><body style="background-color: lavender;">
 <h2 style="font-family: sans-serif;">This is a heading</h2>
 <p style="color: navy; font-size: 20px;">This is a paragraph</p></body>
</html>

Output of the code:

Cascading Order

Here we are going to discuss what style will be used when there is more than one style specified for an HTML element.

Inline style
External and internal style sheets
Browser default

As you can see, inline styles have the highest priority. So, if you add external style, internal style, and inline style, the inline style will be displayed.

Example:

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <style type="text/css">
  h2{
   color: red;
  }
 </style></head><body style="background-color: lightgreen;">
 <h2 style="color: navy;">This is a heading</h2></body>
</html>

This is how my “styles.css” file looks like,

h2{
 color: yellow;
}
body{
 background-color: pink;
}

Output:

Selectors in CSS

Selectors in CSS select elements that we want to add styles.
Here I am going to discuss only the most basic CSS selectors.

There are four main selectors.

Element selector
Class selector
Id selector
Universal selector

1. Element Selector

The element selector selects HTML elements based on the element name.

h1{
  color:red;
}

Example:

Here, by using the element selector, CSS will be added to all the <h1> elements. We cannot add CSS only to one <h1> element.

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title>
 <style type="text/css">
  h1{
   color: red;
  }
 </style></head><body>
 <h1>This is the 1st heading</h1>
 <h1>This is the 2nd heading</h1>
 <h1>This is the 3rd heading</h1></body>
</html>

2. Class Selector

The class selector selects HTML elements using class attribute.

Write a period (.) character, followed by the class name.

.intro{
    color: navy;
}

Example:

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title>
 <style type="text/css">
    .intro{
      color: navy;
    }
 </style></head><body>
 <h1 class="intro">This is a heading.</h1>
 <h1>This is also a heading.</h1></body>
</html>

Here, by using the class selector, CSS will be added only to that particular element. Not all the <h1> elements will be affected.

Output of the code:

3. Id Selector

Id selector uses id attribute to select a specific element. This id selector is used to select one unique element.

Write a hash (#) character, followed by the id name of the element.

#heading{
   color: purple;
}

Example:

<!DOCTYPE html>
<html>
<head>
 <title>My first Webpage</title>
 <style type="text/css">
  #heading{
   color: purple;
  }
 </style>
</head><body>
 <h1 id="heading">This is a heading.</h1>
 <h1>This is also a heading.</h1></body>
</html>

Output of the code:

4. Universal Selector

The universal selector (*) selects all HTML elements on the page.

*{
     color: red;
     font-family: sans-serif;
 }

CSS Background

We can add backgrounds to our webpages. Also, you can set the background color for any HTML elements. There are some main background properties.

background-image
You can add an image as the background by using this property.

body{
   background-image: url("image2.jpg");
  }

background-color

body{
  background-color: blue;
}

background-repeat
sometimes background images are repeating. To manage repetitions we use this property.

background-repeat: repeat-x; <— to repeat an image horizontally
background-repeat: repeat-y; <— to repeat an image vertically
background-repeat: no-repeat; < — show the image only once

body{
   background-image: url("image2.jpg");
   background-repeat: no-repeat;
  }

background-attachment
This specifies whether the background image should be fixed or scroll.

background-attachment: fixed;
background-attachment: scroll;

background-position
we can specify the position of the image.

body{
   background-image: url("image2.jpg");
   background-repeat: no-repeat;
   background-position: right top;
}

Colors

We can add colors to texts, backgrounds, borders, etc. CSS colors can be specified using color names, RGB values, HEX values, HSL values, etc.

h1{
  color: blue;
}

CSS Borders

You can add borders to your tables, texts, etc. There are some main properties that you can use.

border-style - specifies what kind of border to display (whether a dotted border, a dashed border, a solid border, etc)
border-width - specifies the width of the border.
border-color - used to add colors to the border.
border-radius - used to add rounded borders.

p{
  border-style: solid;
  border-radius: 5px;
  border-color: red;
}

Margins

We can use margin property to create space, outside any defined borders.

p {
  margin-top: 50px;
  margin-bottom: 60px;
  margin-left: 80px;
  margin-right: 70px;
}

If the margin of each side is equal,

p{
  margin: 100px;
}

Padding

You can use padding property to create space, inside any defined borders. If you want to add padding to each side equally, use padding property. If not equal, you can specify the padding for each side of an element.

body {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 40px;
  padding-left: 30px;
}

Text formatting

Texting decoration and text alignment can be done using CSS.

text-align -to set the horizontal alignment of a text.
vertical-align -to set the vertical alignment of an element.
text-decoration -to remove or set text decorations.
color -to set the color of a text.

We have reached the end of this article. I hope you learned the basics of CSS very well.
Please leave a comment and give me a clap if you think this article fulfilled your requirements and helped you to learn CSS.

Thanks for Reading!😊

Link for the previous article → Web Development with HTML and CSS

Let’s Learn CSS

Add styles to your webpages😍

😎Let’s start…

Why we use CSS?🤔

CSS syntax

Three ways to insert CSS

1. External CSS

2. Internal CSS

3. Inline CSS

Cascading Order

Selectors in CSS

1. Element Selector

2. Class Selector

3. Id Selector

4. Universal Selector

CSS Background

Colors

CSS Borders

Margins

Padding

Text formatting

Thanks for Reading!😊

Written by Nipuni Madanayake

No responses yet