CSS for Beginners

CSS, Cascading Style Sheets, is a programming language that allows you to style HTML, so it describes how HTML elements are displayed on your screen. On our dedicated CSS page your will become an expert with CSS, and you will be able to style your own websites.

CSS for Beginners

CSS, Cascading Style Sheets, is a programming language that allows you to style HTML, so it describes how HTML elements are displayed on your screen. On our dedicated CSS page your will become an expert with CSS, and you will be able to style your own websites.

Selectors and Properties

What is a selector?
Selectors are used to select elements to style with properties.

What is a property?
A property is something inside of a selector that you use to style something, for example, you could change the colour of some text.

What is a property value?
This is where you would change the appearance of an element, for example, you could change the size of the text to 22px.

Structure

selector {

property: property-value;

}

Colours

There are many different ways to express colours in CSS which are HEX, RGB, RGBA, HSLA and the colours CSS provide you with.

RGB is representing (red, green, blue) so this would look like:

rgb(24, 244, 0)

rgb(0, 196, 206)

rgb(244, 134, 0)

rgb(255, 43, 255)

In the HEX value it would be:

#18f400

#00c4ce

#f48600

#ff2bff

In the HSLA value it would be:

hsl(114, 100%, 48%)

hsl(183, 100%, 40%)

hsl(33, 100%, 48%)

hsl(300, 100%, 58%)

With the RGBa value you can change the opacity of a color so rgb(24, 244, 0) with an opacity of 50% would look like:

rgba(24,244,0,0.5)

To add a background colour with the colour values above you will need to add the background-color: ; attribute inside of the open brace and close brace. Then you can add your colour value between the colon and semi-colon.

As well as being able to customize the background colour of a HTML element, you can also change the colours of borders, text, shadows etc.

Text-Color: #4ddc75;

Border: 2px solid #4ddc75;

Box-Shadow: 0px offset-y 5px offset-x 5px blur-radius 0.1px spread-radius #4ddc75 color;

Web Developer

Web Developer

Web Developer