Download presentation
Presentation is loading. Please wait.
1
2017, Fall Pusan National University Ki-Joune Li
CSS 2017, Fall Pusan National University Ki-Joune Li
2
CSS – Cascading Style Sheets
CSS – Specification of web page presentation describes how HTML elements are to be displayed on screen, paper, or in other media saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files Why CSS Separation the presentation from structure and content itself. It is better not to mix them One HTML page, Multiple Styles It saves a lot of work
3
Inline Styles <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title> Inline Style</title> </head> <body> <p>No style</p> <p style=“color: red;”>With inline Style <em>font</em></p> </body> </html> Within HTML document Not a separation from document structure
4
Syntax CSS rule-set consists of Selector points to HTML element
selector and declaration block Selector points to HTML element Declaration block contains multiple declarations separated by semi-colons (;). Each declaration
5
Sample <!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <title> Embedded Style</title> <style type="text/css"> em {font-weight: bold; color: red} h1 {font-family: Tahoma, Helvetica, sans-serif; color: purple} p {font-size: 12pt; color: black;} </style> </head> <body> <h1>Embedded Style</h1> <p>With Embedded Style <em>emphasized text</em></p> </body> </html>
6
Selectors Element Selector ID Selector
The id selector uses the id attribute of an HTML element to select a specific element. em {font-weight: bold; color: red} h1 {font-family: Tahoma, Helvetica, sans-serif; color: purple} p {font-size: 12pt; color: black;} <!DOCTYPE html> <html> <head> <style> #para1 {text-align: center; color: red;} </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
7
Selectors Class Selector
The class selector selects elements with a specific class attribute. only specified HTML elements should be affected by a class and HTML elements can also refer to more than one class. Group selector <!DOCTYPE html> <html> <head> <style> .center {text-align: center; color: red;} </style> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html>
8
Three ways to insert CSS
Internal Style Sheet – See previous examples External Style Sheet Inline Style Sheet <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> em {font-weight: bold; color: red} h1 {font-family: Tahoma, Helvetica, sans-serif; color: purple} p {font-size: 12pt; color: black;}
9
What happens if multiple styles
Overriding <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 {color: orange;} </style> </head> em {font-weight: bold; color: red} h1 {font-family: Tahoma, Helvetica, sans-serif; color: purple} p {font-size: 12pt; color: black;}
10
Colors 140 colors Identification
via name, values (hexadecimal), rgb, hsl, hwb example
11
Gradient Types top to bottom Linear Gradient <!DOCTYPE html>
<head> <style> #grad1 { /* top to bottom: default */ height: 200px; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, yellow); /* Standard syntax (must be last) */ } </style> </head> <body> <h3>Linear Gradient - Top to Bottom</h3> <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> <div id="grad1"></div> </body> </html>
12
Gradient Types Left to Right Linear Gradient #grad1 { height: 200px;
background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , yellow); /* Standard syntax */ }
13
Gradient Types Diagonal Linear Gradient #grad1 { height: 200px;
background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left top, red, yellow); background: -o-linear-gradient(bottom right, red, yellow); background: -moz-linear-gradient(bottom right, red, yellow); background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */ }
14
Background The CSS background properties are used to define the background effects for elements. background-color background-image background-repeat background-attachment background-position h1 { background-color: green;} div { background-color: lightblue; } p { background-color: yellow; } body { background-image: url("paper.gif");} body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; }
15
Position and Overflow Overflow – when overflow happens
Position specifies the type of position method for an element Static: it is always positioned according to the normal flow of the page Relative: relative; is positioned relative to its normal position Fixed: it always stays in the same place even if the page is scrolled: Absolute: is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed) Sticky: is positioned based on the user's scroll position. Overflow – when overflow happens Visible Hidden Scroll Auto
16
Pseudo-class/Pseudo-element
Pseudo-class is used to define a special state of an element Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax: Example Pseudo-element is used to style specified parts of an element Syntax Example: first-line, first-letter selector:pseudo-class { property:value; } selector::pseudo-element { property:value; }
17
Dropdowns and tooltips
Dropdown – create dropdown element Example – dropdown menu Tooltip - used to specify extra information about something when the user moves the mouse pointer over an element
18
CSS Box Model Border/Margins/Padding
Border Style: Border width: Margin: auto value Margin: Inherit Value top left right bottom
19
Width/Height Example Setting max-Width
20
CSS Layout – Display Property
Display property: most important CSS property for controlling layout Block-Level Element Inline Element Block-Level Element: always starts on a new line and takes up the full width available for example <div> <h1> - <h6> <p> <form> <header> <footer> <section> Inline Element: does not start on a new line and only takes up as much width as necessary for example <span> <a> <img>
21
Icons Font Awesome Icons
22
CSS Web Layout A website is often divided into headers, menus, content and a footer:
23
CSS3 Responsive Viewport Responsive Web Design
Responsive web design makes your web page look good on all devices. Responsive web design uses only HTML and CSS. Responsive web design is not a program or a JavaScript. Viewport User’s visible area of a web page <meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport element gives the browser instructions on how to control the page's dimensions and scaling. width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device)
24
CSS3 Responsive - Web Layout Content
Multi-Column 1-column (often used for mobile browsers) 2-column (often used for tablets and laptops) 3-column layout (only used for desktops) /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 15px;} /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width:600px) { .column {width: 100%;} }
25
CSS3 Responsive – Media Queries
introduced in CSS2, made it possible to define different style rules for different media types - Example <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue;} @media screen and (min-width: 480px) { body { background-color: lightgreen;} } </style> </head> <body> <h1>Resize the browser window to see the effect!</h1> <p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p> </body> </html> computer screen, tablet, smartphone print/speech
26
CSS3 Responsive Image and Video
width: 100% and height: auto – example max-width and auto height – example Responsive Web Design: w3.css framework (example) Responsive Web Design: bootstrap framework (example) ... <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet＂ href=" <body> <div class="w3-container w3-green"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
27
W3.CSS https://www.w3schools.com/w3css/w3css_templates.asp
W3.CSS is a modern CSS framework with built-in responsiveness: Easy to use and number of templates
Similar presentations
