Tips from Bryan. (past student)

Transcription

1 Tips from Bryan (past student)

2 2

3 3

4 4

5 5

6 6

7 7

8 8

9 Questions/Tips/ Thoughts/Concerns? Students suggest An easier midterm? Nice idea, but not a valid solution; e.g. makes it harder to survive in your future upper-level courses Let s try Bryan s tips first!

10 What s an element? Give me an example.

11 Pseudo

12 Pseudo-elements Pseudo : not actual, unreal Pseudo-element: not actual element but behaves like one Usage: style specific parts of an element Ones you may find most useful: :first-letter :first-line :before :after 12

13 Pseudo-elements Style the first letter, first line of an element p:first-letter{ color: green; font-size: xx-large; 13

14 Pseudo-elements Style the first letter, first line of an element p:first-letter{ color: green; font-size: xx-large p:first-line{ color: blue; font-variant: small-caps; 14

15 Pseudo-elements Insert additional content before or after an element :after :before blockquote:after { content: "--L.T."; 15

16 Summary Pseudo element Pseudo class

17 Pseudo class 17

18 Pseudo-classes Pseudo-class: not actual class but behaves like one E.g. :first-child :last-child first child of an element last child of an element <div> <div id="d1">123456</div> <div id="d2">abc </div> <div id="d3">abcdef</div> </div> div div:first-child{ color: red; 18 #d1 #d2 #d3 color:red;

19 :last-child <div> <div id="d1"> <em id="e1">a</em> <em id="e2">b</em> </div> <div id="d2"> </div> <div id="d3"> <em id="e3">c</em> <em id="e4">d</em> </div> </div> em:last-child{ color: red; div Select all <em> tags that are last-child Browser window: a b c d div #d1 #d2 div #d3 #e1 #e2 #e3 #e4 19

20 :last-child <div> <div id="d1"> <em id="e1">a</em> <em id="e2">b</em> </div> <div id="d2"> </div> <div id="d3"> <em id="e3">c</em> <em id="e4">d</em> </div> </div> em:last-child{ color: red; div Colour only #e2 in red? div #d1 #d2 div #d3 #e1 #e2 #e3 #e4 20

21 :last-child Select all <em> tags in #d1 that are last-child em:last-child{ color: red; #d1 em:last-child{ color: red; div Color only #e2 in red? div #d1 #d2 div #d3 Browser window: a b c d #e1 #e2 #e3 #e4 21

22 More common pseudo-classes In anchor elements <a> :link unvisited link :visited visited link :active mouse clicked on link :hover mouse hover on link Called pseudo-classes, but think of them as states i.e. depends on users actions, rendered dynamically by user s browser 22

23 More common pseudo-classes Simple (good) way to add interaction with user a { text-decoration: none; color: #86759A; a:link { font-weight: bold; a:visited { font-weight: normal; a:hover, a:focus, a:active { text-decoration: underline; /*Try on your own: text-decoration: overline; */ 23 Demo

24 Notes on anchor-based pseudo-classes a:hover should come after a:link and a:visited a:active should come after a:hover Know why? Can join: a:visited:hover The state of order determines the order of CSS precedence 24

25 :hover, :active Works for any element E.g. lists, dividers, images, etc. If properly used, a good/cool way to interact with user <div id="nav"> <!-- subdivider#1 --> <ul> <li><a href="demo.html" title="home page">home</a></li> <li><a href="demo.html" title="about me" >About me</a></li> <li><a href="demo.html" title="my notes">my course notes</a></li> <li><a href="demo.html" title="contact">contact</a></li> </ul> </div> Demo 25

26 CSS: final notes (Oct. 22 nd 2015) Oct. 31 st 2017

27 CSS Highlights CSS selectors Class vs. id Contextual selectors Immediate child (>) Next child (+) Class and pseudo-class Q: what are pseudo-class really? State: has history Elements and pseudo-elements CSS inheritance and specificity Inheritance: cascade to next level if not specified Specificity: more specific selectors overrides less specific ones 27

28 Summary of CSS selectors Ancestor-descendent: selector1 selector2 selectorm { property: value; Immediate child: selector1 > selector2 > selectorn { property: value; Siblings: selector1 + selector2 + selectorp { property: value; Pseudo-element: selector:pseudo_element { property: value; Pseudo-class: selector:pseudo_class { property: value; Specificity: same as element In CSS3, distinction between 2 is made via: selector::pseudo_element { property: value; Specificity: same as class 28

29 Overriding style rules: inline style specifications <h1 class="class_fantasy class_serif">hello!</h1>.class_serif { font-family: serif;.class_fantasy { font-family: fantasy; Placed in external style sheet or in the header Inline styling: use style as an attribute! <h1 style="font-family:sans-serif" class="class_fantasy class_serif" >Hello!</h1> Inline style overrides the other stylerules; use sparingly! Recall 3 ways to specify styles: a) Inline style b) Style tag in <head></head> c) External stylesheet with <link>

30 Yet another way to override specificity of a declaration.class_serif { font-family: serif;.class_fantasy { font-family: fantasy;!important.class_serif { font-family: serif!important;.class_fantasy { font-family: fantasy; <h1 class="class_fantasy class_serif">hello!</h1> Applies to individual declaration only.class_serif { font-family: serif!important; font-size: 12pt!important;.class_fantasy { font-family: fantasy!important; Order still matters! 30

31 Sources of style rules and their specificities Sources: 1. Author (you) 2. User agent (default settings given by browser) 3. User Provide his/her own stylesheet or none How-to in FireFox: Order of specificity (highest to least): 1. User!important declarations 2. Author!important declarations 3. Author normal declarations 4. User normal declarations 5. User agent a) Inline style b) Header style c) External stylesheet 31

32 User s own legibility stylesheet: an example html { background:#eef; body, html { body { b, strong { color:black!important; font-family: sans-serif; padding:2em; background: white!important; max-width:40em; line-height:1.1em; margin-left:auto; margin-right:auto; background-color:#eef; font-weight:normal; a:link { color: blue!important; a:active { color: red!important; a:visited { color: navy blue!important; Source: 32

33 Highlights of CSS CSS selectors Class vs. id Contextual selectors Immediate child (>) Next child (+) Class and pseudo-class And what are pseudo-class really? State: has history Elements and pseudo-elements CSS inheritance and specificity Inheritance: Cascade to next level if not specified Specificity: more specific selectors overrides less specific ones Multiple sources of CSS: Precedence Linking 33

34 Working with multiple stylesheets Advantages: To better suit the needs of specific audience User-friendly Encourage code-reuse Compact code More modular design Easier to maintain 34

35 Working with multiple stylesheets Linking external stylesheet(s) <head> <link rel="stylesheet" title="default" href="style.css" /> <title>my page</title> </head> <head> <link rel="stylesheet" title="default" href="style.css" /> <link rel="stylesheet" title="high contrast" href="style2.css" /> <title>my page</title> </head> Demo 35

36 f(x) Remember this notation??? x: an input variable f is a function that outputs another variable given an input e.g. f(x) = x 2 +1

37 CSS: functions Retrieve a resource via the url function url("screenshot.png"); body { background-image: url(" background-position: right; background-repeat: no-repeat; body { /* short-hand notation */ background: #fff url("class/lisa/img_2010.jpg") no-repeat right top; Demo 37

38 url() Accepted formats Notes:.bmp.gif.png.svg URIs.webp IE<9: doesn't support SVG for background-images, or multiple background images, or gradients IE6: doesn't support PNG transparency properly; result looks buggy and malformed Only Opera and Chrome support.webp Source: 38

39 Other uses: working with multiple stylesheets Encouraging modular development: Better organization, e.g. you may organize your files and folders like this: Apply multiple style sheets, e.g. images/ css/ common.css highlights.css mynotes.css /* Another way to link your CSS within a CSS url(common.css); /* continue the rest of the style rules definitions below */.important { color: red; 39

40 Directions Various ones exist CSS directive We ll just focus on the import directive: /* imported css url(common.css); /* define your style rules below */ url(common.css); </style> Q: And which one wins in terms of precedence? 40

41 Working with multiple stylesheets Linking external stylesheet(s) <head> <link rel="stylesheet" title="default" href="style.css" /> <title>my page</title> </head> <head> <link rel="stylesheet" title="default" href="style.css" /> <link rel="stylesheet" title="high contrast" href="style2.css" /> <title>my page</title> </head> Demo 41

42 Cool features of CSS3 Full-list:

43 CSS3: box-shadow blockquote.important { border: 1px solid black; padding: 10px; width: 500px; box-shadow: 12px 10px 8px rgb(255,0,255); 10px in vertical direction 43 12px in horizontal direction

44 CSS3: text-shadow h1 { color: #a5a; /* color x-offset y-offset smoothness */ text-shadow: gray.25em.25em.5em; 44

45 CSS3: Rounded borders Try on your own here 45

46 CSS3: Functions for visual effects E.g. <div id="box1"></div> <div id="box2"></div> #box1{ width: 50px; height: 50px; position: absolute; background-color: red; left: 100px; top: 10px; #box2{ transform: rotate(-45deg); width: 50px; height: 50px; position: absolute; background-color: orange; left: 100px; top: 30px; Demo 46

47 Miscellaneous items DTD Meta Character entities 47

48 DTD and <meta> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>conforming XHTML 1.0 Strict Template</title> </head> <body> <!-- put your content here --> </body> </html> 48

49 Document type declaration (DTD) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE> is not an HTML tag an instruction to the browser Tells it what version of HTML the page is written in In above, version is: XHTML 1.0 Strict 49

50 DTD and <meta> Document type declaration: case sensitive! First reference: must be exact The xmlns attribute refers to the name of the namespace <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Not required but always good to have <html xmlns=" <head> <title>conforming XHTML 1.0 Strict Template</title> <link href="mystyle.css" rel="stylesheet" type="text/css" /> <meta name="keywords" content="html, CSS, XHTML, Python" /> <meta name="description" content="my blog on HTML and CSS" /> <meta name="author" content="mr. FirstName LastName" /> </head> <body> </body> </html> <!-- put your content here --> 50

51 Valid XHTM 1.0 Strict Document type declaration: case sensitive! First reference: must be exact The xmlns attribute refers to the name of the namespace <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Not required but always good to have <html xmlns=" <head> </head> <body> </body> </html> <title>conforming XHTML 1.0 Strict Template</title> <link href="mystyle.css" rel="stylesheet" type="text/css" /> <meta name="keywords" content="html, CSS, XHTML, Python" /> <meta name="description" content="my blog on HTML and CSS" /> <meta name="author" content="mr. FirstName LastName" /> <meta content="text/html; charset=utf-8" /> <!-- put your content here --> 51

52 HTML 5 Simplifies to: <!DOCTYPE html> <html> <head> Not required but always good to have <title>conforming HTML5 Template</title> <link href="mystyle.css" rel="stylesheet" type="text/css" /> <meta name="keywords" content="html, CSS, XHTML, Python" /> <meta name="description" content="my blog on HTML and CSS" /> <meta name="author" content="mr. FirstName LastName" /> </head> <body> </body> </html> <!-- put your content here --> 52