Open in app

Sign in

Write

Sign in

Learn to Code HTML and CSS👨‍💻

Basics of Web Development

Prabhashi Wijesinghe
9 min readFeb 23, 2021

Hello Everyone!!!

In my previous article I explained you how to code HTML to create the structure of your website. In this article you will learn to code CSS to build the appearance of your website. Readability and Appearance are most important when you develop a website. Users get their first impression about the website by the appearance. So you have to design your website with user friendly design compact and stylish appearance.

If you are a beginner to web development, please read my first article on HTML before you learn CSS. I have attached the link of my first article at the end of this article.

Let’s start to learn CSS..

Part II
CSS: Providing the Skin for a Website

What is CSS?
In the previous blog I explained you what CSS is. Let’s memorize again.

CSS is a design language we use to style an HTML document. CSS stands for Cascading Style Sheets. CSS was designed to enable the separation of presentation and content. CSS describes how HTML elements are to be displayed on screen.

Let’s start to code with CSS..

There are three ways you can insert a CSS style sheet into your HTML document.

  1. External CSS
  2. Internal CSS
  3. Inline CSS

1.External CSS

You have to create a separate file with .css extension and open it with the text editor. The external .css file should not contain any HTML tags. You can change the look of an entire website by changing the external file. Each HTML page must include a reference to the external style sheet file inside the <link>element, inside the head section.

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="first_file.css">
   </head>
   <body>

      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>

   </body>
</html>

In the above example I have inserted a CSS file named first_file.css to my HTML document and all the CSS code are written in that CSS file.

2.Internal CSS

The internal style is defined inside the <style> element, inside the head section. An internal style sheet may be used if one single HTML page has a unique style.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         background-color:rgb(178, 218, 241);
        }         h1 {
         color:rgb(4, 70, 87);
         text-align:center;
        } 
      </style>
   </head>
   <body>      <h1>This is a heading</h1>
      <p>This is a paragraph.</p></body>
</html>

output of the code

3.Inline CSS

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. An inline style may be used to apply a unique style for a single element.

<!DOCTYPE html>
<html>
   <body>      <h1 style="color:blue">This is a heading</h1>
      <p style="font-size:20px">This is a paragraph.</p>   </body>
</html>

output of the code

You can use any of these methods according to your need. In this blog I will use internal CSS to show you the examples.

A CSS rule consists of a selector and a declaration block.

A CSS Style rule is made up of 3 parts

  • Selector -The selector points to the HTML element you want to style.
  • Property -A property is a type of attribute of HTML tag.
  • Value -Values are assigned to properties

The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Declaration blog is surrounded with curly braces.

Example

p{
  color:blue;
  text-align:center;
}
  • p is the selector that points to the HTML element you want to style
  • color is a property, and blue is the property value
  • text-align is a property, and center is the property value

what are CSS Selectors?

A CSS selector selects the HTML element(s) you want to style.

There are several categories of CSS selectors.

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors(select elements based on a specific relationship between them)
  • Pseudo-class selectors(select elements based on a certain state)
  • Pseudo-elements selectors(select and style a part of an element)
  • Attribute selectors(select elements based on an attribute or attribute value)

Here I will explain only the basic CSS selectors.

1.CSS element selector

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

<!DOCTYPE html>
<html>
   <head>
       <style>
        p {
        text-align: center;
        color: red;
        } 
       </style>
   </head>
   <body>      <p>Every paragraph will be affected by the style.</p>
      <p>Every paragraph will be affected by the style.</p>
      <p>Every paragraph will be affected by the style.</p>   </body>
</html>

output of the code

2.CSS Id selector

Id selector selects an element based on the value of its id attribute.
There should be only one element with a given Id in a document.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #para {
         text-align: center;
         color: blue;
         }
      </style>
   </head>
   <body>      <p id="para">This paragraph is affected by the style.</p>
      <p>This paragraph is not affected by the style.</p>   </body>
</html>

output of the code

3.CSS Class selector

To select elements with a specific class, write a period (.) character, followed by the class name. The class selector selects HTML elements with a specific class attribute.

<!DOCTYPE html>
<html>
   <head>
      <style>
      .large {
      font-size: 300%;
      }
      </style>
   </head>
   <body>      <p>This paragraph will not be affected by the style.</p>
      <p class="large">This paragraph will be affected by the style.  </p>   </body>
</html>

output of the code

4.CSS Universal selector

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

<!DOCTYPE html>
<html>
   <head>
      <style>
      * {
      text-align: center;
      color: red;
      }
      </style>
    </head>
    <body>      <h1>Universal Selector</h1>      <p>Every element on the page will be affected by the style.</p>
      <p>Every element on the page will be affected by the style.</p>
      <p>Every element on the page will be affected by the style.</p>   </body>
</html>

output of the code

5.CSS Grouping selector

Grouping selector is used when multiple elements have the same style. To group selectors, separate each selector with a comma. It will be better to group the selectors, to minimize the code.

<!DOCTYPE html>
<html>
   <head>
      <style>
      h1, h2, p {
      text-align: center;
      color: blue;
      }
       </style>
   </head>
   <body>      <h1>Grouping Selector</h1>
      <h2>Minimize the code</h2>
      <p>Grouping selector is used when multiple elements have the same style.</p>   </body>
</html>

output of the code

Those are the basic selectors we use in CSS. I think now you have an understanding of what CSS is and how to code with CSS.

Now let’s get move into some common CSS styles..

CSS Colors

A color unit represents a color value that you can assign to a property such as heading, paragraph, border etc. Color values can be specified in various formats. Hex, Short Hex, RGB%, RGB Absolute and keyword are the color formats used in CSS. You can use any of these color formats to design your web page.

Web Safe Colors
There are 216 colors which are supposed to be most safe and computer independent colors. These colors vary from Hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors consistently.

Web Safe Colors

CSS Measurement Units

CSS supports a number of measurements including absolute units such as inches, centimeters, points as well as relative measures such as percentages and em units.

Absolute length units use an exact measurement to specify the size or placement of an element.
CSS absolute length units are:
1.cm(Centimeters)
2.in (inches)
3.mm (millimeters)
4.pc (picas)
5.pt (points)

Relative length units adjust properties according to screen size or user preferences.
CSS relative length units are :
1.em (em space)
2.ex (x-height)
3.px (pixels)
4.percentages(%)

CSS Fonts

You have to be very careful when choosing a font for your website. Font is a main factor that users use to decide the quality of your website. You have to use a font that is easy to read.

CSS has five generic font families. Those are:
1.Serif
2.Sans-serif
3.Monospace
4.Cursive
5.Fantasy

You can change the font by changing the value of font-family property.
You can change the size and the color of the font by changing the values of font-size and color properties respectively.

p {
  font-family: "Times New Roman", Times, serif;
  font-size:20px;
  color: blue;
}

Always try to use fonts that are easy for users to read and see.

CSS backgrounds

CSS background properties are used to add backgrounds for elements. We can add backgrounds for each element such as body, paragraph, heading etc.

The background-color property specifies the background color of an element. This is a sample code to add background color to the body element(whole web page).

body {
  background-color: rgb(243, 247, 53);
}

The background-image property specifies an image to use as the background of an element. This is a sample code to add back ground image to the body element(whole web page).

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

When you use the above code, the image is repeated by default and it covers the entire web page.

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

The border-style property specifies what kind of border to display.
The border-width property specifies the width of the four borders.
The border-color property is used to set the color of the four borders.

.border {
  border-style: solid;
  border-color: blue;
  border-width:3px;
}

CSS Margin

CSS margin is used to create space around an element, outside of any defined borders. You can create space around each side of an element using four CSS properties named margin-top, margin-bottom, margin-left and margin-right.

p {
  margin-top:20px;
  margin-bottom:20px;
  margin-left:50px;
  margin-right:50px;
}

CSS padding

CSS padding is used to create space around an element, inside of any defined borders. You can create space around each side of an element using four CSS properties named padding-top, padding-bottom, padding-left and padding-right.

p {
  padding-top:20px;
  padding-bottom:20px;
  padding-left:50px;
  padding-right:50px;
}

Now I will show you an example how to use fonts, colors, measurement units, background colors, borders, margins and padding in your codes. Go through this example code and the output of the code. Then you will be able to understand all theses CSS styles clearly.

<!DOCTYPE html>
<html>
<head>
    <style>
body{
    background-color: burlywood;
}.para_1 {
    font-family: sans-serif;
    color:darkblue;
    border-style: solid;
    border-color: rgb(146, 69, 6);
    border-width: 2px;
    font-family: sans-serif;
    color:darkblue;   
}
.para_2 {
    font-family:serif;
    border-style: double;
    border-color: rgb(29, 114, 4);
    border-width: 3px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 50px;
    margin-right: 50px;
}.para_3 {
    font-size: 30px;
    border-style: ridge;
    border-color: rgb(10, 28, 189);
    border-width: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    }   </style>
</head>
<body>      <p class="para_1">A paragraph with a solid border</p>
      <p class="para_2">A paragraph with a double border and margin around four sides</p>
      <p class="para_3">A paragraph with a ridge border and padding around four sides</p></body>
</html>

Output of the code

I think now you can understand how a add a background color, how to use fonts, colors, borders, margins and padding correctly.

That’s all for CSS..

Now you can design your website using CSS knowledge you got from this article. Always try to use the proper designs to give your website the perfect look.

So if you think my article is important, please give me a clap and leave a comment…

Thanks for reading..

Link for the HTML article
https://dilkiiwijesinghe.medium.com/learn-to-code-html-and-css-7181b4f5006f

HTML
CSS
Web Development
Basics
Beginner

--

--

Prabhashi Wijesinghe

Written by Prabhashi Wijesinghe

33 Followers

A dedicated and hardworking IT undergraduate, willing to share and gain information related to IT industry👩‍💻

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams