CSS3 elements of style sheet in HTML 5

Vivek.Ramapuram
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 1739 red flag

CSS3 is a module based development where new features, improvements are being added in modules for easy implementation, acceptability of its features.

Introduction

Cascading Style Sheets (CSS) It is a style sheet language used for describing the format of a document written in a mark up language. While most often used to change the style of webpage and user interfaces written in HTML , Along with HTML and JavaScript, CSS is a  technology used by most websites to create visually engaging webpages, user interfaces for Web applications, and user interfaces for many mobile applications.

Objective

The main objective of this article is to learn CSS elements .

Transitions
It is the change that values of CSS property by interaction like hovering , Clicking etc
 

Class

Class is a  reference  type. So it is a reference type constraint. it can be applied to any class,.

Example,
<head>
    <title>Welcome KidsCorner</title>
    <meta charset="UTF-8" />

</head>
<body>


    <div>

        <style type="text/css">
            a.class1 {
                padding: 15px 30px;
                background-color: #9c3;
                font-size: smaller;
                width: 200px;
                -webkit-transition: all 0.7s ease;
                -moz-transition: all 0.7s ease;
                -o-transition: all 0.7s ease;
                transition: all 0.7s ease;
            }

                a.class1:hover {
                    background-color: #690;
                    font-size: larger;
                    width: 400px;
                }
        </style>
        <a href="" class="class1">DotNetFunda.com</a>
    </div><br /><br /><br /><br />
    <div>
        <style type="text/css">
            a.stylesheet {
                padding: 15px 30px;
                background-color: green;
                font-size: medium;
                width: 250px;
                -webkit-transition: all 0.6s ease;
                -moz-transition: all 0.6s ease;
                -o-transition: all 0.6s ease;
                transition: all 0.6s ease;
            }

                a.stylesheet:hover {
                    background-color: maroon;
                    font-size: larger;
                    width: 500px;
                }
        </style>

        <a href="http://www.itfunda.com/" class="stylesheet"><b>IT Funda.com</b></a>
    </div>
</body>
Here in this example two div's and two CSS sheets of animation transition effects are shown
Let us describe that


All the code  should be written in the </body> tag
The out puts are shown here in the below
Here is the output for above example.Look at the image clearly ,when we hover the mouse on the style sheet in which we have written in the code.It changes it color , font ,size .
For example Look at this image
 
Here is the another output of the another style sheet mentioned in the code
Here is the output for above example.Look at the image clearly ,when we hover the mouse on the style sheet in which we have written in the code.It changes it color , font ,size .



Border radius in the style sheet

This Border radius allows us to specify the border corner radius to make it rounded corer. 

<style type="text/css">
            a.stylesheet2 {
                font-size: 50px;
                text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
                border-radius: 10px;
                border: 1px solid #c0c0c0;
                padding: 10px;
            }

                a.class1:hover {
                    background-color: #690;
                }
        </style>

        <a href=http://www.rolls-roycemotorcars.com/" class="stylesheet2">rolls-roycemotorcars.com</a> 
Example :
Here in the example we can see that rounded border(Border Radius)

Here,When we click on the link it displays pale green in color.



Conclusion

In this article we have learnt about How to use Transition effects and Border Radius of the style sheet

Reference

www.dotnetfunda.com
http://www.html5.com/

Page copy protected against web site content infringement by Copyscape

About the Author

Vivek.Ramapuram
Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India
RvGoud
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)