HTTP & Websites. Web Browsers. Web Servers vs. Web sites. World Wide Web. Internet Explorer. Surfing the World Wide Web. Part 4. The World Wide Web

Transcription

1 HTTP & Websites Web Browsers Part 4 Surfing the World Wide Web World Wide Web Web Servers vs. Web sites The World Wide Web massive collection of websites on the Internet they link to each other and form a "web" this is why domains usually begin with "www" Internet vs. World Wide Web the Internet is the world wide network the World Wide Web is all the websites on it Are web servers the same as websites? not always server can store many sites one site may cover several servers Example: stored on multiple file servers 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Web Browsers Internet Explorer Web Browser specialized application that display webpages looks up domains uses HTTP to send messages to a Server Some popular Web Browsers Microsoft Internet Explorer Apple Safari Mozilla Firefox Google Chrome Created by Microsoft Integrated with the Windows first integrated in Windows 98 very controversial at the time Version 9 had a completely new interface Replaced by "Edge" same application with a new name 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer 208 6

2 Mozilla Firefox Google Chrome For Windows & Macintosh More secure than IE Interesting features anti-phishing technology built-in spell checker! Updates often! Download: Created by the Google Corporation Very minimalist graphical user interface Growing in popularity mostly at the expense of Internet Explorer Download from 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Opera Apple Safari Created by Opera Software Popular on smart phones The browser used on the Nintendo Wii and DS Download from Created by the Apple Corporation Integrated with Mac-OS X only browser in the latest version previous versions other browsers Available for Windows and Mac Download from 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer What are Cookies? Cookies A small text file saved on your computer created by a web server only visible to the site that created them managed by your web browser You don't have to accept cookies Delicious Little Annoyances VISITOR_INFO_LIVEqG-fp9Y6T34youtube.com/ *GPSyoutub e.com/ * 6/20/208 Sacramento State - Cook - CSc 8 - Summer

3 Threat of Cookies Threat of Cookies Any web server that you request data from can create (bake) a cookie Webpages can grab data from multiple servers this can included servers related to the site but are often servers that embed advertisements e.g. banners, pictures, etc... cookies can originate from any of these sources Ad-servers often support multiple webpages By saving data in cookies... ad-servers sites can track your page habits this cannot damage our computer Not dangerous like Spyware although this is a form of spying you do not suffer the effects of spyware only your browsing habits can be watched 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer What is a Webpage? Webpage Basics Creating a Webpage A webpage is, essentially, a text file Contains markup information special codes that indicate formatting example: bold, font, color Hypertext text that "linked" to other text or documents example: web page links 6/20/208 Sacramento State - Cook - CSc 8 - Summer Webpages vs. Websites HTML A webpage a visible page you see in your browser contains words, pictures, etc... A website is a collection of related webpages for example, the CSc 8 website Hypertext Markup Language text is marked with tags tags are delimited with < and > tags usually have a start and end - not always HTTP communications protocol application layer based on data used by browsers when requesting specific pages 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

4 Tags Tags In HTML, tags give markup information This includes adding formatting (bold, italics) as well as more complex structures like tables The format of tags is very simple to master Tags have two variants those that encapsulate other tags, text, etc those that insert or add an item into the text 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Tags - Encapsulate Tags - Encapsulate Many tags turn a feature "on" Basically, they affect everything between the start and end tags Start tags are denoted as <...> End tags are denoted as </...> <tag> </tag> <tag> </tag> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Tags - Insert Tags - Insert The other type of tag simple inserts or adds something to the webpage They don't have an end tag (obviously) After the tag name, a single slash is used to denote that no end tag will be present Think of it as a head tag merged with an end tag <tag/> <tag/> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

5 HTML Spacing Rules How Would This be Displayed? Browsers ignore formatting in HTML areas containing more than two spaces line breaks tabs In both cases, a single space is used This makes it easy to write HTML trust me Hello World! New line Blank space This is a test. 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The new lines become single spaces! Some Formatting Tags Hello World! This is a test. Tag <br/> <p> </p> Effect Break (new line) Paragraph 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Example Example Output Hello <br/> World!<br/> <br/> This is a test. Hello World! This is a test. 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

6 The Paragraph Tag Example The paragraph tag is very common in modern HTML It denotes the start and end of a paragraph <p> </p> <p>hello World!</p> <p>this is a test</p> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The Bold Tag The Italics Tag This tag is used to denote text that will be displayed in bold Very useful for making text "stand out" The tag must be ended This tag is used to denote text that will be displayed in italics The tag must be ended <b> </b> <i> </i> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The Underline Tag Basic Formatting Tags Summary This tag denotes text to be underlined Many browsers underline links so, only underline when it is necessary... or you'll confuse users The tag must be ended <u> </u> Tag <b> </b> <i> </i> <u> </u> Effect Bold Italics Underline 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

7 Example Example Output <i>italics</i><br/> <b>bold</b><br/> <u>underlined</u><br/> Italics Bold Underlined <i> </i> <b> </b> <u> </u> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Example Example Output <i><b>csc 8</b></i> <br/> <b><i>csc 8</i></b> CSc 8 CSc 8 The same 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The <CENTER> Tag Tag Attributes The center tag denotes text that will be centered on the screen. The tag must be ended Adds additional information to tags most tags have lots of attributes too many to cover in class! Notation attribute is placed between the tag's name and ending ">" very similar to a programming assignment statement <center> </center> <tag attribute = value> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

8 The <FONT> Tag <FONT> Example The font tag lets you change: the font color the font face (name) the font size Attributes are used in each case <font> </font> <font color = "red"> This text is red! </font> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <FONT> Example Output Header Tags This text is red! Tag <h> </h> <h2> </h2> <h3> </h3> <h4> </h4> Effect Main heading 2 nd heading 3 rd heading 4 th heading 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Header Tag Example Header Tag Example Output <h>universities</h> <h2>united States</h2> <h3>california</h3> <h4>sacramento State</h4> Universities United States California Sacramento State 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

9 Basic Structure of a Webpage Page Structure HyperText Markup Language All pages contain an <html> tag the first tag must be <html> the last tag must be </html> Between these two tags, you define the webpage's header the webpage's body 6/20/208 Sacramento State - Cook - CSc 8 - Summer Basic Structure of a Webpage Main Webpage Structure Tags Header tells the title of the page contains scripts, style sheets and other add-ins its optional, but good to define Body visible content of the page this is the vast majority of the HTML Tag <html> </html> <head> </head> <title> </title> <body> </body> Section Main tag Header Page Title Page Body 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <html> <head> <title>hello Class!</title> </head> <body> <h>hello World!</h> </body> </html> Resulting Page Title Body 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

10 Image Overview Adding Images HyperText Markup Language All images are linked from the webpage Only a few types of images are supported You must use these types on your website 6/20/208 Sacramento State - Cook - CSc 8 - Summer Supported Image Files The <IMG> Tag Extension.jpg What is it? Photograph Inserts an image into a webpage The src attribute is used to link the source image This tag has no ending tag.gif.png Graphic Interchange File Portable Network Graphic <img src = "link"/> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <IMG> Example <IMG> Example Output <img src="cat.jpg"/> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

11 <IMG> Example 2 <IMG> Example 2 Output <center> <img src="cat.jpg"/><br/> Fraternity of Mu Mu Mu </center> Fraternity of Mu Mu Mu 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Some Advanced <IMG> Attributes Some Advanced <IMG> Attributes Width and Height allows you to increase the size of the image either by percentage or pixel size Alt stands for "alternate" used for mouse-over text Align allows the image to "float" on the page quite easy to use possible values: right, left Border allows you to add a solid border looks good on photos 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <IMG> Example 3 <IMG> Example 3 Output <center> <img src="cat.jpg" width="00%"/> <img src="cat.jpg" width="200%"/> </center> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

12 <html> <head> <title>adorable Cat</title> </head> <body> <center> <img src="cat.jpg"/><br/> <i><b>the Adorable Cat</b></i> </center> </body> </html> Adding Lists HyperText Markup Language List Tags <UL> Example Tag <ol> </ol> <ul> </ul> <li> </li> Effect Ordered List Unordered List List Item <ul> <li>peter</li> <li>quagmire</li> <li>joe</li> <li>cleveland</li> </ul> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <UL> Example Output <OL> Example Peter Quagmire Joe Cleveland <ol> <li>tappa Kegga Bru</li> <li>kuppa Kappa Chino</li> <li>getta Loda Yu</li> </ol> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

13 <OL> Example Output. Tappa Kegga Bru 2. Kuppa Kappa Chino 3. Getta Loda Yu HTML Tables HyperText Markup Language 6/20/208 Sacramento State - Cook - CSc 8 - Summer Building HTML Tables Table Tags Tag Meaning Tables allow you to organize data into rows and columns Many websites use tables for visual effects <table> </table> <tr> </tr> <td> </td> Start / End Table Row Table Cell 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer <TABLE> Example <TABLE> Example 2 <table> <tr> <td>computer</td> <td>generation</td> </tr> </table> <table width=80% bgcolor="lightblue"> <tr> <td>name</td> <td>major</td> </tr> <tr> <td>joe Gunchy</td> <td>csc</td> </tr> </table> Row Row 2 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

14 <TABLE> Example 2 Output Name Joe Gunchy Major CSc Website Links HyperText Markup Language 6/20/208 Sacramento State - Cook - CSc 8 - Summer Link to New Page Types of <A> Links Links to pages use the <A> tag "A" stands for anchor yes, it doesn't make much sense The href attribute contains the hypertext reference links to another website or webpage External links links to pages outside of the website typically start with Internal links links to other pages on the same site tend to simply contain the name of the file 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Types of <A> Links Internal Link Example Bookmark links jumps to a location within same page The URL contains a # sign Also called intrapage links links Opens an application Starts with mailto: and then the address <a href = "resume.htm"> My Resume </a> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

15 Internal Link Example Output External Link Example My Resume This is a link: <a href=" CSUS </a> HTTP 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer External Link Example Output Link Example This is a link: CSUS Questions? Please <a href="mailto:dcook@csus.edu"> </a> mailto: me. 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Link Example Output Questions? Please me. Cascading Style Sheets Looking professional and avoid headaches 6/20/208 Sacramento State - Cook - CSc 8 - Summer

16 Cascading Style Sheets Why was it created? Cascading Style Sheets were created in 996 with HTML 4 Goal was to make it easier to create and maintain webpages It is a great success and it used by every professional website HTML has very few formatting tags Those tags with formatting have an inconsistent attributes If a website is updated, the author has to update, manually, each page So, HTML 3 made it difficult to maintain website styles difficult to update the appears of an entire site 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer CSS features Some Features (applies to all tags). Treats all tags as objects where the style of each uses an uniform properties 2. Users can create their own abstract styles 3. Styles can be incorporated number of different ways Control colors backgrounds can be used to highlight foreground border Set font size and face to anything Precise positioning of objects and much, much more 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The Box Model What is the Box Model? Each tag is treated as "box" where, graphically, each has the same format This applies from everything from <b> to <table> to <h> So, CSS has basic attributes that can be applied to any tag The CSS "box" essentially wraps around tags It consists of: margin border padding and the actual content. 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

17 The Box Model Margin The margin is the spacing outside the border This can be merged with the margin of other objects (above, left, right, below) So, it defines how much space it should have from other objects 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Border Padding The border is the graphical bounding rectangle for the object It can have any width (in pixels) as needed There are several line formats available solid dashed etc HTML 5 allows for rounded borders The padding is the spacing inside the border and the objects content Since it never "touches" other objects, it will never be merged Generally, this is set for anything inside a visual border 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer CSS and colors Taste the rainbow CSS & Color CSS offers flexibility when specifying a color This is uniformly used for all "boxes" Multiply ways of specifying a color are available 6/20/208 Sacramento State - Cook - CSc 8 - Summer

18 Bitmap Basics A Close Look at Pixels Bitmap graphic also known as a raster graphic most common class of graphic Made of little dots called pixels these are arranged in a grid color of each pixel is a binary number "pixel" comes from "picture element" 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer How Colors Are Represented Red-Green-Blue Values Colors are represented using Red-Green-Blue levels Hue-Saturation-Intensity Stored as a binary number as the actual RGB value or... a color code - palette index Image /20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Ways to specify a color Ways to specify a color Hexadecimal value most commonly used format values start with # and are followed by a hexadecimal value e.g. red is #FF0000 Decimal value same as hex except values are written decimal e.g. red is RGB(255,0,0) Pre-defined name CSS defines a considerable list of built-in names you should refer to the Internet for a full table 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

19 CSS Syntax CSS Syntax Everything has a structure The syntax of Cascading Style Sheets is fairly easy It takes little time to master which is an advantage to authoring websites Inspired by the C Programming Language 6/20/208 Sacramento State - Cook - CSc 8 - Summer CSS Syntax - Selector CSS Syntax Declaration List Each style starts with a selector This can be one of the classic tags i.e. <body>, <table> Periods are used to show how each style relates to containing object (we will cover these later) After the selector, different declarations are listed They are listed between two curly brackets This is similar to how blocks are written in the C Programming Language family 6/20/208 Sacramento State - Cook - CSc 8 - Summer 208 6/20/208 Sacramento State - Cook - CSc 8 - Summer CSS Syntax - Declarations CSS Syntax Each declarations lists an attribute and its value(s) A colon separates the attribute and the value(s) Whitespace is ignored so you don't have to use a new-line The selector can be an identifier, or single HTML element (body, div, etc) Multiple selectors are allowed, delimited by commas selector(s) { property: value; } 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

20 CSS Units Selectors on one line CSS supports a number of different sizing units Some popular units % percent em relative the current element px pixels pt points in inch cm centimeters body { background-color: black; } a { color: yellow; } 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Selectors using multiple lines Alternative curly bracket format body { background-color: black; } body { background-color: black; } a { color: yellow; } a { } color: yellow; 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Example using h Example using h In the example below, the H tag has its style changed for its background and border This will affect all H tags The "color" attribute sets the text color The "font-size" attribute sets the size h {color: blue, font-size: 36pt} h {color: blue, font-size: 36pt} 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

21 h Example h no styles <h>universities</h> <h2>california</h2> <h3>sacramento State</h3> Universities California Sacramento State 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer h using the style Grouping Elements Universities California Sacramento State If you want several selectors to have the same style, you can list their names before the curly bracket This is not necessary but it does cut down on code 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Grouping Elements The follow declaration assigns the font-family (the "font face in old HTML" to Arial This can same time buy reducing code CSS Box Declarations h, h2, h3, h4, h5, h6 { font-family: "Arial"; } The universal attributes 6/20/208 Sacramento State - Cook - CSc 8 - Summer

22 CSS Box Declarations Box Margin Declarations Every object is a "box" So, there a number of attributes that can be applied to each margin-bottom margin-left margin-right margin-top margin (shorthand notation) 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Box Border Declarations Box Padding Declarations border-style border-color border-width border (shorthand notation) padding-bottom padding-left padding-right padding-top padding (shorthand notation) 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Box Background Declarations Box Size and Position background-color background-image background-position background-repeat height commonly used width commonly used top left right bottom 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

23 CSS Text Attributes CSS Text Declarations CSS has special declarations that apply to text Not all boxes have text (e.g. images) But, practically all do Making text look readable 6/20/208 Sacramento State - Cook - CSc 8 - Summer Text Font Declarations Text Appearance Declarations font-family font-weight font-style font-size text-indent text-align text-decoration text-transform 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Text Sentence Declarations letter-spacing word-spacing white-space Using CSS How to add it your document 6/20/208 Sacramento State - Cook - CSc 8 - Summer

24 Using CSS Inline Styles There are three different ways to incorporate CSS into an HTML document Each suites a special need inline internal external All 3 can be used Uses the "style" attribute of a HTML tag The value of the "style" attribute contains declarations (no name or curly brackets) Only applies to that single instance of a HTML element 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Example Inline Selector Example Inline Selector The following example uses the style attribute on the <h> tag It contains a CSS declaration to set the background color to blue The background of the "box" is displayed in blue The font and color the text can also be overriden <hl style="background-color:blue"> Style Sheets are incredible </h> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Internal Styles Internal Styles A complete style definition is included inside the document Applies to a single document Tags use the selector (style name) using the "class" attribute Stored in the in the head section between the <style> and </style> Sometimes included in a comment for those ancient browsers <style type="text/css">... </style> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

25 Example Internal Style External Styles <style type="text/css"> h { Applies to all h tags } background-color: blue; </style> Similar to the internal approach except it saved to an external.css file A single file can style an entire web site There is no <style> </style> tags in the file 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer External Styles When to use External CSS Webpage links to file using the <link> tag It is stored in the document's head <link rel="stylesheet" href="file.css"/> External CSS is ideal if styles need to be applied to multiple pages The styles in a single file can update the appearance of a entire website! Style sheet link can be changed to customize an appearance e.g. the "themes" in g-mail 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Comments CSS Comments Write about your CSS you might need it In computer science, a comment is text put into a document that does not affect the content They are designed for the read of the document to understand the content 6/20/208 Sacramento State - Cook - CSc 8 - Summer

26 CSS Comments Example They are vital to maintaining any complex program A CSS comment starts with "/*" and end with "*/" NOTE: CSS comments are different from HTML comments The comment below tells the reader that the h font-size must be larger h2 You will appreciate these more later /* Keep the font larger than h2 */ h {color: blue, font-size: 36pt} 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The Cascade CSS The Cascade Onions have layers Ogre's have layers CSS has layers The "cascade" feature gives CSS its flexibility It is a combination styles that are conceptionally layered on top of each other Each higher level can override the style "below" it 6/20/208 Sacramento State - Cook - CSc 8 - Summer The Cascade Inheritance Each layer has a priority Styles with higher priorities override lower priorities Priorities (from low to high). browser s default styles 2. external 3. embedded 4. inline Styles inherits from parent styles (lower priority) This reduces the amount of declarations needed and makes it easy to modify layers How it works: if a property (any property) of a selector is not declared, the browser will look at the parent if it not found, it will look at that style's parent so, it bubbles down to the default style 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

27 User Styles Oh, yes you can! User Styles There is an inherit problem with overriding tag styles Often, you want to use the same tag, but with different styles e.g. tables, text, etc 6/20/208 Sacramento State - Cook - CSc 8 - Summer User Styles User Styles CSS allows custom styles that are not linked to any tag These are called "classes" Different tags can use the same style and tags (of the same type) can use different styles User-defined styles start with a period This prevents them from being interpreted as tags You can use them however you want in your document 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer The Class Selector Using Custom Styles Period.intro { } font: 6px arial, sans-serif; margin: 0px; In HTML 4, each tag now has and attribute to specify the name of the class it will use Assign this attribute to custom style you want without the period 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer

28 Note the Difference! The Class Selector "style" attribute allows you to use inline style declarations e.g. "color: white;" "class" defines the name of a style there are no declarations No Period <p class="intro"> The Three Forbidden Curses </p> 6/20/208 Sacramento State - Cook - CSc 8 - Summer /20/208 Sacramento State - Cook - CSc 8 - Summer Recommendations Use classes rather than redefining tags it makes your site more manageable If you have multiple pages, use an external.css file Use indentation on your HTML 6/20/208 Sacramento State - Cook - CSc 8 - Summer