DM250 Week 2 - CSS
Upcoming SlideShare
Loading in...5
×
 

DM250 Week 2 - CSS

on

  • 1,443 views

Slides for week 2 of DM250 at Greenville College, cover CSS and an XHTML recap.

Slides for week 2 of DM250 at Greenville College, cover CSS and an XHTML recap.

Statistics

Views

Total Views
1,443
Views on SlideShare
1,423
Embed Views
20

Actions

Likes
1
Downloads
10
Comments
0

4 Embeds 20

http://joel.thegoodmanblog.com 16
http://www.linkedin.com 2
http://ist.greenville.edu 1
https://online.greenville.edu 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • The tags are what separate normal text from HTML code. You might know them as the words between the . They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. <br /> Different tags will perform different functions. The tags themselves don&#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: <br /> These words will be bold, and these will not. <br /> Pairs are called elements. Containers elements & standalone elements.
  • Create a new text file in your text editor (notepad++) and save it as style.css
  • Create a new text file in your text editor (notepad++) and save it as style.css
  • Create a new text file in your text editor (notepad++) and save it as style.css
  • Create a new text file in your text editor (notepad++) and save it as style.css
  • Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. <br /> Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) <br /> Value - set the value for the property defined. (the color, alignment direction, etc.)
  • Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. <br /> Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) <br /> Value - set the value for the property defined. (the color, alignment direction, etc.)
  • Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. <br /> Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) <br /> Value - set the value for the property defined. (the color, alignment direction, etc.)
  • Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content. <br /> Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.) <br /> Value - set the value for the property defined. (the color, alignment direction, etc.)

DM250 Week 2 - CSS DM250 Week 2 - CSS Presentation Transcript

  • 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...
  • 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>
  • LET’S GET STYLIN’