Basics of CSS

css html basics of css web developement
Basics of CSS

In this blog we will be going through the basics of CSS, and by the end of this blog you will be able to stylize and create awesome webpages.

What you'll learn

  • What is CSS?
  • Why to use CSS?
  • Applying CSS to HTML
  • Anatomy of CSS code
  • Fonts and Text in CSS
  • Everything about boxes in CSS
  • Positioning and Styling the webpage

Prerequisites

  • Basic word processing using any text editor. (VS code recommended)
  • Basic knowledge in HTML

Applying CSS to HTML Document

Let's start with making a basic HTML document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p> My car is very fast cause it has a V8 under the hood <p>
  </body>
</html>

Save the above document as csstest.html

Now lets apply CSS to the paragraph text

p {
  color: blue;
}

Paste the three lines of above CSS into a new file and save the files as style.css in a directory named styles.

To make the code work we need to apply the CSS to our HTML document, else there wont be any change in the apperance of our HTML.

To link CSS code to HTML Document

Open your csstest.html file. Paste the following line in the head (between the <head> and </head> tags):

<link href="styles/style.css" rel="stylesheet">

Save csstest.html and load it in your browser. You can see that the paragraph text is in blue colour. Congratulations!! You have created your first HTML Document with CSS.

Discussion

3