Cascading Style Sheets
Upcoming SlideShare
Loading in...5

Cascading Style Sheets






Total Views
Views on SlideShare
Embed Views



1 Embed 47 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.

  • 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 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: ]
    • 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;
      • }