• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cascading Style Sheets

Cascading Style Sheets






Total Views
Views on SlideShare
Embed Views



1 Embed 47

http://www.jeromelocson.com 47


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

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

    Cascading Style Sheets Cascading Style Sheets Presentation Transcript

    • By: Jerome Locson www.jeromelocson.com ADZU SCITECH MONTH | SIMO ‘08 Advance Computer Laboratory, ADZU September 26, 2008
      • Recap: HTML Basics    
      • In-depth CSS Lecture & Hands-on
      • Tweaking Friendster Layout Demonstration
      • Customizing Multiply Layout Demonstration   
      • Create you own BlogSpot & Plurk Theme
      • HTML stands for H yper T ext M arkup L anguage
      • Created by Tim Berners-Lee, founder of World Wide Web Consortium (W3C)
      • A structured set of tags used to create webpage, displayed in a web browser
      • Natively, with .html or .htm filename extension
      • Internet Media Type: text/html
      • With the basic structure:
      • <html> <head>
      • <title></title>
      • … .
      • </head>
      • <body>….</body>
      • </html>
      • Opening Tags
        • <html>,<body>,<title>,<h1>,<p>, etc…
      • Closing Tags
        • </html>,</body>,</title>,</h1>,</p>, etc…
      • All tags must be closed , usually in the format of opening tag -> content -> closing tag
      • The line break tag does not require a closing tag but can be closed by <br />; <br> is acceptable
        • HTML tags are not case sensitive; <HEAD> is the same as <head>
      • Tag Attributes
        • Format: <tag attribute=&quot;value&quot;>content</tag>
        • (can have many attribute declaration)
      • Elements
        • Tags will be of no meaning without contents
        • Syntactically HTML elements are constructed with:
          • a start tag marking the beginning of an element
          • any number of attributes (and their associated values)
          • some amount of content (characters and other elements)
          • an end tag
      • Fig 1. HTML element representation of the paragraph (<p>) tag
      • [Image source: http://en.wikipedia.org/wiki/HTML_element ]
      • Common HTML Tags
      Tags Description Example <a> </a> Anchor and/or Link <a href=“index.htm”>Home </a> <b> </b> Content is shown as bold type <b>Name</b> <blockquote> </blockquote> Content is shown as an indented block; should be used only for long quotations <blockquote> <p>This is a demo. </p> </blockquote> <body> </body> The body part of the HTML document. <body> <h1>Heading</h1> <p>This is a demo.</p> </body>
      • Common HTML Tags (cont.)
      Tags Description Example <br> or <br/> Line break <p>Some content<br>here.</p> <center> </center> Content is centered <center>Some Text Here</center> <div> </div> Container element <div> <p>A Paragraph</p> <img src=“logo.jpg”> </div> <font> </font> Define characteristics of font, according to attributes e.g. SIZE, COLOR, FACE <font face=‘Arial’>Text</font>
      • Common HTML Tags (cont.)
      Tags Description Example <head> </head> Head part of the HTML document. <head><title>My Webpage</title></head> <h1> </h1> <h2> </h2> ... <h6> </h6> Headings (1-6) <h1>Some text here</h1> <h2>Some text here</h2> … <h6>Some text here</h6> <hr> Horizontal line across the page <hr> <i> </i> Italics <i>Important!</i>
      • Common HTML Tags (cont.)
      Tags Description Example <img> Displays image. Attributes: src and alt <img src=“logo.jpg” alt=“Company Logo”> <li> </li> List item. Used within an ordered (<ol>) or unordered (<ul>) list <li>Item 1</li> <li>Item 2</li> <ol> </ol> Ordered list <ol> <li>Item 1</li> <li>Item 2</li> </ol> <ul> </ul> Unordered List <ul> <li>Item 1</li> <li>Item 2</li> </ul>
      • Common HTML Tags (cont.)
      Tags Description Example <span> </span> A container element <span><p>A Paragraph</p> </span> <strong> </strong> Text emphasis, appears bold <strong>Name:</strong> <sub> </sub> Subscript <sub>2</sub> <sup> </sup> Superscript <sup>3</sup>
      • Common HTML Tags (cont.)
      Tags Description Example <table> </table> Table <table><tr> <td>Sample Data</td> </tr></table> <tr> </tr> Table row <tr> <td>Sample Data</td> </tr> <th> </th> Table Header Cell <tr> <th>Heading</th> <td>Sample Data</td> </tr> <td> </td> Table Data Cell <td>Sample Data 1</td> <td>Sample Data 1</td>
      • Common HTML Tags (cont.)
      Tags Description Example <title> </title> Page Title <title>My First Webpage</title> <u> </u> Underline Text <u>Important</u> <p></p> Paragraph <p>A quick brown fox.</p> <form> </form> Creates Form <form action=“display.php” method=“get”> … . </form>
      • Common HTML Tags (cont.)
      Tags Description Example <select > </select> Selection List <select name=&quot;sex”> <option value=&quot;male&quot;>Male</option> <option value=&quot;female&quot;>Female</option> </select> <option> Items in Selection List <option value=&quot;male&quot;>Male</option> <option value=&quot;female&quot;>Female</option> <input> Types: Checkbox, Radio, Button, Submit, Image, Reset, Text, Password, File, hidden <input type=&quot;text&quot; name=&quot;name&quot; value=&quot;Your name&quot; /> <label> </label> Label for a form input <label>Address</label> <textarea> </textarea> Multiple-line text area <textarea rows=&quot;10&quot; cols=&quot;20&quot; name=&quot;comments&quot;>Your comments</textarea>
      • CSS stands for Cascading Style Sheets
      • Also developed by W3C
      • With a .css file extension
      • Internet Media Type: text/css
      • Mainly used to describe the presentation of HTML (markup languages)
      • Also, helps in separating the design from content of a webpage
      • Format: property: value
      • Variations:
      • CSS 1
        • font, color, text attributes, alignment, border, padding, positioning
      • CSS 2
        • Superset of CSS 1, also support relative, absolute and fixed positioning of elements
      • CSS 3
        • Currently under development
      • 3 Ways to apply:
      • In-line
        • Declared inside the HTML tag style attribute
        • Tag specific declaration
        • Ex.
          • <p style=&quot;color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc;&quot; >
          • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nunc nisl, mollis pharetra, rhoncus ut, pulvinar ut, elit. Phasellus ut nunc a nunc lacinia congue. Pellentesque elit pede, congue quis, viverra vel, sagittis ut, nisi. Donec fringilla euismod nibh. In hendrerit consequat dui.
          • </p>
      • 3 Ways to apply (cont):
      • Internal
        • Usually embedded inside the <head> tag using the <style> tag, but can also be declared inside the <body> tag
        • Applies only to the current page
        • Ex.
        • <head> <title>My First Homepage</title>
        • <style type=&quot;text/css&quot;>
        • p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; }
        • </style>
        • </head>
      • 3 Ways to apply (cont):
      • External
        • Separating HTML from CSS files
        • Uses <link /> tag
        • Ex. (style.css)
        • p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; }
        • TO EMBED:
        • <head> <title>My First Homepage</title>
        • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“style.css&quot; />
        • </head>
    • Output:
        • p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; }
      • Given name to styles in Internal or External style sheets.
      • 3 Selectors
        • HTML Selectors
          • body, p, h1, font, etc.
        • Class Selectors
          • .layer1 , .textTitle
        • ID Selectors
          • #layer1 , #textTitle
      • Enclosed in a pair of curly brackets, { }
      • Has properties
        • propertyName: values
      • Ex.
      • body {
      • font-size: 12px; color: #000000;
      • }
      • Lengths and Percentage Units
        • em (calculated size of a font)
        • px (pixels)
        • pt (points)
        • % (percentage)
        • pc (picas)
        • cm (centimeters)
        • mm (millimiters)
        • inches (in)
      • Colors
        • With 16,777,216 colors
        • Could be the name, RGB, Hexadecimal value
        • Ex. red, rgb(255,0,0), #ff0000
        • transparent is a valid color value
      • Text
        • font-family
        • font-size
        • font-weight
        • font-decoration
        • font-style
        • text-transform
      • Margin and Padding
        • margin is the space outside of the element
        • padding is the space inside the element.
        • margin-top, margin-right,
        • margin-bottom, margin-left,
        • padding-top, padding-right,
        • padding-bottom,padding-left,
        • margin, padding
      • Border
        • border-style (solid, dotted, dashed, double, groove, ridge, inset and outset.)
        • border-width
        • border-color
      • Background Images
        • background-color
        • background-image
        • background-repeat
          • repeat, repeat-y, repeat-x, no-repeat
        • background-position
          • top, center, bottom, left, right or any sensible combination, such as above.
      • Grouping
        • Ex. h2 { color: red; }
        • .thisOtherClass { color: red; }
        • .yetAnotherClass { color: red; }
        • … becomes…
        • h2, .thisOtherClass, .yetAnotherClass { color: red; }
      • Nesting
        • Ex. #top { background-color: #ccc; padding: 1em }
        • #top h1 { color: #ff0; }
        • #top p { color: red; font-weight: bold; }
      • Pseudo Classes
        • selector:pseudo class { property: value; }
          • link is for an unvisited link.
          • visited is for a link to a page that has already been visited.
          • active is for a link when it is gains focus (for example, when it is clicked on).
          • hover is for a link when the cursor is held over it.
      • Pseudo Classes
        • Ex.
          • a.headerMenu: link {
          • color: blue;
          • }
          • a. headerMenu: visited {
          • color: purple;
          • }
          • a. headerMenu: active {
          • color: red;
          • }
          • a. headerMenu: hover {
          • text-decoration: none;
          • color: blue;
          • background-color: yellow;
          • }
      • Shorthand Properties
        • Ex.
        • p {
        • border-top-width: 1px;
        • border-right-width: 5px;
        • border-bottom-width: 10px;
        • border-left-width: 20px;
        • }
        • … becomes…
        • p { border-width: 1px 5px 10px 20px; }
      • Shorthand Properties
        • Ex.
        • p {
        • font: 1em Arial;
        • padding: 3em 1em;
        • border: 1px black solid;
        • border-width: 1px 5px 5px 1px;
        • border-color: red green blue yellow;
        • margin: 1em 5em;
        • }
      • http://en.wikipedia.org/wiki/HTML_element
      • http://htmldog.com/guides/htmlbeginner/
      • http://htmldog.com/guides/cssbeginner/
      • http://ubh.tripod.com/web/html/tags1.htm
      • http://www.w3schools.com/html/html_primary.asp