CSS Tutorials


Cascading style Sheets may be a sheet language used for describing the presentation of a document written in a very terminology like hypertext markup language. CSS may be a cornerstone technology of the globe Wide net, aboard hypertext markup language and JavaScript.



There are 3 ways of inserting a CSS sheet: 1. External CSS 2. Internal CSS 3. Inline CSS External CSS External styles are defined within the <link> element, inside the of section of an HTML page Ex. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal CSS Internal styles are defined within the <style> element, inside the section of an HTML page: Ex. <head> <style> body { background-color:linen; } h1{ color: maroon; margin-left:40px; } </style> </head>
Inline CSS An inline style may be used to apply a unique style for a single element. Ex. <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>



The border style property specifies what kind of border to display. 1. dotted - Defines a dotted border 2. dashed - Defines a dashed border 3. solid - Defines a solid border 4. double - Defines a double border 5. groove - Defines a 3D grooved border. The effect depends on the border-color value 6. ridge - Defines a 3D ridged border. The effect depends on the border-color value 7. inset - Defines a 3D inset border. The effect depends on the border-color value 8. outset - Defines a 3D outset border. The effect depends on the border-color value 9. none - Defines no border 10. hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).



The CSS margin properties are used to create space around elements, out-side of any defined borders. With CSS , you have control over the margins. There are properties for setting the margin (top, right, bottom, and left). 1. margin-top 2. margin-right 3. margin-bottom 4. margin-left Ex.

 margin-top: 100px;
 margin : 50px 10px 20px 10px;



The CSS padding properties are used to create space around an element's , inside of any defined borders. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left Example 1:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
Example 2 :
div {
  padding: 25px 50px 75px 100px;
}



HTML elements can be considered as boxes Type. In CSS, the term "box" is used when talking about design and layout. Explanation of the different parts: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent Example :

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}



1. Float The float property is used for positioning and formatting content e.g. let an image float left to the text in a container. Example :

img {
  float: right;
}
2. Clear The clear property specifies what elements can float beside the cleared element and on which side. Example :
div {
  clear: left;
}



The opacity property specifies the transparency of an elements. Example:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}
Example:
img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}


Comments


Post Comments