729G26 Interaction Programming. Lecture 2 Jody Foo,

Size: px

Start display at page:

Download "729G26 Interaction Programming. Lecture 2 Jody Foo,"

Annabel Jordan
5 years ago
Views:

1 729G26 Interaction Programming Lecture 2 Jody Foo, jody.foo@liu.se

2 Lecture overview CSS syntax: selectors, properties and values CSS: borders and colors Using classes and id:s CSS Box model and layout using CSS display models positioning floats Introduction to RWD (Responsive Web Design) Typography

3 CSS

4 CSS (Cascading Style Sheets) CSS specifies 1.visual style 2.layout HTML elements inherit CSS properties from their ancestors e.g. the value of the font-family property for the body element is inherited by the p element.

5 Aspects of style colors and borders, e.g. background color/image borders around elements typography, e.g. font, font size line height size of elements

6 Aspects of layout Interaction between elements (e.g. what happens when two elements want to use the same space) Size of elements Positioning of elements

7 The style sheet Plain text file A collection of style specifications A HTML document can link to one or more stylesheets Style specifications are evaluated in serial from the top. Later specifications can overrule previous specifications.

8 Syntax declaration selector block declaration p { color:red; font-size:16px; } property value

9 Syntax /* This is a comment */ body { font-family: Times, Serif; font-size: 16px; padding: 0px 0px 0px 0px; } h1 { font-family: Helvetica, Sans-Serif; font-size: 32px; }

10 Some CSS length units Reference: px em rem pt length pixels on screen note: a CSS pixel is not the same as a screen pixel see 1em = inherited font-size, 2em = double inherited font-size 1rem = font-size of root element point, 1pt = 1/72 inch

11 Some CSS length units % percent of inherited size vw 1vw = 1% of width of the viewport's initial containing block (i.e. the <html> block in most cases) vh 1vh = 1% of height of the viewport's initial containing block (i.e. the <html> block in most cases) vmin 1vmin = 1% of the smallest viewport unit, either vh or vw vmax 1vmax = 1% of the largest viewport unit, either vh or vw

12 HTML + CSS Text files CSS can be written in the same file, but we will use an external file. Link HTML and CSS using the link tag in the header

13 page.html & style.css <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>a document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>the Heading</h1> <p>the paragraph</p> <body> </html> body { font-family: Times, Serif; font-size: 16px; padding: 0px 0px 0px 0px; } h1 { font-family: Helvetica, Sans-Serif; font-size: 32px; }

14 Filepaths in HTML and CSS Unless otherwise specified, all filepaths are relative to the current file. / means the root of the web site, i.e. for the root is means go up one directory

15 Examples of properties

16 Some style properties HTML elements font-size: size of font font-family: name of font line-height: height of linne width: width of element height: height of element margin: distance to next element padding: distance to element content color: font color background-color: background color of element border: border style of element

17 Basic CSS

18 A selection of selectors

19 Selecting your selector Targeting a group of elements "select all paragraphs and list items" Targeting adjacent siblings "select all paragraphs that directly follow a heading" Targeting descendants "select any image that is inside a <article>" Targeting children "select all first level list items in unordered lists with the class 'toc'"

20 Select a group of elements /* Target all h1, h2 and h3 element */ h1, h2, h3 { border: 2px solid #000; }

21 Descendant combinator /* Select all li element that are nested within a nav element. */ nav li { color: #F00; }

22 Child combinator /* Target all p elements that are children of a div */ div > p { border: 2px solid #000; }

23 Adjacent sibling combinator /* Target all p elements that are on the same level as a h1 and follow a h1 */ h1 + p { font-weight: bold; }

24 Pseudo selectors :hover Select elements that the mouse is hovering above e.g. a:hover :visited Select elements (i.e. links) that have been visited e.g. a:visited

25 Classes and id:s

26 What is a class? When should I use it? Elements can be assigned one or more classes More than one element can be assigned the same class. Use classes for recurring components of your web page. The prefix. (dot) is used to in front of class names in CSS selectors. HTML start tag examples: <div class="box">, <div class="box green-bg"> CSS selector examples:.box, div.box, div.box.green-bg, green-bg

27 Example of using multiple classes.wrapper { width: 960px; }.green-bg { background-color: green; }.yellow-bg { background-color: yellow; } <div class="wrapper"> <div class="green-bg box">box 1</div> <div class="green-yellow box">box 2</div> <div class="box blue-fg">box 3</div>  <div class="green-bg yellow-bg box">box 4</div> </div>.blue-fg { color: blue; }.box { border: 1px solid purple; width: 100px; height: 100px; }

28 Multiple classes

29 What is an id? When should I use it? Elements can be assigned an id An id can only be assigned to a single element in a HTML document. Use ids for unique elements on your page that you want to target for a specific style. The prefix # (octothorpe, hash sign, pound sign) is used in front of id:s in CSS selectors. HTML start tag examples: <div id="footer">, <h1 id="main-heading"> CSS selector examples: #footer, div#footer, h1#main-heading, #main-heading

30 Selectors using classes and ids.infobox { font-family: Helvetica, Arial, Sans-Serif; font-size: 0.9em; background-color: #999; color: #000; border: 2px solid black; } #menu { background-color: #000; color: #FFF; }

31 Colors and borders

32 Specifying color: RGB Red, Green, Blue - Additive color model Values from (decimal) or 0-F or 00-FF (hex) Black rgb(0, 0, 0) or #000 or # White rgb(255, 255, 255) or #FFF or #FFFFFF Purple rgb(128, 0, 255) or #8000FF

33 Specifying color: named colors CSS Level 1: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua CSS Level 2 (Revision 1): + orange CSS Color Module Level 3: + aliceblue, antiquewhite, aquamarine, azure, beige, bisque, blanchedalmond, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan (synonym of aqua), darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, gainsboro, ghostwhite, gold, goldenrod, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, limegreen, linen, magenta, (synonym of fuchsia), mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, oldlace, olivedrab, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, thistle, tomato, turquoise, violet, wheat, whitesmoke, yellowgreen CSS Color Module Level 4: + rebeccapurple

34 Color Inspiration Adobe Color CC material design palette paletton

35 background-color, color h1 { color: #fff; background-color: #075488; }

36 CSS Borders Certain elements can have a border A border has the following properties: width style color

37 CSS Borders Shorthand declaration border: <width> <style> <color> Specific properties border-style, border-width, border-color border-top, border-right, border-bottom, border-left border-top-style, border-top-color etc

38 The CSS Box & Layout Model

39 Layout models in CSS Normal flow + positioning display: block inline inline-block Flexbox display: flex Grid layout display: grid Floats float: left right Table layout Multiple-column layout

40 What should you use/learn? In CSS each element exists inside a layout context provides a layout context for the elements in contains Even though you create a layout using flex or grid, the contents of your flex/grid will have a normal flow. Therefore, master normal flow + positioning + floats before learning flex/grid etc. Flexbox and grid layout can be very useful but cannot solve everything. OOP analogy: OOP structures non-oop code. But you do not need OOP to program.

41 Normal flow Elements can be set to be displayed in different contexts. Contexts for normal flow: block inline inline-block The inline context is in line with text with the generic inline element being <span> The block context is outside text with the generic block element being <div>. A block element occupies an area from left to right. Ths inline-block context is a block in line with text.

42 The display property /* The formatting context is set using the display property */.infobox { display: block; }.question { display: inline; }

43 The CSS box model (block context)

44 Specifying an elements padding padding: <north>, <east>, <south>, <west> padding-top: <value>; padding-right: <value>; padding-bottom: <value>; padding-left: <value>;

45 Specifying an elements margin margin: <north>, <east>, <south>, <west> margin-top: <value>; margin-right: <value>; margin-bottom: <value>; margin-left: <value>;

46 Positioning

47 Four Five positioning models position: static position: relative position: fixed position: absolute position: sticky z-index: <number>

48 Layout using positioning Blocks are statically positioned by default position: static Relative positioning adjusts the static position relatively position: relative; top: -20px; left: 20px;

49 Layout using positioning A block can be fixed to a position relative to the viewport position: fixed; bottom: 0px; right: 0px; Elements positions using absolute are positioned relative to the nearest positioned ancestor. position: absolute; top: -20px; left: 20px;

50 Layout using positioning Relatively positioned until scrolled to a threshold point position: sticky; top: 30px; left: 30px; "when the element reaches 30px from the top / 30px from the left, stick to that position"

51 Floats

52 Floats Intended use: floating images in text (i.e. text wraps around image) Actual use: all sorts of layout stuff Syntax: float: left right What happens? Floated element gets taken out from the static/normal layout context and "floats" inside its containing block. Note:

53 The clearfix hack Needed when using floats for layout purposes and we want to prevent additional elements to flow around the floated elements. Property: clear Values: left right both

54 Layout sandbox

55 Responsive design

56 Responsive design Respond to the display used to render a HTML document high resolution desktop tablet smartphone etc

57 Responsive design A design can respond by e.g. altering sizes of images adjusting column widths adjusting number of columns used placement of navigation etc

58 Very quick RWD howto Set device viewport i.e. ask the browser how many pixels (DIPs, Device-Independant-Pixels) wide its display is <meta name="viewport" content="width=device-width,initial-scale=1"> Use media-queries to add conditions to your CSS (two options): 1. link to stylesheet with media-query <link rel="stylesheet" media="screen and (min-width:500px)" href="small.css"> 2. embed in CSS in screen and (min-width: 500px) { /* your small CSS here */ } Decide break points, i.e. at which points do layout changes occur. Tip: go from small to large. Remember CSS is read sequentially! Note: min-width/max-width is width of browser window, min-device-width/maxdevice-width is width of screen on device.

59 Some resources Responsive Web Design What It Is And How To Use It Responsive Web Design Basics Responsive Design Is... Responsive design

60 Typography

61 font-family and font-size /* Use a CSS selector to delimit the scope of the declarations */ p { } font-family: "Comic Sans"; font-size: 48pt

62 font-weight and font-style Use font-weight to set how thick a font's lines should be, e.g. font-weight: bold; font-weight: 900; Use font-style to set a font s style to normal, italic or oblique italic is a cursive style of a font oblique is a slanting style of a font

63 The font stack /* Use a font stack to specify font family preference in descending order. */ p { } font-family: Helvetica, Arial, Sans-Serif; font-size: 42pt;

64 Some further reading CSS Font stacks

65 More CSS

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties