Cascading Style Sheets Basic CSS Cascading Style Sheets
Objectives After today, you will be able to Describe Cascading Style Sheets (CSS) Explain why CSS is important Define styles for a Web site using CSS Evaluate the resultant style when styles are placed inline, in the <head> element, and in an external file.
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: How easy is this to read? <table width="100%" height="100%" > <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: Formatting will be separate <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. Introduce CSS. Cascading Style Sheets (CSS) are used to create a consistent look within a Web site. Remind students that a Web site is a collection of Web pages. By using CSS, a Web designer can create a consistent look between the pages of the site and easily change the look with a few simple changes of code.
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)
History The Need for CSS The Result 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. Discuss the need for CSS. The original intent of HTML was to define the content of a Web page. As browsers grew and as the popularity of the Internet also grew, the separation between content and style became difficult. Style tags became intertwined with the content and made the development of a Web page extremely time consuming. The World Wide Consortium (W3C) developed styles which became a part of HTML 4.0. Styles allowed designers to separate the content from the style by creating a separate CSS file. This file would contain most of the information needed to provide the style of the Web page. The Web page file then references the CSS file to get direction for the style of the Web page.
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
CSS – Rules Selector Rule Property Value CSS Rule Syntax has 3 parts:
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 Colors can be represented by hexadecimal numbers or pre-defined descriptive text.
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
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 <p> tag that does the following: Sets the color Sets the font-family (i.e. verdana) Save as mystyles.css where favorites.html is Open favorites.html, add the <link> tag to the page to point to mystyles.css
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 Choose a color that is a part of the color scheme
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
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
Review Why is CSS important? What happens with the following? What is CSS? CSS defines how html elements are displayed. Why is CSS important? It separates the content from the style What happens with the following? ... <head> <style type="text/css"> p { color: #00FF00; } </style> </head> <body> <p style="color: #FF0000">1st Para</p> <p>2nd Para</p> …
Backup
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.
History The Need for CSS The Result 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. Discuss the need for CSS. The original intent of HTML was to define the content of a Web page. As browsers grew and as the popularity of the Internet also grew, the separation between content and style became difficult. Style tags became intertwined with the content and made the development of a Web page extremely time consuming. The World Wide Consortium (W3C) developed styles which became a part of HTML 4.0. Styles allowed designers to separate the content from the style by creating a separate CSS file. This file would contain most of the information needed to provide the style of the Web page. The Web page file then references the CSS file to get direction for the style of the Web page.
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. Discuss the advantages of using a CSS file. The CSS file defines the style elements and allows for the consistency between pages of a Web site. For example, on the first page of a Web site, the designer creates the code for the heading of the page to be bold, green, 32 pt. Arial font. Without CSS, the code to create this look is included with the content of the page. As the designer completes the first page, work is begun on the second page. This time the designer creates a similar heading but makes an error and enters the code to display the text at 26 pt. font. The pages now lack consistency. A designer using a CSS file might define h1 as bold, green, 32 pt. Arial font. A link to the CSS file is placed at the beginning of the Web page code and now the use of an h1 element will create text which bold, green, 32 pt. Arial font. The same reference to the CSS file on the second page will result in the same look for the heading on page 2.
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. The use of CSS improves the load time for Web pages. When a Web page is loaded by a browser, the browser looks at the code and follows the directions of the code to create the page that we see. Once the browser has downloaded the first page, the information is stored in memory, or cached. The subsequent pages that use the same information will now load faster as the style created has now been cached. 24