• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week3 css

Week3 css






Total Views
Views on SlideShare
Embed Views



4 Embeds 1,220

http://gslis720.commons.gc.cuny.edu 656
http://gslis751.commons.gc.cuny.edu 561
http://localhost 2
https://gslis720.commons.gc.cuny.edu 1


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.

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

    Week3 css Week3 css Presentation Transcript

    • Week 3 css
    • CSS - what?
      • Cascade Style Sheets
      • Defines how to display HTML elements (fonts, size, colors, background images, border, styles)
      • Add to HTML 4.0
      • Stored in CSS files
      • All browsers support CSS
      • Defined by the World Wide Web consortium (W3C)
      CSS Website Example http:// www.csszengarden.com /
    • CSS - why???
      • Advantages
        • Saves time editing (define once on the element, next time the elements will automatically defined)
        • Page load faster
        • Easy maintenance
        • Superior styles to HTML (much wider array of attributes)
      • Disadvantage
        • Browser compatibility
    • syntax
      • A CSS rule has two main parts: a selector, and one or more declarations
      • The selector is the HTML element you want to style.
        • Each declaration consists of a property and a value.
        • The property is the style attribute you want to change. Each property has a value.
    • how to ??
      • Text editors
        • Notepad/WordPad for Windows; TextEdit for Mac
        • Dreamweaver has a function embedded into the program.
      • Comments
        • /* This is for CSS. */
      • Grouping
        • h1, h2, h3 {color: blue;}
      • Applying multiple properties
        • h1 {color: blue;
          • font-size: 150%;
          • font-family: arial, Helvetica, “sans serif”;
        • }
    • inline and internal styles <html> <head> <title>Project One</title> </head> < body > <p > This is a red page. </p> </body> </html> <style type=&quot;text/css&quot;> body {background-color: #ff0000;} p {color: blue; margin-left:20px;} </style> style=&quot;background-color: #ff0000;&quot; style=&quot;color:blue;margin-left:20px ;&quot;
    • external style (1)
      • Create a text file and save as .css
      • Create a link in HTML document
      • The css style sheet contains only styles
    • external style – where to put it?
        • p{margin-left:20px;}
        • body{background-color:#ff0000;}
      external style – how to write it? mystyle.css project.html
        • <html>
        • <head>
        • <title>Project One</title>
        • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“mystyle.css&quot; />
        • </head>
        • <body>
        • ...
    • cascade order
      • Styles can be specified:
        • Inside an HTML element (in-line)
        • Inside the head section of an HTML page (internal)
        • In an external CSS style sheet (external)
      • All the styles will cascade into a new style sheet by the following rules, where number 1 has the highest priority:
        • inline style
        • internal style
        • external style
        • browser default
    • CSS code reference
      • Text Color
        • body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)}
      • Text Alignment
          • h1 {text-align:center}
          • p.date {text-align:right}
          • p.main {text-align:justify}
      • Text Decoration
          • h1 {text-decoration:overline}
          • h2 {text-decoration:line-through}
          • h3 {text-decoration:underline}
          • h4 {text-decoration:blink}
    • CSS code reference
      • font
      • p { font-style: italic;
      • font-weight: bold;
      • font-size: 30px;
      • font-family: arial, sans-serif;}
      • Using the short hand property, the code can be simplified:
        • p { font: italic bold 30px arial, sans-serif; }
    • CSS code reference
      • link
        • a:link {color: blue;} (unvisited link)
        • a:visited {color: red;}
        • a:active {background-color: #ffff00;} (active link)
        • a:hover {color: orange;
        • font-style: italic;
        • letter-spacing: 10px;
        • font-weight:bold;
        • text-transform: uppercase;
        • background-color:yellow;}
    • 4 selector types
      • Tag:
        • re-define an existing HTML element
      • ID:
      • applies to only one HTML element
      • Class:
      • applies to any HTML element
      • Compound:
      • used to combine two or more style rules to create a style definition that displays only when one style is contained within another.
      • Read: CSS selectors: tags, ID, class and compound
    • tag
    • ID #id
      • used to specify a style for a single, unique element.
      • The id selector uses the id attribute of the HTML element, and is defined with a &quot;#&quot;.
      <html> <head> <style type=&quot;text/css&quot;> #para1 {text-align:center; color:red;} </style> </head> <body> <p id=&quot;para1&quot; >Hello World!</p> <p>This paragraph is not affected.</p> </body> </html> Hello World! This paragraph is not affected. P P P P
    • CLASS .classname
      • used to specify a style for different elements.
      • allows you to set a particular style for any html elements with the same class.
      • uses the html class attribute, and is defined with a &quot;.&quot;
      P h1 h4 h2
    • CLASS (example) <html> <head> <style type=&quot;text/css&quot;> .center{text-align:center;} </style> </head> <body> <h1 class=&quot;center&quot; >center-aligned heading</h1> <p class=&quot;center&quot; >center-aligned paragraph.</p> /body> </html> center-aligned heading center-aligned paragraph.
    • recap
      • 3 places
      • inline
      • internal style (between <head></head>)
      • external style (save as .css, html links in the head section)
      • Selectors
      • tag style (applies globally to an individual HTML tag)
      • Id style (format a unique item on a page)
      • class style (format more than 1 item at the same time)
      • compound style
    • Set up the working space
      • Click Window tab > click CSS style to open CSS panel
      • On Properties panel, choose CSS tab
    • create a new CSS style
      • CSS style panel
        • highlight the text or image or table
        • + add new CSS rule >selector (class, id, tag, or compound)
        • name internal or external or defined .css file
        • define elements
      • Properties Panel
        • click CSS mode
        • highlight the text or image
        • targeted rule: new CSS rule>edit rule>
        • open a window > choose the appropriate selector - class, id, tag, or compound > name it
        • define the elements
    • apply existing styles
      • Properties Panel
        • For non-text elements, find class button and click the arrow, choose the existing class from the list;
        • For text elements, click CSS mode> targeted rule , choose the existing class from the list.
    • remove a style
      • Property panel:
        • <HTML> mode >class>none
          • or
        • <CSS> mode> targeted rule>remove class
      • ** It only remove the style form the item, but the class is still there.
    • style, style, more style
      • Edit Styles
        • Find the rule in CSS panel
        • Click on it
        • Change it in the window
      • Rename a class style
        • Properties Panel > class menu>rename or
        • Right click the rule in CSS panel
      • Duplicate a style
        • CSS style panel > right click the style name> duplicate
    • Link to an existing CSS style sheet
      • Open the HTML file
      • CSS style panel>attach style sheet >browse>all media
      Attach style sheet button This is your .css file name.