CSS 3 Introduction

by Didin J., updated on Jul 28, 2017 CSS 3 Introduction

Why learn CSS3? because it's part of front end website development along with HTML 5 and Javascript.

Hi Everyone,

Today I will explain a litle thing about CSS 3. So, in next CSS 3 tutorials you will focused to learn everything that meet your needs. 

For making your website more nice, beautiful, responsive and attractive, you should add cascade style sheet in your HTML. Before CSS 3 come, we’ve used JavaScript or server-side code to stripe table rows or put focus and blur effects on our forms. We’ve had to litter our tags with additional class attributes just so we could identify which of our fifty form inputs we want to style.

CSS3 has some amazing selectors that make some of this work trivial. In case you forgot, a selector is a pattern that you use to help you find elements in the HTML document so you can apply styles to those elements. We’ll use these new selectors to style a table. Then we’ll take a look at how we can use some other CSS3 features to improve our site’s print style sheets, and we’ll split content into multiple columns.

Sample Features

Let's take a look at this code examples:

:nth-of-type [p:nth-of-type(2n+1){color: red;}]

Finds all n elements of a certain type of parapgraph (p) then apply text color "red".

 :first-child [p:first-child{color:blue;}]

Find first child of element inside p then apply text color blue.

[#content{ column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; }] 

Divides a content area into multiple columns.

[media="only all and (max-width: 480)"] 

Apply styles based on device settings or device screen size.


That's a litle introduction about CSS 3. Actually the features of CSS 3 more than those sample, it a huges sample will show to you in next articles.


Thanks you.