CSS Powerpoint
advertisement
Basic CSS Get your notes ready! Cascading Style Sheets Debugging with chrome Press f12 after going to a page to view its source Right click and select “Inspect Element” Elements This is the html your browser is using, it will have “fixed” some of your mistakes in this view Use the Magnifying glass to find how the html is used. 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: 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 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? 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 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. 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) Breaking it Down: Cascading Style Sheet Cascading – can be defined in multiple places, and they work in priority order: 1. 2. 3. Style The style attribute <p style=“prop: value>” Styles in the document itself (in head tag) Style in external files - Just a fancy word for formatting Sheet - A collection of styles that can be quickly edited or replaced for a whole new look CSS – Rules CSS Rule Syntax has 3 parts: Selector Property Selector Value Rule Property Value 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 Properties Rules can have multiple properties Comment Multiple properties 3 ways to use styles 1. 2. 3. 4. 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 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 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 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.css where favorites.html is Open favorites.html, add the <link> tag to the page to point to mystyles.css 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 Backup 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. 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. 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. Lesson Planning 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 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 Pre Requisites Knowledge of: Basic HTML tags and attributes Using attributes for formatting Use of Notepad++ Materials Slides with examples (or present on whiteboard) PCs with Notepad++ and Web Browser 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) 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 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?
