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

Everything about boxes in CSS

One thing you'll notice about writing CSS, most of it is about boxes. It includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes

CSS layout is mostly based on the box model. Each box taking up space on your page has properties like:

  • Padding, the space around the content. In the example below, it is the space around the paragraph text.
  • Border, the solid line that is just outside the padding.
  • Margin, the space around the outside of the border.

Boxes in CSS

Here we also use:

  • width (of an element).
  • background-color, the color behind an element's content and padding.
  • color, the color of an element's content.
  • text-shadow sets a drop shadow on the text inside an element.
  • display sets the display mode of an element. 

Example code for styling the body with everything applied:

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

3