CSS is a style sheet language which tell a browser how elements are decorated and rendered on screen. To understand the concept I will use css stylesheet properties on div and form.
Let’s start with very simple examples but before that remember CSS only work with HTML tags and without it, it has no use. All the CSS code is encoded between style tag.
<style>
// CSS code here
</style>
Three type of CSS code in a HTML document
- Inline CSS
- Internal CSS
- External CSS
Inline CSS Style is applied to within html using style=”css is place here”.
Internal CSS Style can be applied using <style>your css code here</style> tags.
External CSS Style is provided using link reference
<link rel=”stylesheet” href=”URL_HERE” type=”text/CSS” />
The simple syntax of CSS is:
Selector {Property: Value ;}
Like body {background-color: red ;}
Selector:
Selector have three type one is tag simple html tags like <h1>, <p> , <body>.
Second one is class and class is used like .main or .class_name.
Third one is ID and ID is used like #main or #id_name.
Property:
Properties are pre defined in in CSS and by using this we point some exact item or location like border, background-color etc.
Value:
Every Property has a value but some properties have pre-defined values. Like scroll: true or false etc.
Now First We start from a very basic and try to change background color of a div having height and width 25%.
| 1 | <div class=”wrapper” id=”myrap” > This is a div. </div> |
| 1 2 3 4 5 6 7 8 9 | <style> div{ background-color: red; height:25%; width:25%; } </style> <div class="wrapper" id="myrap" > This is a div. </div> |
As in example I use div as a selector but if I use wrapper or #myrap as a selector it will work same for it the difference is that class is use to group many same elements and id is used for making an element unique.
Now apply some font size on above example and set a wide green color border.
Now try to put some padding on it. And make the border curve by setting its radius.
| 1 2 3 4 5 6 7 8 9 10 11 | <style> div{ border-radius: 100px; padding:20px; font-size:50px; border: 20px solid green; background-color: red; height:25%; width:25%; } </style> |
Now take an example of simple login page style. So for this first we have to write HTML code for login form.
| 1 2 3 4 5 | <form class="myform"> <input type="text" class="items" /> <input type="Password" class="items" /> <input type="submit" class="btn" value="Submit"/> </form> |
It looks like this without any style. Now start styling it, first I put the form border to make it prominent and set the width and height of the form.
| 1 2 3 4 5 6 | <style> .myform{ height: 20%; width: 20%; border: 2px solid ; }</style> |
| 1 2 3 4 5 | <form class="myform"> <input type="text" class="items" /> <input type="Password" class="items" /> <input type="submit" class="btn" value="Submit"/> </form> |
Now apply some style on input tags using their class values. Next I put margin = auto to locate form element in center to give it some padding or some space between border and input elements. After this select input elements by their class name. items and give them padding of 10px and margin 10px;
Now it looks like:
| 1 | .myform {margin: auto; padding: 50px; height: 20%; width: 20%; border: 2px solid ;} |
| 1 | .items {padding: 10px; margin: 10px ;} |
Now select button and float it right so that it come on right side set padding, color and radius of it.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .btn{ background: skyblue; border: 5px solid black; border-radius: 20px; padding: 10px; float:right; margin: 10px; color: black; font-size:14px; font-weight: bold; } </style> |
| 1 2 3 4 5 | <form class="myform"> <input type="text" class="items" /> <input type="Password" class="items" /> <input type="submit" class="btn" value="Submit"/> </form> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <style> body{ background-color: lightskyblue } .myform{ margin: auto; margin-top:16%; padding: 50px; height: 25%; width: 15%; border: 2px solid ; border-radius: 50px; background: gray; } .items{ border: 5px solid; border-radius: 10px; font-size: 18px; width: 200px; padding: 10px; margin: 10px; } .btn{ background: skyblue; border: 5px solid black; border-radius: 20px; padding: 10px; float:right; margin: 10px; color: black; font-size:14px; font-weight: bold; } </style> <form class="myform"> <input type="text" class="items" placeholder="User Name"/> <input type="Password" class="items" placeholder="Password"/> <input type="submit" class="btn" value="Submit"/> </form> |
