CSS Properties

When you use CSS you divide the property from the value by inserting a colon (:). At the end of the value, you use a semi-colon (;).
If the CSS is more than one word, you join the two words using a hyphen (-).
If you don’t use the right syntax, your browser won’t be able to decode your instructions.
eg:
background-color:blue;

The above example is defined as a CSS-property: value.

Your browser has hundreds of different built-in CSS properties and values that you can use in your HTML tags to change your page. 
We will go through some of the most widely used properties in this lesson

The Different CSS properties

Color property

To change the colour of your text, use the color CSS property and then choose a value.
It’s the same as using the background-color property. Remember to use the American spelling ”color”

Alignment CSS properties

The text-align property lets you position your text to the left, right or centre of your page. Remember to use the American spelling “center” and include the hyphen (-).

Using more than one CSS property

You can use more than one CSS property and value in a style attribute.
All you have to do is use a semi-colon (;) to separate them.
Your browser will read all of the CSS properties and apply them to your HTML element, so you can use as many as you need.

eg p; div { color : blue;}

Height and Width property

We now know how to change the colour of our text, add background colours to our HTML elements and position them in different places on the page.
But to make a really interesting web page, we need to know how to change the sizes of our HTML elements.
CSS lets us change the size of things really easily. We have to use the width and height CSS properties and set the values to the measurements we want
eg:
p {height: 200px; width: 200px;}

CSS measurements can be calculated in
pixels         px
percentage %
points         pt

eg:
p {height: 50%; width: 50%;}

Note: pixels and points work in exactly the same way.
percentage is the percentage of the total height or width of the screen the website is being viewed in.

Border Property

 CSS properties can be used to create borders and space around our HTML elements.
To create a border around a HTML element, you have to use the border CSS property and set the values to the width, style and colour you want
eg:
p {border: 4px solid green; width: 50%; height: 100px;}

Margin and Padding Property

We can also change how much space there is inside a HTML element by using the padding and margin CSS properties.
You can set the values for the margin and padding at the top, bottom, left and right of a HTML element
eg:
p{“padding: 25px; margin: 50px; border: 4px solid blue; width: 50%; height: 100px;}

Exercise 3.1

Apply all the CSS properties you have learnt to the heading tags below.

See the Pen CSS properties by Ankit (@AnkitPathshalaCoding) on CodePen.