1 / 20

Understanding CSS: A Guide for Webmasters

This guide introduces Cascading Style Sheets (CSS), essential for styling HTML elements in web design. It covers external, internal, and inline styles, along with syntax rules, such as the importance of semicolons and curly brackets. Learn how to effectively use CSS for backgrounds, text, and links, along with table styling and box models. Discover how to manipulate borders, margins, and padding, ensuring a visually appealing layout. Ideal for webmasters looking to enhance their CSS skills for better web presentation.

lars
Télécharger la présentation

Understanding CSS: A Guide for Webmasters

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kick Start: css The WebMasters Naveed Khalid

  2. What is css? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save a lot of work • External Style Sheets are stored in CSS files #TWMNucleus

  3. Including CSS • External Style Sheet • <head><link rel="stylesheet" type="text/css" href=“style.css"></head> • Internal Style Sheet • <head><style>hr {color:blue;}body {background-image:url("images/back40.gif");}</style></head> • Inline Styles • <p style="color:blue;margin-left:20px;">The Webmasters.</p> #TWMNucleus

  4. CSS Syntax • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets • How to use comments? /*This is a comment*/ #TWMNucleus

  5. CSS background • Background Color • body {background-color:#000000;} • Background Image • body {background-image:url(‘twm.gif');} • Repeat Horizontally or Vertically • background-image:url('gradient2.png');background-repeat:repeat-x; • Set position, no-repeat, fixed • background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top; • background:#ffffffurl('img_tree.png') no-repeat right top; • background-attachment:fixed; #TWMNucleus

  6. CSS Text • Text Colour • body {color:blue;} • Text Alignment (Center, Right, Left, Justified) • h1 {text-align:center;} • Text Decoration • a {text-decoration:none;} • Text Transformation (uppercase, lowercase, capitalize) • p.capitalize {text-transform:capitalize;} • Text Indentation • p {text-indent:50px;} #TWMNucleus

  7. CSS Font • Font Family • p{font-family:"Times New Roman", Times, serif;} • Font Style (normal, italic, oblique) • p{font-style:normal;} • Font Size • h1 {font-size:40px;} • h1 {font-size:2.5em;} /* 40px/16=2.5em */ • h1 {font-size:100%;} • Font-Weight (Normal, Lighter, Bold) • h1 {font-weight:bold;} • Font-Variant • h1 {font-variant:small-caps;} #TWMNucleus

  8. CSS Links • Links can be styled with any CSS property (e.g. color, font-family, background, etc.). • In addition, links can be styled differently depending on what state they are in. • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when the user mouses over it • a:active - a link the moment it is clicked • 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 */ • a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;} #TWMNucleus

  9. CSS Tables • Table Borders • table, th, td{border: 1px solid black;} • Table Width and Height • table { width:100%;}th{ height:50px;} • Table Text Alignment • td{ text-align:right;} #TWMNucleus

  10. CSS Tables • Table Color • table, td, th{ border:1px solid green;}th{ background-color:green;color:white;} • Table Padding • td{ padding:15px;} #TWMNucleus

  11. CSS BOX model • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent • Border - A border that goes around the padding and content. The border is affected by the background color of the box • Padding - Clears an area around the content. The padding is affected by the background color of the box • Content - The content of the box, where text and images appear #TWMNucleus

  12. CSS BOX model #TWMNucleus

  13. CSS border • Border Width • p.one{ border-style:solid; border-width:5px;} • Border Color • p.one{ border-style:solid; border-color:red;}p.two{ border-style:solid; border-color:#98bf21;} • Border - Individual sides • p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;} #TWMNucleus

  14. CSS border • border-style:dotted solid double dashed; • top border is dotted • right border is solid • bottom border is double • left border is dashed • border-style:dotted solid double; • top border is dotted • right and left borders are solid • bottom border is double • border-style:dotted solid; • top and bottom borders are dotted • right and left borders are solid • border-style:dotted; • all four borders are dotted • Shorthand property • border:5px solid red; #TWMNucleus

  15. CSS Outline • An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". #TWMNucleus

  16. CSS Outline #TWMNucleus

  17. CSS Margin • The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. • Individual sides • margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; • Shorthand property • margin:100px 50px; #TWMNucleus

  18. CSS Margin • margin:25px 50px 75px 100px; • top margin is 25px • right margin is 50px • bottom margin is 75px • left margin is 100px • margin:25px 50px 75px; • top margin is 25px • right and left margins are 50px • bottom margin is 75px • margin:25px 50px; • top and bottom margins are 25px • right and left margins are 50px • margin:25px; • all four margins are 25px #TWMNucleus

  19. CSS Padding • The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. • Individual sides • padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px; • Shorthand property • padding:25px 50px; #TWMNucleus

  20. CSS Padding • padding:25px 50px 75px 100px; • top padding is 25px • right padding is 50px • bottom padding is 75px • left padding is 100px • padding:25px 50px 75px; • top padding is 25px • right and left paddings are 50px • bottom padding is 75px • padding:25px 50px; • top and bottom paddings are 25px • right and left paddings are 50px • padding:25px; • all four paddings are 25px #TWMNucleus

More Related