IT With Erangi: Basic Properties of CSS

Basic Properties of CSS

A CSS property is something we use to style or decorate the HTML content we write. There are many CSS properties. Some of them are listed below.

CSS properties are commonly used here are many CSS properties to style the following HTML elements. Below are some examples.

Text Properties of CSS

Font-family

Allow us to change the font type used.

Any standard font can be used.

Font-size

May be specified using a few different types.

The easiest to work with is pixels (px).

Font-weight

May be specified using a few different types.

The easiest to work with is pixels (px).

Code:-

<!DOCTYPE html>

<HTML>

  <HEAD>

<title>Example</title>

<style>

p {

    color: GREEN;

    font-family: Arial, Helvetica, sans-serif;

    font-weight: bold;

</style>

  </HEAD>

<BODY>

<p>This CSS text color is olive</p>

  </BODY>

Output:-

Color Properties of CSS

Color

Allows us to specify the color of the text.

Background-color

Allows us to specify the background color for the element.

Code:-

<!DOCTYPE html>

<html>

<head>

<style>

body {

  color: white;

  background-color: grey;

h1 {

  color: purple;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is different.</p>

</body>

</html>

Output:-

Spacing Properties of CSS

Padding

Refers to the space around our content.

Margin

Similar to padding in that it affects the spacing around the content.

Border

Is in between the padding and margin.

Spacing Properties will be discussed in detail in upcoming lessons.

Written by: W.A. Eranga Dewmini

IT With Erangi