Introduction to CSS3

This is the first Blog in the series of blogs on CSS3. In these blog we will be discussing CSS3 in depth. This first Blog will discuss on introducing CSS3 to its readers.

What is CSS3?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. In this blog we will be looking into some of the properties of CSS3.

Before that we need to understand why CSS3 is required?

The main purpose of CSS3:

⦁ CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts.
⦁ It can also be used to display the web page differently which can change depending on your screen size.
⦁ Changes to the design of a document can be applied quickly and easily.

CSS3 is a latest standard of earlier versions(CSS2). The main difference between CSS2 and CSS3 is as follows:
⦁ Media Queries
⦁ Namespaces
⦁ Selectors Level 3
⦁ Color

Some of the most important CSS3 modules are:
⦁ Selectors
⦁ Box Model
⦁ Backgrounds and Borders
⦁ Image Values and Replaced Content
⦁ Text Effects
⦁ 2D/3D Transformations
⦁ Animations
⦁ Multiple Column Layout
⦁ User Interface

Let us now discuss some of the properties used in CSS3, they are:
1. CSS3 Rounded Corners

With CSS3 we have got a new property called border-radius, which is used to give “rounded corners” to square boxes.
With the rounded corners you can create boxes with background color or without background-color but with border or it can be with background-image.
Example: for border-radius property with a background-color:

The output of this example will be:

 

CSS3 border-radius – Specify Each Corner
There are 4 different ways to specify border-radius property. Here are the rules:
⦁ Four values: first value for top-left, second value for top-right, third value for bottom-right, and fourth value for bottom-left corner
⦁ Three values: first value for top-left, second value for top-right and bottom-left, and third value for bottom-right
⦁ Two values: first value for top-left and bottom-right corner, and the second value for top-right and bottom-left corner
⦁ One value: all four corners are rounded equally

2. CSS3 Border image
By using CSS3 border-image property you can add image boarder to some elements.
It allows you to specify an image to be used instead of the normal border around an element.
The border-image property takes the image and slices it into nine sections. It will then place the corners at the corners, and the middle sections are repeated or stretched as you specify.

Example of image border:

Some of the properties of border-image:

⦁ border-image-source: Used to set the image path
⦁ border-image-slice: Used to slice the boarder image
⦁ border-image-width: Used to set the boarder image width
⦁ border-image-repeat: Used to set the boarder image as rounded, repeated and stretched

Example:

The output of the above example:

3. Multi Background

CSS Multi background property is used to add one or more images at a time without HTML code. We can add images as per our requirement. A sample syntax of multi background images is as given below −
This property can be used when you are required to have multiple background images in a single div.

The output of the above example will be

The most commonly used values are shown below −
⦁ Background: Used to setting all the background image properties in one section
⦁ background-clip: painting area of the background
⦁ background-origin: position of the background images
⦁ background-size: size of the background images

4. As we know CSS supports color property and in CSS3 we can apply the color in 4 different ways i.e.
i) RGBA colors
syntax: {background-color: rgba(255, 0, 0, 0.5);}
ii) HSL colors
syntax: {background-color: hsl(120, 105%, 58%);}
iii) HSLA colors
syntax: {background-color: hsla(120, 10%, 85%, 0.3);}
iv) Opacity
syntax: {background-color:rgb(0,255,0);opacity:0.6;}

Conclusion:

I hope you have enjoyed this blog on basic CSS3 properties. In our next blog we will be discussing about some more properties of CSS3.
If you have any queries do write us at support@acadgild.com.