1 / 29

Basic CSS

Basic CSS. Cascading Style Sheets. Get your notes ready!. Overview. Today we’ll learn: What CSS is (Cascading Style Sheets ) Why CSS is important How CSS is used We’ll then practice and try it out. What we’ve learned so far. A bunch of HTML tags:

ziven
Télécharger la présentation

Basic CSS

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. Basic CSS Cascading Style Sheets Get your notes ready!

  2. Overview • Today we’ll learn: • What CSS is (Cascading Style Sheets) • Why CSS is important • How CSS is used • We’ll then practice and try it out

  3. What we’ve learned so far • A bunch of HTML tags: • HTML, HEAD, TITLE, BODY, H1-H6, A, IMG, TABLE, TR, TD, TH, BR, HR, P, FONT • How and where to organize them on the page for layout and content • How to do basic formatting of the content using attributes

  4. What we’ve been doing: <table width="100%" height="100%" cols="2"> <tr> <td width="285px" valign="top"> <a href="Home%20Page.html"> <font color="blue">Home</font></a><br> <p><b><font color="blue"> Categories</font></b></p><br> </td> </tr> </table> How easy is this to read?

  5. Where we’re going: <table id=“sitenav”> <tr> <td > <a href="HomePage.html">Home</a> <p>Categories</p> </td> </tr> </table> Formatting will be separate

  6. What are Cascading Style Sheets? • Consistent format within a Web site • One set of styles applied to all pages • Web designers use them to easily change the look of entire Web site with a few simple changes in the CSS code. CSS defines how html elements are displayed.

  7. Content vs. Style HTML is like the meat and vegetables of the web (the words of your page) CSS is like the spices, herbs, sauces, and garnishes (the formatting and layout)

  8. Breaking it Down:Cascading Style Sheet • Cascading – can be defined in multiple places, and they work in priority order: • The style attribute <p style=“prop: value>” • Styles in the document itself (in head tag) • Style in external files • Style - Just a fancy word for formatting • Sheet - A collection of styles that can be quickly edited or replaced for a whole new look

  9. Demo • Need a few fashion volunteers: • One to represent content of the page • Several to represent CSS format files

  10. CSS – Rules • CSS Rule Syntax has 3 parts: • Selector • Property • Value Selector Rule Property Value

  11. Selectors • We’ll learn about selectors in the next lesson • For today: they select or choose which HTML tags on the page their formatting applies to

  12. PropertiesRules can have multiple properties Comment Multiple properties

  13. 3 ways to use styles • Inline style: <p style=“prop: value>” • Styles in the document itself (in head tag) • Style in external files • We’ll try all 3, but almost always use the last one

  14. Inline Styles • Define CSS style in the HTML tags • The style attribute can be added to many HTML tags • Exercise • Open your favorites assignment • Find a <p> tag • Specify a color for the <p> tag by using the style attribute

  15. Styles inside the file • Define a CSS style in the <head> tag: • Exercise: Open your favorites.html file • In the <head> section, add a <style> block to specify the color for <p> tags

  16. External Styles • Define external style sheet in the <head> tag • Exercise • Open a new file in Notepad++ • Select Language -> C ->CSS • Type a CSS rule for the color of a <p> tag • Save as mystyles.csswhere favorites.html is • Open favorites.html, add the <link> tag to the page to point to mystyles.css

  17. Best Practice / Requirements • Use external styles for the web pages you design • This is the best practice recommended by the industry • All of our work in this class will do the same

  18. Backup

  19. History The Need for CSS • HTML defines the content of a Web page. • With popularity of the Internet, style became important. • HTML alone makes it difficult to separate style from the content. The Result • World Wide Consortium (W3C) created styles as a part of HTML 4.0. • CSS separates content from style. • A separate CSS file can contain almost all of the style details for the Web site.

  20. Advantages of Using CSS • Creates consistency within and across pages • Example without a CSS file: • A designer creates a Web page containing code for the heading to be bold, green, 32 pt. Arial font. • On the second page of the site, a heading is entered but this time the designer enters 26 pt. font for the heading. • Example with a CSS file: • Designer creates a CSS file to define h1 as bold, green, 32 pt. Arial font. • The CSS file is referenced on both the first and second page. • Every time h1 is used, a heading is as bold, green, 32 pt. Arial font. • A change in the CSS file automatically changes both pages.

  21. Advantages of Using CSS • Improves the load time for Web pages. • CSS code serves as the directions for the browser to display both content and style. • Once the style has been downloaded into memory (cached), subsequent pages using the same style will load faster.

  22. Lesson Planning

  23. Goals – Understanding: • What CSS is • Why CSS is important • How it is used • Practicing to get a first exposure to using CSS with a web page

  24. Objectives • Students are introduced to CSS concepts and justification, getting first exposure • Students get hands-on practice with using styles with previous web pages they have created. This will increase familiarity and retention. • Measurement and verification of student understanding via group checks and one on one concept checks at each computer workstation

  25. Pre Requisites • Knowledge of: • Basic HTML tags and attributes • Using attributes for formatting • Use of Notepad++

  26. Materials • Slides with examples (or present on whiteboard) • PCs with Notepad++ and Web Browser

  27. Lesson Description • This lesson covers what CSS is, why it’s important, and how to use it • Students will get a first introduction to the concepts of CSS stylesheets, and the rules that make them up (selectors, properties, and values)

  28. Lesson Procedure • Quick review of previous work on tables, tags • Interactively go through slides • Give exercises for in class practice and concept checks • Walk the room asking/answering questions • Do concept checks

  29. Closure/Conclusion • Ask questions on what is confusing or needs more time/practice • Discussion • Who can summarize what a stylesheet is? • Why are they useful? • How does this change how you create pages going forward?

More Related