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

Positioning and Styling your webpage

Some extra examples to position and styling your webpage to make it another level.

Changing color of your page

html {
  background-color: #00539F;
}

Styling the body

body {
  width: 400px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 40px 40px 40px;
  border: 5px solid black;
}

Lets explain the above CSS code for body element line by line:

  • width: 400px; This forces the body to always be 400 pixels wide.
  • margin: 0 auto; When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (setting it to 0 in this case); the second value affects the left and right side. (Here, auto is a special value that divides the available horizontal space evenly between left and right).
  • background-color: #FF9500; This sets the element's background color. This project uses a reddish orange for the body background color, as opposed to dark blue for the <html> element. (Feel free to experiment.)
  • padding: 0 40px 40px 40px; This sets four values for padding. The goal is to put  some space around the content. In this example, there is no padding on the top of the body, and 40 pixels on the right, bottom and left. The values set top, right, bottom, left, in that order. 
  • border: 5px solid black; This sets values for the width, style and color of the border. In this case, it's a five-pixel–wide, solid black border, on all sides of the body.

Styling the main page title

h1 {
  margin: 0;
  padding: 40px 0;
  color: #00539F;
  text-shadow: 4px 4px 2px black;
}

text-shadow applies a shadow to the text content of the element. Its four values are:

  • The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.
  • The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.
  • The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.
  • The fourth value sets the base color of the shadow.

Always try experimenting with different values to see how it changes.

Discussion