Css1

436 views

Published on

CSS - Cascading Style Sheets Basics

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
436
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css1

  1. 1. CSS CSS defines HOW HTML elements are to be displayed.
  2. 2. INTRODUCTION CSS Stands for Cascading Style Sheets It is used for Designing Stylized Websites All the css files are saved with the file extension .css CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
  3. 3. Three Types of CSS: 1. Inline CSS - using the style attribute in HTML elements. 2. Internal CSS - using the <style></style> tag in the <head> section. 3. External CSS - using an external CSS file.
  4. 4. INTERNAL CSS
  5. 5. <html> <head> <style> h2 { color:blue; font-size:50px; } </style> </head> </html>
  6. 6. EXTERNAL CSS In external CSS, we write CSS codes in a separate file and include that CSS file with the HTML file. We include CSS file in the HTML file by writing the following line in the head section of html: <link type=“text/css” rel=“stylesheet” href=“style.css” >
  7. 7. INLINE CSS Example: <p style=“ color:red; ”>Welcome !</p> <h2 style=“ color:blue; font-size:50px; ”>The is a Heading !</h2>
  8. 8. Text Color : body {color:blue;} Text Alignment : h1 {text-align:center;} Text Decoration: h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} Font Family : p{font-family:"Times New Roman”;} Font Size : h1 {font-size:40px;} Background Color : body {background-color:green;}
  9. 9. Styling LInks <a href=“http://www.google.com”>Google</a> a:link {color:blue;} a:visited {color:red;} a:hover {color:yellow;} a:active {color:orange;} /* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */ You can add other properties also other than color.
  10. 10. CSS ’id’ and ’class’ (V imp.) If we have more than two paragraphs, to add  different colors to these paragraphs we can  use tha concept of ‘class’ and ‘id’. Example: <p id=“gud”>Good</p> <p id=“hello”>Morning</p> #gud { color:yellow; } #hello { color:red; }
  11. 11. The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".
  12. 12. The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: .center {text-align:center;}
  13. 13. <div> Tag The <div> tag defines a division or a section in an HTML  document. The <div> tag is used to group block-elements to format them  with CSS. The div tag is used to specify a section within an HTML  document. Anything from text to images to videos can be  placed within a div. Divs are similar to tables but they are  easier to use, customizable with CSS, and load faster than  tables. < div >< img src="”header.jpg”" alt="" />< /div> Since you may have more than one image you might  code: < div >< img src="”image1.jpg”" alt="" /> < /div>
  14. 14. CSS Positioning The CSS positioning properties allow you to position an  element. It can also place an element behind another, and  specify what should happen when an element's content is too  big. 1. Fixed Positioning 2. Relative Positioning 3. Absolute Positioning
  15. 15. Fixed Positioning An element with fixed position is positioned relative to  the browser window. It will not move even if the window is scrolled: p { position:fixed; top:30px; right:5px; }
  16. 16. Relative Positioning A relative positioned element is positioned relative to  its normal position. h1 { position:relative; left:-20px; color:red; } h2 { position:relative; left:20px; color:green; }
  17. 17. Absolute Positioning An absolute position element is positioned relative to  the first parent element that has a position other than  static. h2 { position:absolute; left:100px; top:150px; }

×