If you do not know what CSS is, then I suggest you read my article on CSS.

What is CSS3?

CSS3 is an extended or enhanced version of CSS2 (the current version) and it is the latest standard used in defining the styles for the different elements of a web page and even more. This includes animating the elements of a web page, applying different effects such as gradients, shadows and many more. CSS3 is backward compatible. This means that your existing CSS2 styles will remain the same and can be used as is, without any changes.

Basically, CSS3 is split up into “modules” to enhance the web page. Some of the most important CSS3 modules are:

• Animations
• Backgrounds and Borders
• Selectors
• Box Model
• 2D/3D Transformations
• Text Effects
• User Interface
• Multiple Column Layout

Why CSS3 is used?

The features, convenience & ease of usage provided by CSS3 are the main advantages. It lets you make the elements of a web page more dynamic, add life with a decorative touch. For example, before CSS3 to create rounded corners it was mandatory to make use of images and then write more code, both in CSS and HTML to align them as needed. But with introduction of CSS3, it is just a matter of 1-3 lines of code to provide rounded corners without ever using images! Hope this gives you an idea of the raw power of CSS3.

The scope of CSS3 is not limited to just rounded corners. Many other features such as animations, drop shadows, bevel effects, multiple background, gradients, opacity, embedding custom web fonts, etc. are introduced that remove the need to use another piece of software to achieve the same effect. These features can now be achieved by writing very simple and small code in CSS3!

All these features combined,  make the web page and its content load faster and accurate. Because CSS loads simultaneously with page loading as it is embedded in the web page, there wont be any additional time consumption. For example, without CSS3, to give a rounded corners to a div, images are used. Individual images or sprites could be used for the rounded corners. This means that at the minimum, at least 1 images must be used and can go up to 4 images, depending upon the method chosen to implement these rounded corners. But with CSS3, just 1 line of CSS3 code is enough. To extend this behavior to support other browsers couple of additional lines will be needed. So all in all, CSS3 is a huge time saver and helps load web page faster.

How to use CSS3?

There is no change in how you write CSS. The syntax and rule are same. Only declarations will vary.

Here are new CSS3 tricks and their effects:

Rounded Corners to a div:

div
{
border: 2px solid red;
border-radius: 10px;
-moz-border-radius: 10px;
}

Box Shadow:

div
{
box-shadow: 5px 5px 2px #333;
}

Stretch background image to fill content area:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

Multiple background images for a div:

body
{
background-image:url(img_1.jpg), url(img_2.png);
}

Shadow Effect to text:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Word Wrap:

p
{
word-wrap: break-word;
}

Embedding Custom Font:

@font-face
{
font-family: MyCustomFont;
src: url('Some_Custom_font.ttf'),
url('Some_Custom_font.eot');
}

h1
{
font-family: MyCustomFont;
}

The above are some of the common and most used effects. There are many other new features and tricks that can be done using CSS3. This will be the scope of another article, on another day.

That’s it!

Hope this article was able to explain to you what is CSS3 and why CSS3 is used and how to use CSS3. Do you know of any other CSS3 effects that you would like to share? Please feel free to do so by commenting below.

What is CSS?

CSS is the abbreviation for Cascading Style Sheets.

It is a file that is included along with a web page to control it’s appearance. In olden days, the styles of an element were defined inline, i.e. whether a heading should appear as bold or if a certain piece of text should appear in red color, etc. The styles let you define how to display HTML elements.

Why CSS is used?

The biggest advantage is that using Style Sheets can save a lot of time needed to maintain the styles of each and every element.  The styles give an excellent control over the appearance of different elements that make up the web page. So whether you want to change the text color or how a form button looks or as a matter of fact, the look of any element of a web page, they can be changed very easily from a centralized location and that is nothing but CSS.

How to use CSS?

Although the styles of an element can be specified within the web page directly inline or within the head section of a web page, it is best to include the styles in an external file and this file is the CSS. A CSS rule basically consists of two main parts. One is Selector and the other is a Declaration. There could be a single or multiple Declarations for each rule.

Selector: Selector refers to the HTML element that needs to be styled. For example: h1, p, div, etc. There are two types of selectors. ID and Class.

Declaration: A declaration consists of a Property and its corresponding value. They are enclosed in curly braces. Multiple declarations are separated with semi-colons.

Property: The property is the style attribute you want to change.

Value: The value can be a numeric value (example: 12 px) or a textual value (example: underline)

Example:

div
{
align: center;
color: black;
}

In the above example, “div” is selector. “align” and “color” are the properties of “div”. “center” and “black” are the corresponding values of the properties. The above method is the most general way of writing CSS for readability purposes. All the code can also be written on a single line (but generally avoided for readability purposes), like this:

div { align: center; color: black; }

ID Selector:

For example:

#my_div { align: center; }

Class Selector:

For example:

.my_div { align: center; }

There are basically 3 ways to insert CSS in a webpage.

1. Inline
2. Internal Style Sheet
3. External Style Sheet

Inline:

Example:  

.my_div { align: center; }
<div style="color: #000;  padding-right: 10px">Some content.</p>

Internal:

Example:  

<head>
<style type="text/css">
div  { color: black; }
h1 { margin-bottom: 10px; }
</style>
</head>

External Style Sheet:

Example:  

<head>
<link rel="stylesheet" type="text/css" href="my_styles.css" />
</head>

Hope this article helped you get in touch with what css is and why css is used. Different ways of how to use CSS are also discussed. So make sure you follow the recommended approach.

What is CSS Reset?

Usually, different browsers tend to display the default properties of an html element in a way that makes sense to them. This can lead to inconsistency of the web page display in different browsers. CSS Reset is a way to reset the default html properties such as ” p, h1, h2,” etc. so that they display the same on different browsers.

Why to use CSS Reset?

It’s main aim is to display the page evenly across different browser and to reduce the inconsistencies in the html elements. If this is not applied, the default margins, heading sizes, line heights, etc. that a browser displays may vary in the way that the other browser displays it. Using CSS Reset is usually the first step when developing a web page from a mockup (after the web page slicing is done) and the html markup is coded.

How to use CSS Reset?

There is already a CSS Reset developed by our friend, Meyer. You may simply copy the CSS below and paste it your CSS file, before you write any additional code. Make sure that this code “always” appears at the top in your CSS file or your existing styles would be overwritten and you would be left wondering with what went wrong.

Here is the CSS Reset:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

That’s it!

Hope this article has helped you understand what css reset is and how it can help you in your web design projects. If you use any other files to reset the CSS styles on your website, please feel free to share resources by commenting below.

Reference: http://meyerweb.com/eric/tools/css/reset/