SlideShare a Scribd company logo
DM250
Web Page Design
 Mondays 6:30PM - 9:20PM
     Library Classroom
 http://online.greenville.edu
       Attendance Pin:
The Internet:
   A Refresher
REMEMBER REMEMBER...
Photo by jtstrathdee on Flickr
XHTML RULES
html <tags>




                 Photo by Jesper on Flickr
XHTML RULES
    html <tags>
✓ XHTML pages need to end with
  a .html (or .htm) extension




                                 Photo by Jesper on Flickr
XHTML RULES
     html <tags>
✓ XHTML pages need to end with
    a .html (or .htm) extension
✓   Tags Gotta Close




                                  Photo by Jesper on Flickr
XHTML RULES
     html <tags>
✓ XHTML pages need to end with
    a .html (or .htm) extension
✓   Tags Gotta Close
✓   Tags are like boxes




                                  Photo by Jesper on Flickr
XHTML RULES
    html <tags>
✓ XHTML pages need to end with
  a .html (or .htm) extension
✓ Tags Gotta Close
✓ Tags are like boxes
 ‣ They close out in order
     <body><p><b></b></p></body>




                                   Photo by Jesper on Flickr
XHTML RULES
    html <tags>
✓ XHTML pages need to end with
  a .html (or .htm) extension
✓ Tags Gotta Close
✓ Tags are like boxes
 ‣ They close out in order
     <body><p><b></b></p></body>
✓ Attributes go inside the angle
  brackets. <p style=“color: red;”>


                                      Photo by Jesper on Flickr
XHTML RULES
    html <tags>
✓ XHTML pages need to end with
  a .html (or .htm) extension
✓ Tags Gotta Close
✓ Tags are like boxes
 ‣ They close out in order
     <body><p><b></b></p></body>
✓ Attributes go inside the angle
  brackets. <p style=“color: red;”>
✓ A tag pair is called an element
                                      Photo by Jesper on Flickr
XHTML RULES
    html <tags>
✓ XHTML pages need to end with
  a .html (or .htm) extension
✓ Tags Gotta Close
✓ Tags are like boxes
 ‣ They close out in order
     <body><p><b></b></p></body>
✓ Attributes go inside the angle
  brackets. <p style=“color: red;”>
✓ A tag pair is called an element
 ‣ <p> + </p> = element
                                      Photo by Jesper on Flickr
T    HE FIGHT
                           Physical
Logical Structure
                          Formatting

                    vs.
                              Photo by Private Nobby on Flickr
The Fight
    LOGICAL ELEMENTS           PHYSICAL ELEMENTS
✓ Define individual           ✓ All about formatting
    components               ✓ They do not define
✓   They do not define           the structure.
    the actual formatting.
<b>bold</b>          Structure won out.
                   And so there is separation
  <i>italic</i>     of Structure and Style.

<u>underline</u>     And that leads us to...
<b>bold</b>          Structure won out.
                   And so there is separation
  <i>italic</i>     of Structure and Style.

<u>underline</u>     And that leads us to...
<b>bold</b>          Structure won out.
                   And so there is separation
  <i>italic</i>     of Structure and Style.

<u>underline</u>     And that leads us to...
DM250 Week 2 - CSS
Cascading Style Sheets
AKA




      Photo by nhussein on Flickr
AKA
 REAL
   ULTIMATE
       POWER
              Photo by nhussein on Flickr
Background Info



When you go to a Web page that uses a style sheet, the following things happen:
1) Your browser requests the XHTML page from a Web server. 2) The browser finds an
instruction in the XHTML page indicating that the page uses a style sheet. The
browser then grabs that style sheet with a separate request. 3) The browser chews
through the XHTML in the Web page, and uses the rules in the style sheet to adjust
the page’s appearance.
THE 3 TYPES
                         OF STYLES




Photo by g_originals on Flickr
THE 3 TYPES
                         OF STYLES

1. Internal Style Sheets




Photo by g_originals on Flickr
THE 3 TYPES
                         OF STYLES

1. Internal Style Sheets

2. Inline Styles




Photo by g_originals on Flickr
THE 3 TYPES
                         OF STYLES

1. Internal Style Sheets

2. Inline Styles

3. External Style Sheets



Photo by g_originals on Flickr
Internal
Style Sheets
Internal
Style Sheets
• Located in the the XHTML document
Internal
Style Sheets
• Located in the the XHTML document
• Usually defined in the <head>
Internal
Style Sheets
• Located in the the XHTML document
• Usually defined in the <head>
• Only *sort of* separate structure and
  presentation
Inline Styles




Photo by jdblundell on Flickr
Inline Styles
           • Set as an attribute on an element




Photo by jdblundell on Flickr
Inline Styles
           • Set as an attribute on an element
           • Inline means in the XHTML markup




Photo by jdblundell on Flickr
Inline Styles
           • Set as an attribute on an element
           • Inline means in the XHTML markup
           • For example:
                    <p style= “color: red; border: thin solid #000;”>




Photo by jdblundell on Flickr
External Style Sheets




Photo by s4xton on Flickr
External Style Sheets

                 • A separate file with just the styles - style.css




Photo by s4xton on Flickr
External Style Sheets

                 • A separate file with just the styles - style.css
                 • Can have multiples



Photo by s4xton on Flickr
External Style Sheets

                 • A separate file with just the styles - style.css
                 • Can have multiples
                 • Keeps your CSS orderly and easy-to-edit


Photo by s4xton on Flickr
External Style Sheets

                 • A separate file with just the styles - style.css
                 • Can have multiples
                 • Keeps your CSS orderly and easy-to-edit
                 • True separation of structure and
                            presentation


Photo by s4xton on Flickr
Anatomy of a Rule

selector { property: value; }
Anatomy of a Rule

selector { property: value; }


  h1 { color: blue; }
Grouping Properties
h1, h2, h3 {
               font-weight: bold;
               color: blue;
               text-align: center;
           }
Applying a Style Sheet

<head>
<link rel=“stylesheet”
type=“text/css” href=“style.css” />
<title>Awesome Page Title!</title>
</head>
DM250 Week 2 - CSS
LET’S
  GET
STYLIN’

More Related Content

DM250 Week 2 - CSS

  • 1. DM250 Web Page Design Mondays 6:30PM - 9:20PM Library Classroom http://online.greenville.edu Attendance Pin:
  • 2. The Internet: A Refresher
  • 3. REMEMBER REMEMBER... Photo by jtstrathdee on Flickr
  • 4. XHTML RULES html <tags> Photo by Jesper on Flickr
  • 5. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension Photo by Jesper on Flickr
  • 6. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close Photo by Jesper on Flickr
  • 7. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close ✓ Tags are like boxes Photo by Jesper on Flickr
  • 8. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close ✓ Tags are like boxes ‣ They close out in order <body><p><b></b></p></body> Photo by Jesper on Flickr
  • 9. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close ✓ Tags are like boxes ‣ They close out in order <body><p><b></b></p></body> ✓ Attributes go inside the angle brackets. <p style=“color: red;”> Photo by Jesper on Flickr
  • 10. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close ✓ Tags are like boxes ‣ They close out in order <body><p><b></b></p></body> ✓ Attributes go inside the angle brackets. <p style=“color: red;”> ✓ A tag pair is called an element Photo by Jesper on Flickr
  • 11. XHTML RULES html <tags> ✓ XHTML pages need to end with a .html (or .htm) extension ✓ Tags Gotta Close ✓ Tags are like boxes ‣ They close out in order <body><p><b></b></p></body> ✓ Attributes go inside the angle brackets. <p style=“color: red;”> ✓ A tag pair is called an element ‣ <p> + </p> = element Photo by Jesper on Flickr
  • 12. T HE FIGHT Physical Logical Structure Formatting vs. Photo by Private Nobby on Flickr
  • 13. The Fight LOGICAL ELEMENTS PHYSICAL ELEMENTS ✓ Define individual ✓ All about formatting components ✓ They do not define ✓ They do not define the structure. the actual formatting.
  • 14. <b>bold</b> Structure won out. And so there is separation <i>italic</i> of Structure and Style. <u>underline</u> And that leads us to...
  • 15. <b>bold</b> Structure won out. And so there is separation <i>italic</i> of Structure and Style. <u>underline</u> And that leads us to...
  • 16. <b>bold</b> Structure won out. And so there is separation <i>italic</i> of Structure and Style. <u>underline</u> And that leads us to...
  • 19. AKA Photo by nhussein on Flickr
  • 20. AKA REAL ULTIMATE POWER Photo by nhussein on Flickr
  • 21. Background Info When you go to a Web page that uses a style sheet, the following things happen: 1) Your browser requests the XHTML page from a Web server. 2) The browser finds an instruction in the XHTML page indicating that the page uses a style sheet. The browser then grabs that style sheet with a separate request. 3) The browser chews through the XHTML in the Web page, and uses the rules in the style sheet to adjust the page’s appearance.
  • 22. THE 3 TYPES OF STYLES Photo by g_originals on Flickr
  • 23. THE 3 TYPES OF STYLES 1. Internal Style Sheets Photo by g_originals on Flickr
  • 24. THE 3 TYPES OF STYLES 1. Internal Style Sheets 2. Inline Styles Photo by g_originals on Flickr
  • 25. THE 3 TYPES OF STYLES 1. Internal Style Sheets 2. Inline Styles 3. External Style Sheets Photo by g_originals on Flickr
  • 27. Internal Style Sheets • Located in the the XHTML document
  • 28. Internal Style Sheets • Located in the the XHTML document • Usually defined in the <head>
  • 29. Internal Style Sheets • Located in the the XHTML document • Usually defined in the <head> • Only *sort of* separate structure and presentation
  • 30. Inline Styles Photo by jdblundell on Flickr
  • 31. Inline Styles • Set as an attribute on an element Photo by jdblundell on Flickr
  • 32. Inline Styles • Set as an attribute on an element • Inline means in the XHTML markup Photo by jdblundell on Flickr
  • 33. Inline Styles • Set as an attribute on an element • Inline means in the XHTML markup • For example: <p style= “color: red; border: thin solid #000;”> Photo by jdblundell on Flickr
  • 34. External Style Sheets Photo by s4xton on Flickr
  • 35. External Style Sheets • A separate file with just the styles - style.css Photo by s4xton on Flickr
  • 36. External Style Sheets • A separate file with just the styles - style.css • Can have multiples Photo by s4xton on Flickr
  • 37. External Style Sheets • A separate file with just the styles - style.css • Can have multiples • Keeps your CSS orderly and easy-to-edit Photo by s4xton on Flickr
  • 38. External Style Sheets • A separate file with just the styles - style.css • Can have multiples • Keeps your CSS orderly and easy-to-edit • True separation of structure and presentation Photo by s4xton on Flickr
  • 39. Anatomy of a Rule selector { property: value; }
  • 40. Anatomy of a Rule selector { property: value; } h1 { color: blue; }
  • 41. Grouping Properties h1, h2, h3 { font-weight: bold; color: blue; text-align: center; }
  • 42. Applying a Style Sheet <head> <link rel=“stylesheet” type=“text/css” href=“style.css” /> <title>Awesome Page Title!</title> </head>

Editor's Notes

  1. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  2. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  3. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  4. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  5. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  6. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  7. The tags are what separate normal text from HTML code. You might know them as the words between the &lt;angle-brackets&gt;. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don&amp;#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: &lt;b&gt;These words will be bold&lt;/b&gt;, and these will not. Pairs are called elements. Containers elements &amp; standalone elements.
  8. Create a new text file in your text editor (notepad++) and save it as style.css
  9. Create a new text file in your text editor (notepad++) and save it as style.css
  10. Create a new text file in your text editor (notepad++) and save it as style.css
  11. Create a new text file in your text editor (notepad++) and save it as style.css
  12. Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) Value - set the value for the property defined. (the color, alignment direction, etc.)
  13. Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) Value - set the value for the property defined. (the color, alignment direction, etc.)
  14. Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) Value - set the value for the property defined. (the color, alignment direction, etc.)
  15. Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) Value - set the value for the property defined. (the color, alignment direction, etc.)