Lesson 110: CSS Basics

Estimated Length: 20min | Difficulty: Beginner

In this lesson we will be learning about advanced CSS Basics including Border Radius, RGBA color, Box shadow, Text shadow, and Image Sprites. These new properties can really help to add that extra touch to your website. Make sure to have your Text Editor ready to try them out yourself!

Basic CSS Properties

Border Radius

The border-radius property can be used for setting the border radius on elements. In other words, you can use this to add rounded borders to elements! The default value on the border-radius is 0.

Property Values:

length: Defines the shape of the corners. The default value is 0.

% : You can also define the shape of the corners in % value.

Example:

border-radius:20%;

RGBA Color

RGBA color values are an extension of RGB color values but with the alpha channel added. The alpha defines the opacity of the object.

RGBA color value is defined with rgba(red, green, blue, alpha). The specified parameters for alpha is a nuber between 0.0 = full transparent and 1.0 = full opaque.

Box Shadow

The box-shadow property adds one or more shadows to an element.

Property Values:

none: This is the default value, no shadow is shown.

h-shadow: This is a required property. It defines the position of the horizontal shadow. Negative values are allowed.

v-shadow: This is a required property. It defines the position of the vertical shadow. Negative values are allowed.

blur: This property is optional. Blur defines the blur distance of the shadow.

spread: This property is optional. Spread defines the size of the shadow. Negative values are allowed.

color: This property is optional. This defines the color of the shadow, the default value is black.

inset: This property is optional. Inset changes the shadow from an outer or outset shadow to an inner or inset shadow.

Example:

div{ box-shadow: 10px 10px 5px #888888; }

Text Shadow

Text-shadow is very similar to box-shadow, but it adds shadow to text. The property values for text-shadow are the same as the ones defined for box-shadow.

Example:

p{text-shadow:2px 2px #F77824; }

Hello! This text is throwing a lot of shade.

Image Sprites

An image sprite is a collection of images put into a single image. When a website has a lot of images, it can take a long time to load them all and it creates multiple server requests. Using image sprites reduces the number of server requests and saves bandwidth.