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

Cascading Style Sheets

on

  • 2,454 views

 

Statistics

Views

Total Views
2,454
Views on SlideShare
2,407
Embed Views
47

Actions

Likes
2
Downloads
72
Comments
1

1 Embed 47

http://www.jeromelocson.com 47

Accessibility

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.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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
    •