1 / 27

CSS

CSS. 2017, Fall Pusan National University Ki-Joune Li. 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

hatcht
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 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 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> • Element Selector • ID Selector • The id selector uses the id attribute of an HTML element to select a specific element.

  7. Selectors <!DOCTYPE html> <html> <head> <style> .center {text-align: center; color: red;} </style> </head> <body> <h1 class="center">Red and center-alignedheading</h1> <pclass="center">Red and center-alignedparagraph.</p> </body> </html> • 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

  8. Three ways to insert CSS <!DOCTYPE html> <html> <head> <linkrel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>Thisisaheading</h1> <p>Thisisaparagraph.</p> </body> </html> em {font-weight: bold; color: red} h1 {font-family: Tahoma, Helvetica, sans-serif; color: purple} p {font-size: 12pt; color: black;} • Internal Style Sheet – See previous examples • External Style Sheet • Inline Style Sheet

  9. What happens if multiple styles <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;} Overriding

  10. Colors • 140 colors • Identification • via name, values (hexadecimal), rgb, hsl, hwb • example

  11. Gradient top to bottom <!DOCTYPE html> <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> • Types • Linear Gradient

  12. Gradient Left to Right #grad1 { #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 */ } • Types • Linear Gradient

  13. Gradient Diagonal #grad1 { #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 */ } • Types • Linear Gradient

  14. Background 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: righttop; margin-right: 200px; background-attachment: fixed; } • The CSS background properties are used to define the background effects for elements. • background-color • background-image • background-repeat • background-attachment • background-position

  15. Position and Overflow • 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 selector:pseudo-class {    property:value;} selector::pseudo-element {property:value;} • 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

  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 top left right bottom • Border/Margins/Padding • Border Style: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-style • Border width: https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width • Margin: auto value • Margin: Inherit Value

  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 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

  22. CSS Web Layout A website is often divided into headers, menus, content and a footer:

  23. CSS3 Responsive <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-widthpartsetsthewidth of thepagetofollowthescreen-width of thedevice (whichwillvarydependingonthedevice) • 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

  24. CSS3 Responsive - Web Layout Content /* 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%;} } • Multi-Column • 1-column (often used for mobile browsers) • 2-column (often used for tablets and laptops) • 3-column layout (only used for desktops)

  25. CSS3 Responsive – Media Queries <!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 The @media rule, introduced in CSS2, made it possible to define different style rules for different media types - Example

  26. CSS3 Responsive ... <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet＂ href="https://www.w3schools.com/w3css/4/w3.css"> <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> </div> ... • 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)

  27. W3.CSS • W3.CSS is a modern CSS framework with built-in responsiveness: • Easy to use and number of templates • https://www.w3schools.com/w3css/w3css_templates.asp

More Related