INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE

22 Outline CSS Next class More CSS

Introduction to CSS Created by Hakon Lie, who was working with Tim Berners-Lee in the early 1990s.Hakon Lie Hakon is now Chief Technology Officer for the Opera browser maker. CSS: Cascading Style Sheet HTML: specify structure and content of a web page CSS: for presentation, how to display HTML Elements 3

4 Introduction to CSS CSS is a declarative language,declarative language statements -> rules. Rules -> layout, positioning, fonts, and visuals such as colours and images. CSS are really text files, or text in an HTML file, that allow the use of specific styles, attributes, and positioning of HTML objects. CSS defines how HTML elements are to be displayed. Separates the layout from the content. Formatting could be removed from HTML doc, and stored in a separate CSS file. Control the style and layout of multiple web pages all at once External Style Sheets in CSS files can save a lot of work. All browsers support CSS today.

What can CSS do? Discussion…

6 Advantages Define the look of your pages in one place, and apply it throughout the whole site. Easily change the look of your pages even after they're created. Change style once. Pages will be loaded faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.

7 Where to place it CSS can be added to your pages at 3 different levels: (1)Create CSS styles that only works for a single tag (Inline). Single tag CSS is used when the style is used in a single place on the entire site. (2)Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page (Internal, embedded). (3)If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site (External).

8 Single Tags CSS for single tags by simply adding the following to the tags. style="styledefinition:styleattribute;" NOT me. You should limit your use of single tag CSS. losing much of the power associated with CSS. repeating same definition Difficult changing a certain style. Have to change it all over in your document, rather than in one place. Css.html

9 Single Pages CSS can be defined for entire pages by simply adding a style definition to the head section. Define once (in ), use many times through the page. Easily change the styles of the page, even after the entire page has been made. Since the styles are only defined in one place, the page size will be smaller, and thus faster to load. Css.html

10 Entire Sites CSS can be defined for entire sites - by simply writing the CSS definitions in a plain text file - that is referred to from each of the pages in the site. Define testCSS.css file Add the line to the of all your pages, then the one style definition will be in effect for your entire site. Flexibility to make changes to the layout even after the site is done. Guarantee that all pages are following the same style Css.html

CSS Syntax selector { property: value; property: value; /*.. CSS comment... */ }  Selector: HTML element to style.  Property: style attribute to change.  Each property has a value h1 {color: blue; font-size: 12px;} 11

12 Single TagsSingle pages/ Entire sites Selector p {property: value} Property p {color: value; text-align: value} Value p { color: rgb(102,153,0); text-align: center; } CSS Syntax

13 CSS how to - external style sheet (Entire site) Be used, when the style is applied to many pages. Place to the of the.html link: link.css file to.html rel: the relationship from.html to.css href:.css type: media type. ‘text/css’ for css media: specify the media to which the style sheet applies. By default, screen.

14 CSS how to- inline style Losing many of the advantages of style sheets by mixing content with presentation. The style attribute may be applied to any element within the section. CSS declarations are separated by a (;) semicolon. Not encouraged.

15 CSS how to – multiple style sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. e.g., external CSS: h3 { color:red; text-align:left; font-size:8pt; } e.g., Internal CSS: h3 { text-align:right; font-size:20pt; } Final results for h3: color:red; text-align:right; font-size:20pt;

16 Multiple Styles Will Cascade into One Styles can be specified: - inside an HTML element (inline) - inside the head section of an HTML page ( internal) - in an external CSS file (external) Cascading order (priority increasing order): - Browser default - External style sheet - Internal style sheet (in the head section) - Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML, the external style sheet will override the internal style sheet! Css.html

Basic CSS Selectors HTML tag Selectors Class Selectors Id Selectors Contextual Selectors Grouping Selectors 17

Tag Selectors html tag is a possible CSS selector Any html tag is a possible CSS selector. The selector is simply the tag that is linked to a particular style. p { text-indent: 20px; } E.g, p { text-indent: 20px; } 18

19 Class Selectors use a style on some tags in a document, but not all instances of the tag. a style for several tags in a document, without repeating the style rule. Do NOT start a class name with a number! This is only supported in Internet Explorer.

Class Selectors In p.blue { background-color: #0000ff; }.all_red { background-color: #ff0000; } Use class: using class p.blue using class.all_red 20

21 id Selectors similar to a class selector. give a name to a specific style without associating it with a tag or other HTML element id must have a unique value. The value must start with a # followed by letters (A--Z, a--z), digits (0--9) or hyphens (-). Do NOT start an id name with a number! It will not work in Mozilla/Firefox.

id Selectors #indent1 { text-indent: 10px; } Use id: hello world 22 Css_class_id.html

23 Differences between class & id ID: - Each element can have only one ID. - Each page can have only one element with that ID. Class: - You can use the same class on multiple elements. - You can use multiple classes on the same element. - one element can have more than one class, delimited by space: CSS does not care, JavaScript cares. Elements can have both:

Contextual Selectors  Indicate the context of a selector.  The context of a selector is determined by what its parent element is.  what the element is nested within or what precedes it in the document. – E.g., ol ul { font-size: 16px; }  Explanation: for any unordered list that is nested within an ordered list - change the font size to 16px. 24

Grouping Selectors  Group the selectors that share the same style in comma-separated list h1, h2, h3 h1, h2, h3 { font-family: Serif; color: blue;} 25

26 CSS how to - div The tag defines logical divisions, acting like a paragraph tag. The tag is a block-level element The tag can contain nearly any other tag The tag cannot be inside tags You can use the tag when you want to center or position a content block on the page.

27 Tips of Using tag div The tag is not a replacement tag. The tag is for paragraphs only, The tag defines more general divisions within a document. Don't replace tags with tags. It's always a good idea to close your tags as soon as you open them. Then place the contents within the element. If you nest your tags, be sure that you know where your content is going (in other words, which DIV it should be part of).

28 CSS how to - span Similar to the div element in function with one difference, span is an inline element - do not begin a new line. Can only contain other inline elements. The span element can be a selector and accept style, class and id attributes. The primary difference between the and tags is: – doesn't do any formatting of it's own. – includes a paragraph break, because it is defining a logical division in the document. – The tag simply tells the browser to apply the style rules to whatever is within the. Css.html

Summary 29 All in one example Css.html testCss.css

Next Class More CSS 30

Thank you!