CSS 101

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    CSS 101 - Presentation Transcript

    1. CSS 101 WebComm School – 10/24/07
    2. Huh? CSS?
      • Does not stand for C orn S mut S idedish
    3. Well, what is it then?
      • Stands for C ascading S tyle S heets
      • Simple language that defines how a website should look
      • Separates the presentation of a website from the content
      • It’s a web standard, and it’s here to stay!
      • If done correctly, it will save you a lot of time and effort!
    4.  
    5.  
    6. Where did this come from?
      • Håkon Wium Lie proposed idea in 1994
      • W3C created, continues work on CSS
      • CSS 1 published December 1996
      • CSS Working Group created in early 1997
      • CSS 2 published May 1998
      • CSS 3 has been under development for the past 8 years
    7. Any problems with CSS?
      • 11 years later, and Internet Explorer still does not correctly support CSS 1
      • No browser has full support for CSS 2
      • CSS doesn’t always have the best way of doing things, but it is the best we’ve got
    8. How do I use it?
      • Included into a web page in 3 ways
        • External style sheet (best)
        • Internal style sheet (not as good)
        • Inline style (basically breaking the purpose of CSS)
      • Style sheets will cascade , or overwrite similar styles to create one master set of styles
        • Inline overwrites internal, which overwrites external, which overwrites browser default
    9. How do I add CSS to my page?
      • External
      • <link href=“styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=“screen&quot; />
      • Internal
      • <head>
      • <style type=“text/css”>
      • /* styles go here */
      • </style>
      • </head>
      • Inline
      • <p style=“ /* styles go here */ ”>Text</p>
    10. CSS Syntax
      • Selector {
      • property: value;
      • }
      • Selector is what you want to define (HTML element, for example)
      • Property is the CSS style you want to change, with a Value that you set it at
    11. CSS Selectors
      • 3 types of selectors
        • Tag selectors
        • ID selectors
        • Class selectors
      • Selectors should never start with a number, nor should they have spaces in them
    12. Tag Selectors
      • Can be any type of HTML element
        • body
        • p
        • div
        • … and more!
      • p {
      • background-color: red;
      • }
      • Makes the background of all paragraphs red
    13. ID Selectors
      • You can give an ID to any element to style it differently than other similar elements
      • IDs must be unique! You can not have two elements on one page with the same ID!
      • p#special {
      • background-color: blue;
      • }
      • One paragraph with id=“special” will now be blue
    14. Class Selectors
      • Can give multiple elements a class to style them differently
      • p.semispecial {
      • background-color: green;
      • }
      • Any paragraph with class=“semispecial” will now be green—can be multiple ones on a page
    15. Descendant Selectors
      • You can chain selectors together! Just put a space between them
      • body #container p.warning a {
      • color: red;
      • }
      • What element(s) will be affected by this style?
    16. Grouping Selectors
      • You can group selectors together as well with commas
      • p.warning, p.special {
      • color: red;
      • }
      • Now both classes, warning and special, will have red text.
    17. Selectors, cont.
      • Name selectors based on what the define, not on what they look like!
      • Is anything wrong with this code?
      • <div class=“red”>
      • <h1>Warning!</h1>
      • <p>A hurricane warning is in effect. Stay indoors.</p>
      • </div>
      • ------------------------------------------------------
      • .red {
      • color: red;
      • }
    18. CSS Properties
      • Literally hundreds of properties to choose from to change your webpage’s design
      • You can change many things:
        • Font and text properties
        • Background colors, images
        • Positioning
        • Borders
        • Margin, padding

    + dunclairdunclair, 3 years ago

    custom

    2047 views, 3 favs, 2 embeds more stats

    The basics of the CSS!

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2047
      • 2014 on SlideShare
      • 33 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 100
    Most viewed embeds
    • 32 views on http://isuwebcomm.blogspot.com
    • 1 views on http://www.isuwebcomm.blogspot.com

    more

    All embeds
    • 32 views on http://isuwebcomm.blogspot.com
    • 1 views on http://www.isuwebcomm.blogspot.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags