4_cssbasics_COMP3322B_s2019.pdf - COMP 3322B Modern Technologies on World Wide Web 2nd semester 2018-2019 CSS Basics(O2 Dr C Wu Department of Computer

4_cssbasics_COMP3322B_s2019.pdf - COMP 3322B Modern...

This preview shows page 1 out of 40 pages.

You've reached the end of your free preview.

Want to read all 40 pages?

Unformatted text preview: COMP 3322B Modern Technologies on World Wide Web 2nd semester 2018-2019 CSS Basics (O2) Dr. C Wu Department of Computer Science The University of Hong Kong Tutorial%3% Cascading Style Sheet (CSS) Cascading%Style%Sheet%(CSS)% Section%1.%Introduction%% CSS defines how to display HTML elements " HTML"was"intended"to"define"the"content"of"a"document."For%presentation,%we% use%Cascading%Style%Sheet%(CSS)."CSS"defines"how"to"display"HTML"elements."In"HTML" Three levels of style sheets, from the lowest level to the highest 4.0,"all"formatting"could"be"removed"from"the"HTML"document,"and"stored"in"a"separate" CSS"file."All"browsers"support"CSS"today." level inline: as an attribute of an HTML tag, applying to this single HTML 1.1 Three%ways%of%specifying%the%styling%rules% element 1. Inline%–"Located"as"an"attribute"of"an"HTML"tag,"apply"to"the"content"of"a" single"HTML"element." <p style = " color : red; "> CSS%in% The words here should be red in color. HTML%tag% </p>" Browser% The words here should be red in color. Display% 2. Document"–"Located"inside"the"<head></head>"block."Apply"to"the"whole" body"of"the"document." *Note:"Comments"for"CSS"are"in"the"format"/*"comments"*/","but"NOT"<!OO comment"OO>" % <head> <style type = "text/css"> /* CSS Rule lists that apply in the whole body of the The words here should be red in color. 1. Inline%–"Located"as"an"attribute"of"an"HTML"tag,"apply"to"the"content"of"a" HTML%tag% </p>" single"HTML"element." Browser% <p Thestyle words=here should:bered; red in " color ">color. CSS%in% Display% The words here should be red in color. HTML%tag% </p>" 2. Document"–"Located"inside"the"<head></head>"block."Apply"to"the"whole" Browser% The words here should be red in color. body"of"the"document." Display% located inside the <head></head> block, applying to the document: *Note:"Comments"for"CSS"are"in"the"format"/*"comments"*/","but"NOT"<!OO entire body of the document 2. Document"–"Located"inside"the"<head></head>"block."Apply"to"the"whole" comment"OO>" body"of"the"document." <head> % <style type = "text/css"> *Note:"Comments"for"CSS"are"in"the"format"/*"comments"*/","but"NOT"<!OO /* CSS Rule lists that apply in the whole body of the comment"OO>" Cascading Style Sheet (CSS) % document */ <head> </style> <style type = "text/css"> </head> % /* CSS Rule lists that apply in the whole body of the document */ 3. External"–"Located"in"a"separate"document"(e.g.,"“style.css”),"can"apply"to"the" </style> bodies"of"any"number"of"documents." </head>% external: located in a separate document; can apply to any HTML <head> 3. document External"–"Located"in"a"separate"document"(e.g.,"“style.css”),"can"apply"to"the" <link rel="stylesheet" type="text/css" href="style.css"> </head> " bodies"of"any"number"of"documents." <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>" Let%us%focus%on%external%style%sheet%in%this%tutorial!% % Let%us%focus%on%external%style%sheet%in%this%tutorial!% 1.2 How%to%specify%styling%rules?% % " External style sheets How to specify styling rules: selector {property: value; property: value; ...} selector1, selector 2 {property: value; property: value; ...} there can be more than one selector for the same set of rules, e.g. Element selector selector {property: value; property: value; ...} Element selector: specifying a tag as the selector The styling properties specified in { } are applied to all elements Section%2.%Selector% within the pair of tags, e.g. 2.1.%Tag%selector% body { CSS% }% font-size : 12pt; color : red; background-color : yellow; <body> HTML% Browser% Display% This is affected. <p>This paragraph is also affected!</p> </body> This is affected. This paragraph is also affected! From"the"above"example"we"learn"that"using"“body”"as"the"Selector,"the%styling% we can further specify styling rules for tag <p>; then the rules for properties%specified%inside%the%“body”%CSS%rule%will%apply%to%ALL%elements%within%the% <p> will override those more general ones for <body> <body></body>%tag,%including%all%the%tags%inside"(i.e.,"the"tag"<p></p>"in"the"example)." <body> ElementHTML% selector (cont’d) This is affected. <p>This paragraph is also affected!</p> </body> Browser% This is affected. This paragraph is also affected! Display% selector {property: value; property: value; ...} From"the"above"example"we"learn"that"using"“body”"as"the"Selector,"the%styling% properties%specified%inside%the%“body”%CSS%rule%will%apply%to%ALL%elements%within%the% <body></body>%tag,%including%all%the%tags%inside"(i.e.,"the"tag"<p></p>"in"the"example)." " Note"that"we"can"further"specify"CSS"rule"w.r.t."<p>,"in"this"case,"the"more" styling rules can be specified for any html tags, e.g. specific"“p”"CSS"rule"will"override"the"more"general"“body”"rule.% h1 { CSS% }% HTML% Browser% Display% font-family : arial, verdana, Helvetica; font-size : 24pt; font-weight : bold; font-align : center; color : red; <h1>This heading h1 is affected.</h1> <h2>This heading h2 is NOT affected.</h2> This heading h1 is affected. This heading h2 is NOT affected. Similarly,"styles"can"be"set"to"ALL"other"HTML"tags,"such"as"<h2>..<h6>,"<p>,"<ol>," <ul>,"<li>,"<table>,"<tr>,"<td>"…etc."" Note"that"using"“*%{%%…%%}”"in"CSS"means"the"universal%selector,"that"style"applies" on"all"tags"and"elements"in"the"document."You%should%keep%in%mind%that%general%rules% Universal selector selector {property: value; property: value; ...} Universal selector: *{ } rules defined apply to all tags and elements; but more specific rules will override such general rules How"to"set"different"styles"for"multiple"occurrence"of"the"same"HTML"tag?"" For"example,"you"do"not"want"all"the"paragraph"content"(i.e.,"<p></p>)"to"have" the"same"style."There"are"two"ways"to"specify"specific"styles"for"particular"element:" " How to setMethod%A.%ID%selector%”#”"O"The"ID"selector"is"used"to"specify"a"style"for"a"single," different styles for different occurrences of the same HTML tag? unique"element."Note:%the%syntax%of%specifying%an%ID%selector%is%using%“#”%as%prefix%in% the%Selector,%and%using%the%ID%in%HTML%is:%id%=%”selector_name”.%"(IMPORTANT:"Do"not" use ID selector “#”, to specify a style for a single, unique element st use"an"integer"as"the"1 "character"of"the"name"of"the"ID"selector)" ID selector CSS% HTML% Browser% Display% #selector_name_1 { color : blue; font-size : 12pt; font-style : italic; } #selector_name_2 { color : green; font-size : 20pt; text-decoration : underline; } <p id="selector_name_1"> The first paragraph. </p> <p id="selector_name_2"> The second paragraph. </p> The first paragraph. The second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" st character Do not use an integer as the 1 group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% Browser% Display% </p> The first paragraph. Class selectorThe second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" How to set the same styles for a group of (different) elements? group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" use class selector “.”, to specify a style for a group of elements the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% Browser% Display% .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> This is the header. </h1> <p class="selector_name"> This is the paragraph. </p> This is the header. This is the paragraph. IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" Q: Why the browser display for the heading <h1> and the paragraph <p> are different heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" (heading is bold)? browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" A: selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" This is because the browser has default style for headings (i.e., font-weight: bold). Since the CSS class selector does not specify the styling property for “font-weight”, it is default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." assumed to be the default value, which is bold for <h1>, and normal (not bold) for <p>. 3" <p id="selector_name_2"> The second paragraph. </p> The first paragraph. Class selector (cont’d) Browser% Display% The second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" use element.selector_name, to specify a style for group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% specific HTML elements in the class prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." p.selector_name{ CSS% HTML% color : blue; font-size : 12pt; } <h1 class = "selector_name"> This is the header. </h1> <p class="selector_name"> This is the paragraph. </p> This is the header. Browser% Browser Display% This is the paragraph. Display IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." The second paragraph. </p> The first paragraph. Descendant selector Browser% Display% The second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" use descendant selector to specify a style for group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% descendant elements of a specific HTML element prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% Browser% Display% Browser .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> This is the header. </h1> <p class="selector_name"> This is the paragraph. </p> This is the header. This is the paragraph. Display IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" See more about child selector “>”, adjacent sibling selector “+” and general sibling selector “~” selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" at default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." Browser% Display% The first paragraph. The second paragraph. Combined usage of selectors Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" Example the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% Browser% Display% .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> This is the header. </h1> <p class="selector_name"> This is the paragraph. </p> This is the header. This is the paragraph. IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" Browser heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" Display browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." HTML% </p> <p id="selector_name_2"> The second paragraph. </p> The first paragraph. Attribute selectors Browser% Display% The second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" use element[attribute], to specify a style for the HTML group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% element with the specific attribute prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% Browser% Browser Display% Display .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> <a href="h?p:// homepage</a><br> This is the header. <a href="h?p:// ; target="_blank">Apple homepage</ </h1> <p class="selector_name"> a><br> This is the paragraph. <a href="h?p:// ; target="_top">Google homepage</a> </p> This is the header. This is the paragraph. IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." 3" <p id="selector_name_2"> The second paragraph. </p> The first paragraph. Attribute selectors (cont’d) Browser% Display% The second paragraph. Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" use element[attribute=value], to specify a style for the group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% HTML element with the specific attribute and value prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> <a href="h?p:// homepage</a><br> This is the header. <a href="h?p:// ; target="_blank">Apple homepage</ </h1> <p class="selector_name"> a><br> This is the paragraph. <a href="h?p:// ; target="_top">Google homepage</a> </p> This is the header. Browser% Browser Display% This is the paragraph. Display IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." Pseudo-class A pseudo-class is used to define a special state of an element selector:pseudo-class{property: value; property: value; ...} e.g., to style an element when the mouse is over it e.g., to style visited and unvisited links differently Browser% Display% The first paragraph. The(cont’d) second paragraph. Pseudo-class Method%B.%Class%selector%“.”"O"The"class"selector"is"used"to"specify"a"style"for"a" group"of"elements."Note:%the%syntax%of%specifying%a%Class%selector%in%CSS%is%using%“.”%as% Combined with classes prefix%in%the%Selector,%and%using%the%class%in%HTML%is:%class=”selector_name”.%Unlike" the"id"selector,"the"class"selector"is"most"often"used"on"several"elements." CSS% HTML% Browser% Display% .selector_name{ color : blue; font-size : 12pt; } <h1 class = "selector_name"> <a class="highlight" href="a.html">A link to be highlighted when This is the header. </h1> mouse is over</a><br> <p class="selector_name"> <a href="b.html">A link not to be highlighted when mouse is over</a> This is the paragraph. </p> This is the header. This is the paragraph. IMPORTANT%CONCEPT:"You"may"wonder"why"the"browser"display"for"the" heading"<h1>"and"the"paragraph"<p>"are"different"(heading"is"bold)."This"is"because"the" browser"has"default"style"for"headings"(i.e.,"fontPweight:%bold)."Since"the"CSS"class" The complete list of pseudo-classes: selector"does"not"specify"the"styling"property"for"“fontOweight”,"it"is"assumed"to"be"the" default"value,"which"is"bold%for%<h1>,"and"normal%(not%bold)%for%<p>." Section%3%–%Properties%% Section%3%–%Properties%% Font and text properties 3.1%Font%and%Text%Properties% 3.1%Font%and%Text%Properties% Property% Property% Values% Values% font-family font-family Arial, Helvetica, Times Arial, Helvetica, Times font-size font-size font-style font-style 10pt / 10px / 10in 10pt / 10px / 10in normal / italic normal / italic font-weight font-weight normal/ bold normal/ bold line-through line-through / / overline / overline / underline underline /none left / center / right left / center / right Any color Any color Any color Any color text-decoration text-decoration text-align text-align background background color color example: " " CSS% CSS% Explanations% Explanations% The"first"priority"of"font"to"use"is" The"first"priority"of"font"to"use"is" “Arial”,"if"“Arial”"is"not"available,"use" “Arial”,"if"“Arial”"is"not"available,"use" “Helvetia”"instead."If"“Helvetia”"is"not" “Helvetica” “Helvetica” “Helvetia”"instead."If"“Helvetia”"is"not" available,"use"“Times”"instead." available,"use"“Times”"instead. Specify"the"size"of"the"font"" Specify"the"size"of"the"font Normal"or"Italic" " Normal"or"Italic Normal"weight"or"bold"" Normal"weight"or"bold LineOthrough,"or" overline overline ","or" ","or" LineOthrough,"or" underline.", "or normal text underline. Alignment"of"text." " Alignment"of"text. Background"color"of"the"text" Background"color"of"the"text" Color"of"the"text" Color"of"the"text" #important{ #important{ font-family : Arial, Helvetica, Times; font-family Arial, Helvetica, Times; font-size :: 10pt; font-size : 10pt; font-style : italic; font-style : italic; font-weight : bold; font-weight : bold; text-decoration : line-through; text-decoration color : white; : line-through; color : white; : red; background background : red; } } <p id="important"> This is an important paragraph. <p id="important"> </p>This is an important paragraph. </p> HTML% HTML% Browser% This is an important paragraph. Display% Browser% This is an important paragraph. Display% . . List properties 3.2%List%Properties% The"following"properties"can"apply"on"<ul>"<ol>,"and"even"for"each"particular"list" 3.2%List%Properties% item"<li>" Properties on <ul> The"following"properties"can"apply"on"<ul>"<ol>,"and"even"for"each"particular"list" Values% Explanations% item"<li>"Property% None No"bullets" Disc • Point " Explanations% Property% Values% List-style-type Square Point None No"bullets" Circle o Point Disc • Point " List-style-type The"bullet"will"be"the"image"specified"in" Square Point list-style-image url('image.gif') image.gif. Circle o Point % The"bullet"will"be"the"image"specified"in" list-style-image url('image.gif') image.gif. Properties on <ol> Property% Values% Explanations% % Property% List-style-type List-style-type " none decimal Values% upper-alpha none lower-alpha decimal upper-roman upper-alpha lower-roman lower-alpha upper-roman No"values" Arabic"numerals":"1,2,3,4" Explanations% Uppercase"letters:"A,B,C,D" No"values" Lowercase"letters:"a,b,c,d" Arabic"numerals":"1,2,3,4" Uppercase"Roman"numerals:"I,II,III,IV" Uppercase"letters:"A,B,C,D" Lowercase"Roman"numerals:"i,ii,iii,iv" Lowercase"letters:"a,b,c,d" Uppercase"Roman"numerals:"I,II,III,IV" Lowercase"Roman"numerals:"i,ii,iii,iv" lower-roman .a {list-style-type:circle;} .b {list-style-type:square;} " .image{ list-style-image: url('star.gif'); } CSS% .a .c {list-style-type:circle;} {list-style-type:upper-roman;} they can apply on single list entry <li> too .b .d{list-style-type:square;} {list-style-type:lower-alpha;} .image{ list-style-image: url('star.gif'); } CSS% HTML .c {list-style-type:upper-roman;} <ul class="image"> " Browser%Display List-style-type List properties example upper-alpha Uppercase"letters...
View Full Document

  • Fall '13
  • Dr. C. Wu
  • Computer Science, Cascading Style Sheets, Helvetica, HTML element

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture