Skip to main content

How to define Styles with CSS

CSS Styles are declared between the opening and closing <style> tags like this usually before the closing </head> tag ,other ways of declaring CSS styles are discussed below.

        h1{ color:#fff; padding:0px 0px 5px 5px;}
        p{ color:#fc0; margin-left :auto;}

Defining styles in CSS
·         Inline Styles
Inline style is applied to an HTML element via its style attribute,
like this: <p style=”font-family: Calibri; color:#f6f6f6; padding:5px; ”>Sample Paragraph</p>
·         Embedded Styles
As we seen in our first example, you can declare
any number of CSS styles by placing them between the opening and closing <style>
tags, as follows:
CSS Styles will be declared here
·         External Stylesheets
 external stylesheet is a file (usually given a .css file extension) that contains CSS styles.
 Like this: <link rel=”stylesheet” type=”text/css” href=”yourstyleshhet.css” />


Post a Comment

Thanks for Visiting for any questions or suggestions please comment below

Popular posts from this blog

Adding a button in HTML | styling a button

To add a button in a HTML page use <input> tags and specify the type as button like so
<input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1
Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here

Advanced Jquery easing | Demo and Download

Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic

to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods.
Download DEMO

<! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div3,#div4{ margin-top:…