CSS PDF

Cascading Style Sheets (CSS)  Copyright Contributor(s): ▪ Alexandrino Gonçalves ▪ Ana Nogueira ▪ João Real ▪ Michael Pinheiro ▪ Norberto Henriques ▪ André Restivo ▪ Eugénia Moreira Bernardino Revised on: 01/10/2018...

Cascading Style Sheets (CSS)  Copyright Contributor(s): ▪ Alexandrino Gonçalves ▪ Ana Nogueira ▪ João Real ▪ Michael Pinheiro ▪ Norberto Henriques ▪ André Restivo ▪ Eugénia Moreira Bernardino Revised on: 01/10/2018 2  Cascading Style Sheets (CSS) All visual layout of the HTML pages should be done using CSS. Advantages: – Separate the content from appearance; – More compact code; – Better control over the visual layout; – Define different layouts to different devices; – Update the visual appearance of several documents simultaneously. 3  CSS syntax A style sheet is a set of rules that indicates the client how to display HTML content. Which HTML Rule content will be selector { affected by this rule property:value; property:value; … } Feature to format Value of that feature 4  CSS examples Change all paragraphs text font to “Arial”: p{ font-family: Arial; } All HTML tags will be underlined and showed in red: h1{ text-decoration: underline; color: red; } CSS validator: http://jigsaw.w3.org/css-validator/ 5  Applying CSS There are 3 ways to apply CSS rules on a HTML document: 1. Inline: Using the style attribute on a HTML tag; 2. Internal: Using the tag; 3. External: With the tag to an external file. 6  Applying CSS The style attribute on a HTML tag: The CSS property(s) are placed directly in the HTML tag. Example This page will be showed with red background 7  Applying CSS Using the tag: All CSS rules defined for this particular document can be placed with the tag, normally in the document header. Example body { background-color: #FF0000; } This page will be showed with red background 8  Applying CSS The tag: The style sheet rules are placed in a external file (normally with “.css” extension). Several HTML documents can share the same style sheet. The same HTML document can include more than one tag. My document... 9  CSS units CSS offers a number of different units for expressing length: – Absolute units: px: pixel. Usually matches a screen dot; pt: point. Similar to px, but commonly used for print media (1pt = 1/72 size in mm or in); pc: pica. 1pc = 12pt; cm, mm, in (inch): standard length units – Relative units: %: percentage em: equal to current font size. By default has 1em = 12pt = 16px 10  CSS colours There are several ways to define colours with CSS: – Reserved words: gray, green, blue, red, lime, aqua silver,... – Hexadecimal numbering: #FFCC11 – rgb function: rgb(255,255,0) or rgb(100%,100%,0%) All the following represent the same colour: – green – #00FF00 – rgb(0,255,0) – rgb(0%,100%,0%) 11  CSS calc function The calc() function performs a calculation to be used as the property value. Syntax: calc(expression) – The result will be used as the value. The following operators can be used: + - * / Example: div{ width: calc(100% - 100px); } 12  CSS selectors Type selector Only the tag defined in the rule is affected. p{ opacity: 0.5; } Universal selector The universal selector matches the name of any tag. * { font-family: “Times New Roman”; } 13  CSS selectors Class selector Used to format layout on specific areas of the HTML page. The attribute “class” must be defined on the HTML file. HTML: Question 1 Answer 1 Question 2 Answer 2 CSS:.question { font-weight: bold; }.answer { font-style: italic; } or p.question { font-weight: bold; } p.answer {font-style: italic; } 14  CSS selectors Id selector Similar to the class selector. It is used to format a single tag, that has the “id” HTML attribute defined. This case- sensitive “id” attribute must be unique in the HTML document. HTML: My document Red title CSS: #heading_red { color: red; } or h1#heading_red { color: red; } 15  CSS selectors Descendant selector The properties are applied only when the tags are encapsulated. div p{ text-decoration: underline; } In this example, only paragraphs encapsulated in HTML tags are underlined. 16  CSS selectors Pseudo-classes selector Used to add effects over some selectors. selector:pseudo-class { property: value; } CSS classes can also be used with pseudo-classes: selector.class:pseudo-class { property : value; } 17  CSS selectors Anchor Pseudo-classes a:link {color: #FF0000; } a:visited {color: #00FF00; } a:hover {color: #FF00FF; } a:active {color: #0000FF; } a#desc_id:link { color: black; } a.desc_class:link { text-transform: lowercase; } 18  CSS selectors Form Pseudo-classes Selects form controls that have input focus: input:focus Other options: input:valid input:invalid input:required input:optional input:read-only input:read-write radio:checked 19  CSS Selectors Pseudo-classes Selector Example Example description :active a:active Selects the active link :checked input:checked Selects every checked element :disabled input:disabled Selects every disabled element :empty p:empty Selects every element that has no children :enabled input:enabled Selects every enabled element :focus input:focus Selects the element that has focus :hover a:hover Selects links on mouse over :in-range input:in-range Selects elements with a value within a specified range :invalid input:invalid Selects all elements with an invalid value :lang(language) p:lang(it) Selects every element with a lang attribute value starting with "it" :link a:link Selects all unvisited links :not(selector) :not(p) Selects every element that is not a element :optional input:optional Selects elements with no "required" attribute :out-of-range input:out-of-range Selects elements with a value outside a specified range :read-only input:read-only Selects elements with a "readonly" attribute specified :read-write input:read-write Selects elements with no "readonly" attribute :required input:required Selects elements with a "required" attribute specified :root root Selects the document's root element :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) :valid input:valid Selects all elements with a valid value :visited a:visited Selects all visited links 20  CSS selectors Pseudo-classes Selector Example Example description :first-child p:first-child Selects every elements that is the first child of its parent :first-of-type p:first-of-type Selects every element that is the first element of its parent :last-child p:last-child Selects every elements that is the last child of its parent :last-of-type p:last-of-type Selects every element that is the last element of its parent :nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent tr:nth-child(odd) Selects odd elements tr:nth-child(even) Selects even elements :nth-last-child(n) p:nth-last-child(2) Selects every element that is the second child of its parent, counting from the last child :nth-last-of-type(n) p:nth-last-of-type(2) Selects every element that is the second element of its parent, counting from the last child :nth-of-type(n) p:nth-of-type(2) Selects every element that is the second element of its parent :only-of-type p:only-of-type Selects every element that is the only element of its parent :only-child p:only-child Selects every element that is the only child of its parent 21  CSS selectors Pseudo-elements selector Used to style specified parts of an element Selector Example Example description ::after p::after Insert something after the content of each element ::before p::before Insert something before the content of each element ::first-letter p::first-letter Selects the first letter of each element ::first-line p::first-line Selects the first line of each element ::selection p::selection Selects the portion of an element that is selected by a user The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements. The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1. 22 For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.  CSS selector operators Operators: combine elements Pattern Meaning Pattern Meaning * Any element A[attr] A sets attribute attr A Element of type A A[attr=val] attr has exact val AB B descending from A A[attr~=val] attr contains val A>B B that is a child of A A[attr|=val] attr begins with val or A+B B immediately after A val followed by “-” A~B B preceded by A A.aclass A has class attribute set as “aclass” A:first-child First child of A A#theid A whose id is “theid” a:link Link not visited a:visited Link visited A:active Element A is activated A:hover Pointer hovers over A 23 A:focus A is focused  CSS grouping Grouping selectors Applying the same properties to several selectors simultaneously. h1, span.effect, p{ font-family: “Times New Roman”; } 24  CSS background body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } body { background-color: #FFCC66; background-image: url(“image.jpg”); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } 25  CSS fonts h1 { font-family: arial, verdana, sans-serif; font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 30px; } h2 { font-size: 12pt; } h3 { font-size: 120%; } h4 { font-size: 1em; } 26  CSS text p { text-indent: 30px; text-align: justify; text-decoration: underline; letter-spacing: 6px; text-transform: uppercase; } body{ margin: 10%; } h1 { margin-left: -6%; } 27  List Markers We can change the markers of both types of lists using the list-style-type property. Some possible values for unordered lists are: none, disc (default), circle and square. For ordered lists we can use: none, decimal (default), lower- alpha, lower-greek, lower-roman, upper-alpha and upper- roman. #menu ul { list-style-type: none }.article ol { list-style-type: lower-roman } div#menu ul{ list-style-image: url('diamond.gif'); } 28  Shorthand properties Several properties can be defined with a shortcut called “shorthand” Example: border property sets: – border-width – border-style (mandatory) border: 2px dashed blue; – border-color  Border shorthands Values order: clockwise 1 4 2 3 Border-width: 4px 2px 5px 3px;  Shorthands: number and order The values number and order is very important: 1 1 1 border-color: blue; 1 1 2 2 border-color: blue green; 1  Shorthands: number and order (cont) The values number and order is very important: 1 2 2 border-color: blue red green; 3 1 4 2 border-color: blue red green black; 3  CSS – Important concepts Cascading Style Sheets Where does cascading come from? – The HTML element properties are defined in a cascade, following this order: 1. Default browser style; 2. Style(s) defined on an external CSS file: - external CSS file linked with the tag; 3. Style(s) defined on an internal CSS: - Within a tag 4. Inline style: - style attribute of the HTML elements Note: style defined in 4 overlaps 3, which overlaps 2, and so forth. 33  CSS – Important concepts Cascading: A style sheet can also import the rules of other and so. A simple change on the top hierarchy style sheet, automatically updates all the documents in the chain. My document @import url(stylesheet.css);... 34  CSS – Important concepts Inheritance: any tag encapsulated in another tag, inherits most characteristics of the ascending. p{ One font-family:Verdana; Two } Both “One” and “Two” words will change the font type. p{ font-family: Verdana; } One Two i{ font-family: Arial; } One => Verdana Two => Arial 35  CSS – Important concepts Inheritance: What will be the size of the “Two” word? p{ font-size: 10pt; } One Two i{ font-size: 120%; } 12pt. 36  CSS – Important concepts Inheritance: What will be the colours of the words? p{ color: red; } One Two i{ color: blue; } Three p i{ color: green; } One => Red Two => Green Three => Blue 37  CSS – Rules priority The properties of redefined rules overlaps the prior ones. More specific rules, independently of the order which they appear on the style sheet, have priority to the other ones. p{ color: blue; } TEXT p{ color: green; } TEXT => green 38  CSS – Rules specificity To calculate a rule’s specificity, use the following table: Selector elements value Id (#someid) 100 Class (.something) 10 Html tag (p, div, a, …) 1 Sum the “value” for each element within the selector 1 10 11 p.col{ color: red; } 101 TEXT p#txtid{ color: blue; } 1 p{ color: green; } 100 1 1 TEXT => blue 39  CSS – Rules specificity (cont.) !important identifier overrides specificity: p.col{ color: red; } p#txtid{ color: blue; } p{ color: green !important;} This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. 71  Tableless Design Create a layout without using tables () How? – Create sections with divs () Optional: use an id for each section. – Use CSS properties to position each section: float position top, right, bottom, left display and clear – Place content within those sections. – If necessary, nest sections. 72  Tableless Design: absolute position CSS HTML div.links { border:1px solid #000; width:9.2em;... position:absolute; A Licenciatura top:0;... padding-left:0.5em; padding-right:0.5em; margin-left:0; }... #main { margin-left:10.2em; padding-left:1em;... padding-right:1em; list1 main list2 } #list1 { left:0; } #list2 { right:0; } 73  Tableless Design: with float CSS HTML #container{ width: 800px;... margin: auto; }... #A {... width: 100%; }... #B {... float: left; width: 150px; } #C { container float: right; width: 100px; } A #B, #C { min-height: 300px; } #D { D width: 550px; B C float: left; } #E { E clear: both; } 74  CSS Grid Layout Grid Layout is a two-dimensional grid- based layout system to design user interfaces. Evolution: initially we used tables to make the layouts, then floats, positioning and inline-block. Nowadays Grid Layout and Flexbox Layout are used to design the interfaces. 75  CSS Grid Layout It is necessary to define a container element as a grid with: – display: grid | inline-grid; Set the column and row sizes with: – grid-template-columns and grid- template-rows Place its child elements into the grid with: – grid-column and grid-row 76  CSS Grid Layout Lines and Cells Grid Container – The element on which display: grid is applied. It is the direct parent of all the grid items Grid Line: – The dividing lines that make up the structure of the grid. They can be either vertical or horizontal Grid Cell: – The space between two adjacent row and two adjacent column grid lines Grid Track – The space between two adjacent grid lines Grid Area – The total space surrounded by n grid lines. May be composed of 77 any number of grid cells.  CSS Grid Layout grid-template-columns and grid-template-rows Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. Values: ▪ – can be a length, a percentage, or a fraction of the free space in the grid using the fr unit ▪ – an arbitrary name of your choosing.container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; 78 }  CSS Grid Layout grid-column and grid-row grid-column is a shorthand.item-c { grid-column: 3 / span 2; for: grid-row: third-line / 4; – grid-column-start + grid-column-end } grid-row is a shorthand property for: – grid-row-start + grid-row-end Values: ▪ / – each one accepts a numbered grid line, a name to refer to a named grid line and span 79  CSS Grid Layout grid-area Gives an item a name so that it can be referenced by a template created with the grid- template-areas property Can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row- end + grid-column-end Values: ▪ – a name of your choosing ▪ / / / – can be numbers or named lines.item { grid-area: | / / / ; } 80  CSS Grid Layout grid-template-areas.item-a { Defines a grid template by grid-area: header; referencing the names of the grid } areas.item-b { grid-area: main; Repeating the name of a grid } area causes the content to span.item-c { those cells grid-area: sidebar; } A period signifies an empty cell.item-d { The syntax itself provides a grid-area: footer; visualization of the structure of }.container { the grid display: grid; Values: grid-template-columns: 50px 50px 50px 50px; ▪ – the name of a grid-template-rows: auto; grid area specified with grid-area grid-template-areas: ▪. – a period signifies an empty grid "header header header header" cell "main main. sidebar" "footer footer footer footer"; ▪ none – no grid areas are defined 81 }  CSS Grid Layout column-gap and row-gap Specifies the size of the space between grid lines gap property is the shorthand property Values: ▪ – a length value.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; } 82  CSS Grid Layout justify-content and align-content justify-content property aligns the grid along the inline (row) axis align-content property aligns the grid along the block (column) axis.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; } 83  CSS Grid Layout justify-items and align-items justify-items property aligns grid items along the inline (row) align-items property aligns grid items along the block (column) axis The value applies to all grid items inside the container.container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch | baseline; } 84  CSS Grid Layout justify-self and align-self justify-self property aligns a grid item inside a cell along the inline (row) axis align-self property aligns a grid item inside a cell along the block (column) axis The value applies to a grid item inside a single cell.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; } 85  CSS flexbox layouts Flexbox layouts provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic Items can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent Flex Container Flex Items 86  CSS flexbox layouts Structure CSS: 1.container { 2 display: flex; 3 } Flex Container Flex Items (children of flex container) 87  Flex Container flex-direction – Establishes the main-axis, thus defining the direction flex items are placed in the flex container.container { flex-direction: row | row-reverse | column | column-reverse; } 88  Flex Container flex-wrap – nowrap (default) – all items will try to fit onto 1 line – wrap - flex items will wrap onto multiple lines, from top to bottom – wrap-reverse: flex items will wrap onto multiple lines from bottom to top. Flex-wrap = wrap.container{ flex-wrap: nowrap | wrap | wrap- reverse; } 89  Flex Container justify-content – Defines the alignment along the main-axis.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right... + safe | unsafe; } 90  Flex Container align-content – Defines the alignment along the cross axis.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline... + safe | unsafe; } 91  Flex Container align-items – Defines how flex items are laid out along the cross axis.container { align-items: stretch | flex-start | flex- end | center | baseline | first baseline | last baseline | start | end | self-start | self-end... + safe | unsafe; } 92  Flex Item flex-grow – Defines the ability for a flex item to grow if necessary, within the main axis – Accepts unitless value that serves as a proportion – 0 – default value – item does not grow.item { flex-grow: ;} 93  Flex Item flex-basis – Default size of an element before the remaining space is distributed (through flex- grow). – auto - default value – 0 – extra space is not factored in.item {flex-basis: | auto;} 94  Flex Item order – Controls the order in which the item appear in the flex container. Default value is 0..item { order: ;} 95  transform Property A transformation is an effect that lets an element change shape, size and position. Allows to rotate, scale, move, skew, etc., elements. Can be applied as a mouseover or in animations CSS supports 2D and 3D transformations. 96  Transformations rotate() 97  Transformations translate() 98  Transformations skew() 99  Transformations scale() 100  Transformations matrix() ACE BDF ~[ABCDEF] 0 0 1 cos(a) -sen(a) 0 1 0 Tx Sx 0 0 1 tan(a) 0 sen(a) cos(a) 0 0 1 Ty 0 Sy 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 101  Rotate Method Rotates an element clockwise or counter-clockwise according to a given degree Using negative values will rotate the element counter- clockwise The fixed point that the element rotates around is also known as the transform origin. This defaults to the center of the element. transform: rotate(45deg) axis (origin) transform origin Positive values - clockwise 102  Translate Method Moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). Is specified as either one or two values: translate(tx) or translate(tx, ty) transform: translate(10px) or translateX(10px) transform: translate(20px, 10px) Without using the shorthand function: – translateX transform: translateX(20px); transform: translateY(10px); 103 – translateY  Scale Method Increases or decreases the size of an element (according to the parameters given for the width and height). transform: scale(2, 1) Without using the shorthand function: – scaleX transform: scaleX(2); – scaleY transform: scaleY(1); 104  Skew Method Skews an element along the X and Y-axis by the given angles Is specified with either one or two values, which represent the amount of skewing to be applied in each direction: skew(ax)or skew(ax, ay) transform: skew(25deg) skewX - skews an element along the X-axis by the given angle. skewY - skews an element along the Y-axis by the given angle. 105  Transform origin The transform-origin property allows to change the position of transformed elements. By default is in the centre of the element (50%, 50%). Values can be lengths, percentages or the keywords top, left, right, bottom, and center. transform-origin: left top; transform: rotate(45deg); New origin 106  Combining Transforms The transform property can accept as many functions as needed. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left. transform: translate(100px) rotate(45deg); ≠ transform: rotate(45deg) translate(100px); Y Y X ≠ X 107  Browser Support The numbers in the table specify the first browser version that fully supports the property. To support all modern browsers, the following styles should be used for transitions: – -webkit-transform – -moz-transform – -ms-transform – transform See: http://caniuse.com/#search=transforms 108  3D Transformations 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. New properties: – scale3D, scaleZ; – translate3D, translateZ; – rotate3D, rotateX, rotateY, rotateZ; – matrix3D; – perspective; – transform-style; – backface-visibility. 109  3D Transformations – scale3D, scaleZ; – translate3D, translateZ; – rotate3D, rotateX, rotateY, rotateZ; – matrix3D; – perspective; – transform-style; – backface-visibility. 110  perspective Property Give a 3D-positioned element some perspective. Defines how far the object is away from the user. A lower value will result in a more intensive 3D effect than a higher value. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself. perspective(500px) perspective(100px) 111  perspective Property Can be applied in two ways: – Using the transform property, with perspective() as a function:As a function.box-3d{ transform: perspective(500px)...; } The transform: perspective() function gives element depth while the perspective property creates a 3D-space shared by all its transformed children. – Using the perspective property:.parent-box-3d{ perspective: 500px; } The perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements 112  transform-style Property Specifies how nested elements are rendered in 3D space. Values: – flat: child elements will NOT preserve its 3D position – preserve-3d: child elements will preserve its 3D position 113  backface-visibility Property Determines if the back face is visible or not. Values: visible and hidden 114  Transition Property It allows a successive application of different values ​to one (or more) property(ies) Transition can be triggered by state change (eg: hover) or by style change with Javascript Applies through the transition property (and derivatives), defined in the rule with the initial settings of the element 115  Transition Example Calculates intermediate values – Eg: width ? 116  Transition Example Without transition With transition 117  transition Property transition: property duration timing-function delay; Property: name of the CSS property (the transition effect will start when the specified CSS property changes). Duration: duration in seconds (s) or milliseconds (ms). Timing-function: speed curve of the transition effect. Delay: delay for the start of a transition effect. 118  transition Property transition: property duration timing-function delay; Shorthand property for: transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay; 119  transition Property Use comma to set different transitions on different properties: div { transition: background 0.2s ease, padding 0.8s linear; } Use all to set the same transition on different properties: div { transition: all 0.5s ease; background: red; padding: 10px; } div:hover { background: green; padding: 20px; } There are a lot of properties which allow animation and transition: – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties – http://oli.jp/2010/css-animatable-properties/ 120  transition-timing-function Property Value Description ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) linear Specifies a transition effect with the same speed from start to end (equivalent to cubic- bezier(0,0,1,1)) ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic- bezier(0.42,0,0.58,1)) step-start Equivalent to steps(1, start) step-end Equivalent to steps(1, end) steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 121  animation Property Similar to transition property, but don’t need a trigger. Transitions are limited to an initial and final state. Animations can include as many intermediate states (keyframes) as desired in between the initial and final state. Keyframes hold what styles the element will have at certain times. 122  @keyframes Rule When are specified CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, the animation must be bind to an element. @keyframes animationName{ from{ property: value; element{... animation: animationName 1s; } Animation name to{ property: value; }... } } The style can change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. @keyframes animationName{ 0%{ property: value;... Animation start }... Intermediate 100%{ property: value; Points... Animation end } 123 }  animation Property animation: animationName duration timing-function delay iteration-count direction fill-mode play-state; animationName: name for the @keyframes animation. Duration: duration in seconds (s) or milliseconds (ms). Timing-function: speed curve of the animation effect (linear, ease, ease-in, ease- out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n)). Delay: delay for the start of an animation. Iteration-count: number of times an animation should be played (number or infinite). Direction: defines whether an animation should be played forwards, backwards or in alternate cycles (normal, reverse, alternate and alternate-reverse) Fill-mode: style for the element when the animation is not playing (before it starts, after it ends, or both). Play-state: specifies whether the animation is running or paused. 124  animation Property animation: animationName duration timing-function delay iteration-count direction fill-mode play-state; Shorthand property for: animation-name: animationName; animation-duration: duration; animation-timing-function: timing-function; animation-delay: delay; animation-iteration-count: iteration-count; animation-direction: direction; animation-fill-mode: fill-mode; animation-play-state: play-state; 125  animation Property Example: @keyframes animationTop { from { top: 0px; } to { top: 480px; } } div#example{ animation: animationTop 1s; } 126  Fonts Some properties: Property Description Can hold several font names as a "fallback" system. If the font-family browser does not support the first font, it tries the next font. font-family: Verdana, "Times New Roman", sans-serif; font-size Font size font-size: 10pt; font-size: larger; font-size: 120%; font-weight Font Weight (eg : bold) font-weight: bold; font-weight: lighter; font-width Font width(condensed or normal) font-width: condensed; font-width: normal; font-style Font style (normal | italic | oblique) font-style: italic; Shorthand for several font properties font (font-style, font-variant, font-weight, font-stretch, font-size, line-height, font- family) font: condensed oblique 12pt "Helvetica Neue", serif; 127  Text Some properties: Property Description color Text colour color: red; color: #336633; color: rgb(255,100,0); line-height Height of a line line-height: 200%; line-height: 16pt; Text decoration (eg: underline or line-through) text-decoration text-decoration: underline; text-decoration: line-through; text-align Text horizontal alignment text-align: center; text-align: justify; text-indent Indentation of the first line text-indent: 20px; text-indent: 5em; text-transform Capitalization of text text-transform: capitalize; text-transform: uppercase; word-spacing Word spacing word-spacing: 40%; letter-spacing Letter Spacing 128 letter-spacing: 1em;  Colour Some properties: Property Description Background colour background-color background-color: transparent; background-color: rgb(255,100,0); color Text colour color: red; color: #336633; color: transparent; Transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent opacity opacity: 0; opacity: 1; opacity: 0.7; 129  Background Some properties: Property Description background-color Background colour background-color: red; background-image Background image background-image: url("img/fundo.png"); background-repeat Sets if/how a background image will be repeated background-repeat: repeat-x; Sets whether a background image scrolls with the background-attachment rest of the page, or is fixed background-attachment: scroll; background-position Sets the starting position of a background image background-position: bottom right; Shorthand for several background properties background (background-color, background-image, background-repeat, background- attachment, background-position) background: url("fundo.png") right bottom no-repeat fixed; 130  Tables Some properties: Property Description Defines the algorithm used to lay out table cells, rows, and table-layout columns table-layout: auto; table-layout: fixed; Sets whether table borders should collapse into a single border-collapse border or be separated as in standard HTML border-collapse: collapse; border-collapse: separate; border-spacing Sets the distance between the borders of adjacent cells border-spacing: 2px; Sets whether or not to display borders on empty cells in a empty-cells table empty-cells: show; empty-cells: hide; caption-side Placement of a table caption caption-side: top; caption-side: bottom; 131  Lists Some properties: Property Description Type of list-item marker in a list list-style-type: none; list-style-type list-style-type: square; list-style-type: upper-roman; Replaces the list-item marker with an image list-style-image list-style-image: none; list-style-image: url(img/bullet.gif); list-style-position Position of the list-item markers (bullet points) list-style-position: inside; Shorthand for list properties list-style (list-style-type, list-style-image, list-style-position) list-style: url("img/bullet.gif") inside; 132  Box Model – Width and Height Property Description width Width width: 400px; width: 60%; width: auto; min-width Minimum width min-width: 200px; max-width Maximum width max-width: 600px; height Height height: 400px; height: 60%; height: auto; min-height Minimum height min-height: 200px; max-height Maximum height max-height: 600px; 133  Box Model – Margin and Padding Property Description margin-top Top, right, bottom and left margins margin-right margin-top: 10px; margin-right: 0; margin-bottom margin-bottom: 20%; margin-left: 2em; margin-left Shorthand property for individual margin properties margin (margin-top, margin-right, margin-bottom, margin-left) margin: 10px 0 20% auto; margin: 10px auto; padding-top Top, right, bottom and left padding padding-right padding-top: 10px; padding-right: 0; padding-bottom padding-bottom: 20%; padding-left: 2em; padding-left Shorthand property for individual padding properties padding (padding-top, padding-right, padding-bottom, padding-left) padding: 10px 0 20% 2em; padding: 10px; 134  Box Model – Borders Some properties: Property Description border-top-width Width of top, right, bottom and left borders border-right-width border-top-width: 1px; border-right-width: thick; border-bottom-width border-bottom-width: thin; border-left-width: 2mm; border-left-width Shorthand property for individual border width properties border-width (border-*-width) border-width: 1px; border-width: thick thin; border-width: 1px 2px 0; border-top-style Style of top, right, bottom and left borders (eg: solid, border-right-style dotted, etc.) border-bottom-style border-top-style: none; border-right-style: solid; border-left-style border-bottom-style: dotted; border-left-style: none; Shorthand property for individual border style properties border-style (border-*-style) border-style: none solid; border-style: dotted dashed double grove; 135  Box Model – Borders Some properties: Property Description border-top-color border-right-color Colour of top, right, bottom and left borders border-top-color: red; border-right-color: #00A2C3; border-bottom-color border-bottom-color: blue; border-left-color: black; border-left-color Shorthand property for individual border colour properties border-color (border-*-color) border-color: red; border-color: red rgb(0,255,30); border-color: red blue rgb(0,255,30) green; Shorthand property for top, right, bottom and left border border-top properties (width, style and colour ) border-right (border-*-width, border-*-style, border-*-color) border-bottom border-top: 1px solid red; border-left border-right: thin dotted gray; Shorthand property for all border properties (width, style and border colour ) (border-*-width, border-*-style, border-*-color) border: 1px dotted blue; 136  Box Model – Borders and Shadow Some properties: Property Description border-top-left-radius Radius of the element's corners (top, right, border-top-right-radius bottom and left) border-bottom-left-radius border-top-left-radius: 5px; border-bottom-right-radius border-top-right-radius: 5px 10px; Shorthand property for individual border radius properties border-radius (border-*-*-radius) border-radius: 20px; border-radius: 20px/10px; border-radius: 6px 2px 3px 4px/3px 4px 6px 5px; Attaches one or more shadows to an element box-shadow box-shadow: 5px 5px silver; box-shadow: 5px 5px 10px silver; 137  Box Model – 2D and 3D Transformations Some properties: Property Description Applies a 2D or 3D transformation to an element. This property allows to rotate, scale, move, skew, etc., elements. transform: rotate(30deg); transform: translate(20px, 5px); transform transform: scale(3,2); transform: skew(25deg); It’s possible to use multiple transforms at once. The 'transform' property can accept as many functions as needed (order is important) transform: translate(100px) rotate(45deg); transform: rotate(45deg) translate(100px); Allows to change the position of transformed elements transform-origin Default value: 50%, 50% transform-origin: left top; transform: rotate(45deg); 138  Animations and transitions Some properties: Property Description Shorthand for: transition-property, transition-duration, transition-timing-function and transition-delay transition transition: border 0.5s; transition: width 2s ease-out 1s; transition: width 2s ease 1s, height 1s ease-out 0; Shorthand for: animation-name, animation-duration, animation-timing-function, animation-delay, animation- animation iteration-count, animation-direction, animation-fill-mode and animation-play-state animation: mymove 5s infinite 139  Generated Content Some properties: Property Description Can be used with the ::before and ::after pseudo- elements, to insert generated content content content: none; content: "@IPLeiria"; content: url("img/a.png"); content: "@IPLeiria" url("img/a.png"); 140  Other Box Model Properties Property Description display Display behavior (the type of rendering box: inline, block, inline-block, none,...) display: none; display: inline-block; display: table-row; Type of positioning method used for an element (static, relative, absolute, fixed, or position sticky) position: static; position: relative; position: absolute; Affects the position of a positioned element. These properties have no effect on top non-positioned elements. If the position is: Absolute or fixed: the top property sets the top edge of an element to a unit above/below the top edge of its right nearest positioned ancestor. bottom Relative: the top property makes the element's top edge to move above/below its normal position. Sticky: the top property behaves like its position is relative when the element is inside the viewport, and like left its position is fixed when it is outside. Static: the top property has no effect. top: 10px; right: auto; bottom: 0; left: 5%; Specifies how an element should float (left, right, none). Absolutely positioned float elements ignores the float property. float: left; float: right; float: none; clear Specifies on which sides of an element floating elements are not allowed to float clear: none; clear: left; clear: right; clear: both; 141  Other Box Model Properties Property Description Stack order of an element. An element with greater stack order is z-index always in front of an element with a lower stack order. By default the value is 0. z-index: 3; z-index: -2; z-index: auto; Specifies whether or not an element is visible. Hidden elements take visibility up space on the page. Use the display property to both hide and remove an element from the document layout. visibility: visible; visibility: hidden; visibility: collapse; Specifies whether to clip content or to add scrollbars when an overflow element's content is too big to fit in a specified area. overflow: visible; overflow: hidden; overflow: scroll; overflow: auto; clip Specifies a rectangle to clip an absolutely positioned element. clip: auto; clip: rect(0px 50px 50px 0px); 142  Resetting or Normalizing Default Styles Two ways to level differences between default browser style sheets: – Begin main style sheet with a CSS reset that effectively sets all the default element styles to “zero”. – Begin main style sheet with normalize.css, which tweaks default styles to look very similar across browsers. 143  CSS browser prefixes When CCS3 was first being introduced, a number of excited properties began to hit different browsers at different times. Vendors—browser makers—are free to implement extensions to the CSS specifications. Safari and Chrome: first to introduce animation-style properties Vendor prefixed: a way to add support for new CSS features before those features are fully supported in all browsers. The major browsers use the following prefixes: ▪ -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser) ▪ -moz- (Firefox) ▪ -o- (Old, pre-WebKit, versions of Opera) ▪ -ms- (Internet Explorer and Microsoft Edge) When to prefix: ▪ http://shouldiprefix.com/ ▪ https://caniuse.com/ 144  CSS browser prefixes This approach allows any vendor-specific extension to coexist with any future (or current) CSS properties According to the W3C specifications, a CSS property name will never begin with a dash or an underscore In most cases, to use a brand new CSS style property, is taken the standard CSS property and added the prefix for each browser. #example { The prefixed versions would always come -webkit-property1: valueA; -moz-property1: valueA; first (in any order you prefer) while the -ms-property1: valueA; normal CSS property will come last. -o-property1: valueA; property1: valueA; #example { } -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; } 145  Responsive Design Responsive web design is a way of making websites that works effectively on both desktop browsers and the myriad of mobile devices on the market. http://foodsense.is/ image taken from http://designmodo.com/responsive-design-examples/ 146  Responsive Design Responsive design involves: – Using Grids and Flexible Layouts – Multiple versions of images (different resolutions) – Using CSS Media Queries Frontend frameworks can be used for Responsive Web Design – Consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) – Usual components: CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion. Typography style definitions for HTML elements. Solutions for cases of browser incompatibility so the site displays correctly in all browsers. Creation of standard CSS classes which can be used to style advanced components of the user interface. – Examples: Bootstrap (http://getbootstrap.com) Foundation (http://foundation.zurb.com) Pure (http://purecss.io) Base (http://matthewhartman.github.io/base) Skeleton (http://getskeleton.com) YAML (http://yaml.de) Ink (http://ink.sapo.pt) – “from Sapo portuguese" 147  Responsive Web Design When making responsive web pages, add the following element in all web pages: This will set the viewport of the page, which will give the browser instructions on how to control the page's dimensions and scaling. 148  CSS Media Queries CSS2 Introduced Media Types – To define different style rules for different media types (Example: define a set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on). – Unfortunately these media types never got a lot of support by devices, other than the print media type 149  CSS Media Queries CSS3 Introduced Media Queries – Extended the CSS2 media types idea: instead of looking for a type of device, they look at the capability of the device. – Can be used to check many things, such as: width and height of the viewport width and height of the device orientation (landscape/portrait) resolution – Popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones). 150  CSS Media Queries Media queries are used for the following: – To conditionally apply styles with the CSS @media and @import at-rules. – To target specific media for the , , and other HTML elements. – To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods. 151  CSS Media Queries Media queries are used in: – Tag Link – With @media in CSS style sheet @media screen and (min-width:800px){ body{ color: blue; } } – With @import * in HTML or CSS File @import "landscape.css"; import url("portraint.css") (orientation:portrait); 152  CSS Media Queries Media Query Syntax – Consists of a media type and can contain one or more expressions, which resolve to either true or false. @media not|only mediatype and (expressions) { CSS-Code; } – The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. – If the media query is true, the corresponding style sheet or style rules are applied. 153  CSS Media Queries Media CSS Syntax @media not|only mediatype and (expressions) { CSS-Code; } – Logic operators: not: reverts the meaning of an entire media query. only: prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers. and: combines a media feature with a media type or other media features. – Unless is used the not or only operators, the media type is optional and the all type will be implied. – Comma: used to combine multiple media queries into a single rule (behave like a logical or operator) – It is possible to have different stylesheets for different media: 154  CSS Media Queries CSS3 Media Types Value Description all Used for all media type devices print Used for printers screen Used for computer screens, tablets, smart-phones etc. speech Used for screen readers that "reads" the page out loud 155  CSS Media Queries CSS3 Media Features Value Description any-hover Does any available input mechanism allow the user to hover over elements? (Media Queries Level 4) any-pointer Is any available input mechanism a pointing device (Media Queries Level 4) aspect-ratio The ratio between the width and the height of the viewport color The number of bits per color component for the output device color-gamut The approximate range of colors that are supported by the user agent and output device (Media Queries Level 4) color-index The number of colors the device can display grid Whether the device is a grid or bitmap height The viewport height hover Does the primary input mechanism allow the user to hover over elements? (Media Queries Level 4) inverted-colors Is the browser or underlying OS inverting colors? (Media Queries Level 4) light-level Current ambient light level (Media Queries Level 4) max-aspect-ratio The maximum ratio between the width and the height of the display area max-color The maximum number of bits per color component for the output device max-color-index The maximum number of colors the device can display 156  CSS Media Queries CSS3 Media Features Value Description max-height The maximum height of the display area, such as a browser window max-monochrome The maximum number of bits per "color" on a monochrome (greyscale) device max-resolution The maximum resolution of the device, using dpi or dpcm max-width The maximum width of the display area, such as a browser window min-aspect-ratio The minimum ratio between the width and the height of the display area min-color The minimum number of bits per color component for the output device min-color-index The minimum number of colors the device can display min-height The minimum height of the display area, such as a browser window min-monochrome The minimum number of bits per "color" on a monochrome (greyscale) device min-resolution The minimum resolution of the device, using dpi or dpcm min-width The minimum width of the display area, such as a browser window monochrome The number of bits per "color" on a monochrome (greyscale) device orientation The orientation of the viewport (landscape or portrait mode) overflow-block How does the output device handle content that overflows the viewport along the block axis (Media Queries Level 4) overflow-inline Can content that overflows the viewport along the inline axis be scrolled (Media Queries Level 4) pointer Is the primary input mechanism a pointing device (Media Queries Level 4) resolution The resolution of the output device, using dpi or dpcm scan The scanning process of the output device scripting Is scripting (e.g. JavaScript) available? (Media Queries Level 4) update How quickly can the output device modify the appearance of the content (Media Queries Level 4) 157 width The viewport width  CSS Media Queries Examples: @media screen and (max-width: 992px) {.column { width: 50%; } } @media screen and (max-width: 600px) {.column { width: 100%; } } @media only screen and (orientation: landscape) { body { background-color: lightblue; } } 158  CSS Media Queries Examples: – It is possible to add an additional media query using a comma (this will behave like an OR operator): @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } } 159  Bibliography CSS: The Definitive Guide, 3rd Edition, Eric Meyer, O’Reilly 2006 Concepts about Properties, Box Model and Media Queries: http://www.w3schools.com/ http://www.w3.org/ http://www.quirksmode.org/compatibility.html 160