1 / 19

Web Design:

Web Design:. Fall 2011 Monday 8-10pm 200 Sutardja-Dai Hall. Basic to Advanced Techniques. CSS Introduction. Lecture Code:. Web Design: Basic to Advanced Techniques. Recap 1: Good Coding Style. HTML is flexible – case insensitive, largely works even if your tags are missing a few things

arlais
Télécharger la présentation

Web Design:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design: Fall 2011 Monday 8-10pm 200 Sutardja-Dai Hall • Basic to Advanced Techniques CSS Introduction Lecture Code: Web Design:Basic to Advanced Techniques

  2. Recap 1: Good Coding Style • HTML is flexible – case insensitive, largely works even if your tags are missing a few things • However, as developers, it’s important to pay attention to how your code *looks* as well as how it *works* • Why? Easier to edit later, easier for others to read, matches strict industry standards, etc. • Tips are on Piazza also:

  3. Recap 2: Divs • Divs are essential • They help us organize groups of content on our websites • Basic tag is <div> </div> • Can help identify our div groups by giving them a name (called an ID or class) • Some did this on the previous lab • We won’t cover it until next lecture!

  4. What is CSS? • Cascading Style Sheets • Separate structured content (HTML) from visual appearance (CSS) • More formatting and styling options than HTML alone • Avoid repetition of code • Bottom line: Makes your page look good

  5. How would the Internet look without CSS? Web Design:Basic to Advanced Techniques

  6. How would the Internet look without CSS? Web Design:Basic to Advanced Techniques

  7. How does CSS work? • CSS communicates with our HTML page through a special link (should all be on one line): <link href=“style.css”rel="stylesheet” type="text/css”/> • We put this between the <head> and </head> tags in every HTML page that needs to be styled • You can replace “style.css” above with the name of your stylesheet, but style.css is standard • This technique is called using an external style sheet

  8. HTML Element Selectors • What if I want to give all my paragraphs a certain font color? • I could… • Put in some code in front of each <p> tag that says “make the text blue!” [wrong answer] • Use CSS to select all HTML elements with a <p> tag, and set their font color in one place [yes] • Let’s see this in action:

  9. Element Selector: p HTML code (sample.html) CSS code (style.css) The result (sample.html)

  10. Element Selectors: Syntax p{ font-family: Helvetica; color: #3399ff; } 1: Name of our HTML element (selector) 2: Opening brace { 3: The properties and their values; 4: Closing brace

  11. Let’s try img Result: HTML code (sample.html): CSS (style.css):

  12. Let’s try img Result: HTML code (sample.html): Quick question: What’s going on with my images?! How can I possibly have the same image appear with different src values?! CSS (style.css):

  13. Let’s try img Result: Answer: The first one links to the image online: we just copied the image URL (right click). The second one means we downloaded the image, uploaded it to Cyberduck, and put it in the same folder as our HTML file. HTML code (sample.html): CSS (style.css):

  14. CSS Questions: 1 • How do we know what properties are available for our elements? • I.e., how do we know that “color” is available for p? Is it available for img? What about others? • For now, use the properties we’ve given you in the Lab – they’re pretty comprehensive • If you want more than you’ll ever need, look here: http://w3schools.com/cssref/ • Organized by type of HTML element

  15. CSS Questions: 2 • How do I know what values are available for my properties? • Google “x property CSS”. Usually, will go to W3Schools:

  16. CSS Questions: 2 …info continued down the page

  17. CSS Questions: 3 • What if I only want *one* of my paragraphs to be a certain style, and the others to be different? • This will be covered in the next lecture • CSS gives us ways to choose which HTML elements will receive certain styles, even if they are the same kind of HTML element!

  18. CSS Questions: 4 • What the heck are those letters and numbers in the color property? • Hex codes: how the internet understands colors • Really fun to choose! Google “hex colors”:

  19. Lab 3 • Complete the lab • Ask us for help! • Try Extra for Experts if you want  • Resource for CSS properties, values, and background:http://w3schools.com/cssref/ • Excellent resource in case you forget HTML syntax: http://www.w3schools.com/ Web Design:Basic to Advanced Techniques

More Related