CSS tutorial
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS tutorial

on

  • 1,729 views

 

Statistics

Views

Total Views
1,729
Views on SlideShare
1,622
Embed Views
107

Actions

Likes
0
Downloads
120
Comments
0

4 Embeds 107

http://localhost 75
http://staging3.inceptum.eu 19
http://www.linkedin.com 10
http://learns-programme-easy.blogspot.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS tutorial Presentation Transcript

  • 1. CSSCascading Style Sheets
    Md. Shajed E Islam
  • 2. What is CSS?
    CSS stands for Cascading Style Sheets
    Styles define how to display HTML elements
    External Style Sheets can save a lot of work
    External Style Sheets are stored in CSS files
  • 3. Benefits of Using CSS
  • 4. Separate content from
    Fast loading pages
    Small file size
    Save time
    Save money
    Flexibility of design.
    Way of the future
    Print friendly
  • 5. CSS Syntax
    A CSS rule has two main parts: a
    selector, and one or more declarations:
  • 6. CSS Example
    p{color:red;text-align:center;}
    P {color:red; text-align:center; }
    /*This is a comment*/
  • 7. CSS Id and Class
  • 8. #para1{ text-align:center; color:red;}
    .center {text-align:center;}p.center {text-align:center;}
    Example id/class
    <p id=“center”></p>
    <p class=“center”></p>
    Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
    Do NOT start a class name with a number! This is only supported in Internet Explorer.
  • 9. Three Ways to Insert CSS
    External style sheet<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
    Internal style sheet<head><style type="text/css">body {background-image:url("images/bg.gif");}</style></head>
    Inline Styles
    <p style="color:#000; margin-left:20px;">This is a paragraph.</p>
  • 10. CSS properties
  • 11. Margin Vs Padding - CSS Properties
  • 12. Grouping and Nesting Selectors
    h1,h2,p{color:green;}
    .marked p{color:white;}
  • 13. CSS Display and Visibility
    div.login {visibility:hidden;}
    div.login {display:none;}
    display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it. Visibility:hidden means the tag is not visible, but space is allocated for it.
  • 14. CSS Positioning
  • 15. CSS Float
  • 16. CSS z-index
  • 17. CSS Image Opacity
    <imgsrc=“logo.jpg" width="150" height="113" alt=“bglobal"style="opacity:0.4;filter:alpha(opacity=40)" />
  • 18. Pseudo-classes
    a:link {color:#FF0000;}      /* unvisited link */a:visited {color:#00FF00;}  /* visited link */a:hover {color:#FF00FF;}  /* mouse over link */a:active {color:#0000FF;}  /* selected link */
  • 19. CSS Navigation Bar
    <style type="text/css">
    ul{ list-style-type:none; margin:0; padding:0; overflow:hidden;}
    li{ float:left;}
    a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF;
    background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; }
    a:hover,a:active { background-color:#7A991A; }
    </style>
  • 20. <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  • 21. Reference
    http://www.w3schools.com/css
  • 22. Thanks