Your SlideShare is downloading. ×
Css1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Css1

266
views

Published on

CSS - Cascading Style Sheets Basics …

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
266
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS CSS defines HOW HTML elements are to be displayed.
  • 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. 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. INTERNAL CSS
  • 5. <html> <head> <style> h2 { color:blue; font-size:50px; } </style> </head> </html>
  • 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. INLINE CSS Example: <p style=“ color:red; ”>Welcome !</p> <h2 style=“ color:blue; font-size:50px; ”>The is a Heading !</h2>
  • 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. 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. 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. 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. 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. <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. 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. 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. 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. 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; }