SEEM4570 Tutorial 3: CSS + CSS3.0

SEEM4570Tutorial 3: CSS + CSS3.0 LI Xu xuli@se.cuhk.edu.hk 2019.10.04

What is CSS ? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed

CSS Rule Structure CSS rule-set consists of a selector and a declaration block: • The selector points to the HTML element you want to style • The declaration block contains one or more declarations • Each declaration includes a CSS property name and a value • Each declaration separates with a semi-colon

ID in CSS • Specify a style for a unique element by referring to the “id” in the HTML element. • The style is defined by “#” in CSS <head> <style> #para1{ color:red; } </style> </head> <body> <p id="para1">A style paragraph</p> <p id="para1">Another style paragraph</p> </body>

Class in CSS • Specify a style for a unique of elements by referring to the “class” in the HTML element. • The style is defined by “.” in CSS <head> <style> .para1{ color:red; } </style> </head> <body> <p class="para1">A style paragraph</p> <p class="para1">Another style paragraph</p> </body>

Some Useful Elements - Table • Table <table> • <th> head <tr>table row <td>table data • Table border • Table width and height • Table color • Alignment • Table Padding • Horizontal Dividers • Hoverable Table • Apply style to a specific table …

Some Useful Elements - Table

Some Useful Elements - Layer • We use <div> to represent it. • You need to understand the layout first:

Some Useful Elements - Position • Position • Position properties allow you to position an element. It can also specify what should happen if an element’s content is too big or which element overlaps with one another. • There are four different position value: • Static(default) • Relative • Fixed • Absolute

Some Useful Elements - Position • Position: relative • A relative positioned element is positioned relative to its normal position. • Example: • div.relative{ position: relative; left: 30px; border: 3px; }

Some Useful Elements - Position • Position: fixed • A fixed positioned element is positioned relative to the browser window. • Example: • div.fixed{ position: fixed; bottom: 0; right: 0; width: 300px; border:3px; }

Some Useful Elements - Position • Position: absolute • An absolute positioned element is positioned relative to the nearest positioned ancestor. If no such ancestor is found, it uses the document body, and move along with page scrolling. • Example: div.relative { position: relative; width: 400px; height: 200px; border: 3px; } div.absolute { position: absolute; bottom: 0; right: 0; width: 200px; height: 100px; border: 3px; } <div class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute;</div> </div>

Some Useful Elements - Position • Position: overlapping • Elements can overlap other elements if needed. • The z-index property specifies the stack order of an element. • Example: img { position: absolute; left: 0px; top: 0px;z-index: -1;}

Some Useful Elements - Position

Some Useful Elements - Display • Display property specifies how an element is displayed. • Commonly used values: div { display: inline; /* Default of all elements*/ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* Display block-level element */ display: run-in; /* Not particularly well supported */ display: none; /* Hide */ }

Some Useful Elements - Display • Inline • Don’t start on a new line and only take up as much width as necessary. It sits right inline with the natural flow of the text. • e.g. <span>、<em> 、<b>、<a> • Inline Block • Similar to inline element but is able to set a width and height • Block • Don’t sit inline but break past them. Take up as much horizontal space as they can. • e.g. <div>、<section>、<ul>、<h1> • Run-in • Make a header element to sit inline with the text below it. • Don’t work in Firefox

Some Useful Elements - Display

Some Useful Elements - Display • Table Values • Force non-table elements to behave like table-elements • Browser Support: • IE8 supports the "table-" values only if a !DOCTYPE is specified. div { display: table; /* like a <table> element*/ display: table-cell; /* like a <td> element*/ display: table-column; /* like a <col> element*/ display: table-column-group; /* like a <colgroup> element*/ display: table-header-group; /* like a <thead> element */ display: table-row-group; /* like a <tbody> element*/ display: table-footer-group; /* like a <tfoot> element*/ display: table-row; /*like a <tr> element */ display: table-caption; /* like a <caption> element*/ }

Some Useful Elements - Display

Some Useful Elements - Display Put together a multi-column layout

What is CSS 3.0 ? • CSS 3.0 is the latest standard for CSS, and also completely backwards-compatible with earlier versions of CSS.

Border-Radius Property • With CSS 3.0, you can give any element "rounded corners", by using the border-radius property. It is normally used like this:

Border-Radius Property • Rules: • Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner • Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right • Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner • One value: all four corners are rounded equally

Backgrounds • CSS 3.0 allows you to add multiple background images for an element, through the background-image property. • The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

Backgrounds • Multiple background images can be specified using either the individual background properties (as above) or the background shorthand property. • The background-size property accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

Colors • CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors, HSL colors, HSLA colors, opacity • RGBA Colors • an extension of RGB color values with an alpha channel - specifies the opacity for a color.

Colors • HSL Colors • Hue, Saturation and Lightness. • Hue is a degree on the color wheel (0 - 360): • 0 (or 360) is red • 120 is green • 240 is blue • Saturation is a percentage value: 100% is the full color. • Lightness is also a percentage; 0% is dark (black) and 100% is white.

Colors • HSLA Colors HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. • Opacity Opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). And the opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Gradients • CSS 3.0 gradients let you display smooth transitions between two or more specified colors. • CSS3 defines two types of gradients: • Linear Gradients (goes down/up/left/right/diagonally) • Radial Gradients (defined by their center) • Linear Gradients

Gradients • Radial Gradients

Shadow Effects • The CSS3 text-shadow property applies shadow to text. • In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): • Next, add a color to the shadow: • Then, add a blur effect to the shadow:

Text • CSS 3.0 contains several new text features: • text-overflow • word-wrap • word-break • Text Overflow The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

Text • Word Wrapping The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line. • Word Breaking The CSS3 word-break property specifies line breaking rules.

Animations • CSS 3.0 animations allows animation of most HTML elements without using JavaScript or Flash! • What are CSS 3.0 Animations? • An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.

Animations • To use CSS 3.0 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. • The @keyframes Rule When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

Resources • http://www.w3schools.com/css/ • http://www.html.net/tutorials/css/ • http://www.barelyfitz.com/screencast/html-training/css/positioning/ • https://www.css3maker.com/

Question Time

SEEM4570 Tutorial 3: CSS + CSS3.0