CSS

CSS

Jussi Pohjolainen Tampere University of Applied Sciences

CSS

•  CSS is a stylesheet language used to describe the presenta>on of a document wri@en in markup language

•  Usually used with (x)html •  Defining fonts, colors and layout •  Separates document content and presenta>on

Some History

•  CSS1 spec finished 1996, it took three years before browsers supported CSS1

•  2000 IE 5.0 for Mac was the first browser to fully support CSS1

•  => CSS Filtering •  S>ll hundreds of bugs in browsers

CSS Versions •  CSS1

–  W3C Recommenda>on 1996 –  Typography, fonts, text alignment –  No layout and design

•  CSS2 –  W3C Recommenda>on 1998 –  Layout, style sheets could be imported, selectors –  Revision to CSS2 -‐> CSS2.1

•  CSS3 –  Several specifica>ons: modules –  Not ready yet, four modules are published under recommenda>on:

media queries, namespaces, selectors level 3, Color –  Some func>onality already implemented in browsers

Rendering Engines

h@p://www.quirksmode.org/css/contents.html

<blink> again!?

•  April 3rd, 2013 Google launches Blink, a fork of the WebKit browser engine –  h@p://www.chromium.org/blink

•  Apple and Google will have their own implementa>ons of WebKit…

•  Mozilla and Samsung collabora>ng on new web browser engine –  h@p://blog.mozilla.org/blog/2013/04/03/mozilla-‐and-‐samsung-‐collaborate-‐on-‐next-‐genera>on-‐web-‐browser-‐engine/

Before CSS

•  Presenta>on was part of the document structure: <h2 align="center">

<font color="red" size="+4" face="Times New Roman, serif">

<i>Usage of CSS</i>

</font>

</h2>

•  Many problems…

Using CSS

•  Structure is clear: <h2>Usage of CSS</h2>

•  Presenta>on is clear: h2 {

text-align: center;

color: red;

font: italic large "Times New Roman", serif;

}

CSS Possibili>es

•  Colors, fonts, layout, sizes, borders.. •  Possible to do different css – files for prin>ng, mobile devices, desktop computers.

•  See – h@p://www.csszengarden.com/

Linking CSS to Web Document <html> <head>

<title>Page</title> <link rel="stylesheet" type="text/css"

media="screen" href="screen.css" /> </head>

<body> <h1>Title</h1>

<p>paragraph</p> </body> </html>

Media Types <html> <head> <title>Title</title>

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> </head>

<body>

<h1>Title</h1>

<p>paragraph</p> </body>

</html>

Linking

•  Linking to external CSS – <link rel="stylesheet" type="text/css" href="/style.css" media="screen">

•  The same using @import rule and "internal" style sheet – <style type="text/css"> –  @import url(/style.css); – </style>

Internal CSS

•  To use internal: –  <style type="text/css" media="screen,projec>on"> –  ⋮ CSS rules… –  </style>

•  And to use inline –  <ul style="font-‐size:120%; color:#060"> –  ⋮ list items… –  </ul>

CSS3 Media Queries

•  Media Queries is CSS3 extension – <link rel="stylesheet" type="text/css" href="/style.css" media="handheld and (min-‐width:20em)">

CSS3 Media Queries

<!DOCTYPE html> <html> <head> <title> Title </title> <meta charset="UTF-8"> <style type="text/css" media="only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)"> body { background-color: RGB(255,0,0); } </style> <script type="text/javascript"></script> </head> <body> The content </body> </html>

General Syntax

/* A sample style sheet */ @import url(base.css); // at-rule

h2 { // rule-set color: #666; font-weight: bold; }

CSS Rule Sets •  CSS rule sets

–  selector declara>on •  Example:

–  h1 { color: blue; } •  h1 = selector •  color: blue; = declara>on

Selectors

•  Element (h1) •  Class (.important) •  Class (h1.important) •  ID (#important) •  Contextual (h1 p) •  Pseudo (a:link)

Element

•  XHTML: <h1>Title</h1>!

•  Css: h1 {! color: RGB(255,0,0);!}!

Class •  XHTML:

<h1 class="tarkea">Otsikko</h1>!<p>Tässä tekstiä ja tämä <span class="tarkea">erityisen tärkeää tekstiä</span></p>!<p class="tarkea">Ja tämä vasta tärkeää onkin</p>!

•  Css: .tarkea {! color: RGB(255,0,0);!}!

Class •  Css:

h1.tarkea {! color: RGB(255,0,0);!}!

ID

•  XHTML: <h1 id="paaotsikko">Otsikko</h1>!

•  Css: #paaotsikko {! color: RGB(255,0,0);!}!

Contextual •  XHTML:

<ul>! <li>Porkkana</li>!</ul>!

•  Css: ul li{! color: RGB(255,0,0);!}!

•  This is different! •  h1, p{!

color: RGB(255,0,0);!}!

Pseudo •  Example:

<a href="http://www.tamk.fi/">TAMK</a>!!

a:link { color: red; }!a:visited { color: blue; }!a:active { color: lime; }!a:hover { color: green; }!

Font-‐family

•  sans-‐serif, example: Helve>ca •  serif, example: Times •  cursive, example: Zapf-‐Chancery •  fantasy, example: Impact •  monospace, example: Courier •  Example: –  font-‐family: verdana, arial, sans-‐serif

font-‐style, font-‐weight •  Font-‐style

–  normal (default), italic, oblique –  example:

•  font-‐style: italic;

•  Font-‐weight: –  normal, bold, bolder, lighter, 100, 200 ... 900 –  normal = 400 –  bold = 700 –  bolder and lighter

Lengths and Units

•  The value type for many CSS proper>es is specified as <length>.

•  Can be rela>ve or absolute •  Rela>ve units –  em – current font size (1 em) –  ex – x height of the current font (heigth of char x) –  px – pixels, considered as rela>ve since no fixed physical measure

•  Absolute units – mm, cm, in, pt, pc

font-‐size

•  And even more: –  font-size: x-small; /* absolute */ –  font-size: larger; /* relative */ –  font-size: 12pt; /* unit of length */ –  font-size: 80%; /* percentage */

Colors

color: red;

color: rgb(255,0,0);

color: #FF0000;

color: #F00;

// CSS3

rgba(0, 160, 255, 0.2)

Background •  Background color:

–  background-‐color: #C0C0C0; •  Background image:

–  background-‐image: url("marble.gif"); –  Repeat

•  repeat (default): repeat both direc>ons •  repeat-‐x: repeat horizontally •  repeat-‐y: repeat ver>cally •  no-‐repeat: no repeat

–  background-‐a@achment: fixed | scroll •  Is the image s>ll or does it move when scrolling

Background Image Posi>on background-position: right top; /* right upper-corner */

background-position: 100% 0%; /* right upper-corner */

background-position: 100%; /* right upper-corner */

background-position: center bottom;/* center bottom */

background-position: 50% 100%; /* center bottom */

background-position: 100%; /* right top */

background-position: 50% 10px; /* center 10 pixels from top */

Text Features

•  word-‐spacing •  le@er-‐spacing •  text-‐decora>on – underline – overline –  line-‐through – blink

Text Features •  ver>cal-‐align

–  baseline, middle, sub, super, text-‐top, text-‐bo@om, top, bo@om, prosenxluku

•  text-‐transform –  capitalize, uppercase, lowercase

•  text-‐align –  ley, right, center, jus>fy

•  text-‐indent •  line-‐height

CASCADE, SPECIFICITY AND INHERITANCE

Cascade // What now? h1 { background-color: rgb(100,100,100); } h1 { color: rgb(255,0,0); }

Cascade // And now? h1 { background-color: rgb(100,100,100); } h1 { background-color: rgb(255,0,0); }

Process of Resolu>on 1.  For a given property, find all declara>ons that apply to a

specific element. 2.  Sort the declara>ons according to their levels of

importance, and origins. –  !important statement –  origin? user-‐agent css, author css (link), user css

3.  Sort declara>ons with the same level of importance and origin by selector specificity. –  h@p://reference.sitepoint.com/css/specificity

4.  Finally, if declara>ons have the same level of importance, origin, and specificity, sort them by the order in which they’re specified; the last declara>on wins.

Inheritance •  Pass proper>es from parent to child •  CSS div { font-size: 20px; } •  HTML <div> <p> This <em>sentence</em> will have a 20px <a href="#">font-size</a>. </p> </div>

LAYOUT AND FORMATTING

XHTML Related CSS Elements

•  You can group XHTML – page using div and span elements

•  div and span elements do not do anything, unless they are connected to css

•  xhtml: –  <p>Text text text <span class="important">text text</span>. Text text text.</p>

•  CSS: –  span.important { color: RGB(255,0,0); }

span and div?

•  By using div, you can divide xhtml – page in to logical pieces. The posi>on of these are defined in CSS – Example: naviga>on, header, footer, contents

•  Span is used to give layout for text

span and div <div class="header">

<h1>Title</h1>

</div>

<div class="contents">

<p>Contents: <span

class="highlight">this is different</span></p>

</div>

<div class="footer">

<p>Copyright 2008</p>

</div>

Layout Basics

•  XHTML page is divided into “boxes” by using the div-‐element

•  Box consists of – Width – Padding – Border – Marginal

CSS Box Model

CSS Box Model p.leipateksti {

border: 1px solid black;

}



width: 50%;

}



padding: 20px;

}



margin: 20px;

}

Features •  Margins

–  margin-top –  margin-bottom –  margin-left –  margin-right –  All together: margin

•  Padding –  padding-‐top –  padding-‐bo@om –  padding-‐ley –  padding-‐right –  All together: padding

Features •  Borders

–  border-top-width –  border-bottom-width –  border-right-width –  border-left-width –  border-width –  border-color –  border-style (none, dotted, solid, double, groove, ridge, inset,

outset)

•  Combina>ons –  border-top –  border-right –  border-bottom –  border-left

•  All together –  border

Features

•  width •  height •  float (none, left, right)

Example h1 {

font-family: Arial, Helvetica, sans-serif;

color: RGB(0,0,255);

background-color: RGB(200,200,200);

border: 2px dotted RGB(0,0,0);

padding: 10px;

text-align: center;

}

Posi>oning

•  PosiJon property is used to define whether box is absolute, rela>ve, sta>c or fixed – staJc – default value –  relaJve – box can be offset (top, right, bo@om, ley)

– absolute – pulls the box out of normal flow, can be placed anywhere (top, right, bo@om, ley)

– fixed – like absolute, but when scrolling stays in the same place

<!DOCTYPE html> <html> <head> <>tle> Title </>tle> <meta charset="UTF-‐8"> <style type="text/css" media="screen"> #navigaJon { posiJon: absolute; top: 0; leT: 0; width: 200px; } #content { margin-‐leT: 200px; } </style> <script type="text/javascript"></script> </head>

<body>

<nav id="navigation">

<ul>

<li><a href="this.html">This</a></li>

<li><a href="that.html">That</a></li>

<li><a href="theOther.html">The Other</a></li>

</ul>

</nav>

<section id="content">

<h1>Title</h1>

<p>Text text.</p>

</section>

</body>

</html>

Floa>ng

•  Problem in previous example is that there is now way to determine when absolute box ends – How to put footer below these boxes?

•  Use floaJng box – Floa>ng a box will shiy it to the right or ley of a line, with surrounding content flowing around it.

HTML <nav id="navigation1">

<ul>




</ul>

</nav>

<nav id="navigation2">

<ul>




</ul>

</nav>

<section id="content">

<h1>Title</h1>

</section>

<footer>

<p>kk</p>

</footer>

CSS #navigation1 { border: 1px solid black; float: left; width: 200px; } #navigation2 { border: 1px solid black; float: right; width: 200px; } #content { border: 1px solid black; margin: 0 200px; } footer { border: 1px solid black; }

Result

Clear

•  If you don't want next box to wrap around the floa>ng objects, use clear –  clear: ley –  clear: right –  clear: both

•  Let's add –  footer { –  border: 1px solid black; –  clear: both; –  }

Result

Example: Layout using divs <html>

<head><title>Otsikko</title></head>

<body>

<!– whole page inside one div --> <div id="wholepage">

</div>

</body>

</html>

Example: Layout <html> <head><title>Otsikko</title></head> <body> <div id="wholepage"> <div id="header"> <!– Title --> </div> <div id="navigation">

<!– Navigation --> </div> <div id="contents"> <!– Contents --> </div>

<div id="footer">

<!– Footer --> </div> </div> </body> </html>

Example: Layout #wholepage

{

width: 100%;

background-color: RGB(255,255,255);

color: RGB(0,0,0);

border: 1px solid RGB(100,100,100);

}

!

!

Example: Layout #header { padding: 10px; background-color: RGB(220,220,220); border-bottom: 1px solid RGB(100,100,100); } #navigation { float: left; width: 160px; margin: 0; padding: 10px; }

!

Example: Layout #contents { margin-left: 200px; border-left: 1px solid RGB(100,100,100); padding: 10px; max-width: 600px; }

#footer { padding: 10px; color: RGB(100,100,100); background-color: RGB(220,220,220); border-top: 1px solid RGB(100,100,100); clear: both; }

!

Result

SOME CSS3 EXAMPLES

<!DOCTYPE html>

<html>

<head>

<title>

Title

</title>

<meta charset="UTF-8">

<style type="text/css" media="screen">

#roundCorners {

border: 5px solid #8b2;

background: #fc0;

padding: 20px;

border-radius: 0px 10px 30px 50px;

box-shadow: 15px 15px 3px 5px #999;

text-shadow: 2px 2px 2px rgba(0,0,0,0.2);

}

</style>

<script type="text/javascript"></script>

</head>

<body>

<section id="roundCorners">

The content

</section>

</body>

</html>

A@ribute selectors •  abbr[title] { border-bottom: 1px dotted #ccc }

•  input[type=text] { width: 200px; }

•  [this^=that] will match a the value of an attribute (“this”) that begins with something (“that”)

•  [this$=that] will match a the value of an attribute (“this”) that ends with something (“that”)

•  [this*=that] will match a the value of an attribute (“this”) that contains with something (“that”), be it in the beginning, middle, or end.

<!DOCTYPE html>

<html>

<head>

<title>

Title

</title>

<meta charset="UTF-8">

<style type="text/css" media="screen">

a:link {

transition: all .5s ease 0;

font-size: 1em;

color: hsl(36,50%,50%);

}

a:hover {

color: hsl(36,100%,50%);

font-size: 2em;

}

</style>

<script type="text/javascript"></script>

</head>

<body>

<section>

<a href="">The content</a>

</section>

</body>

</html>

#moldme {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -150px;

width: 300px;

height: 300px;

background: hsl(36,100%,50%);

// only in webkit (transform: is standard)

-webkit-transform: rotate(-10deg);

-webkit-transform: skew(20deg,10deg);

background: linear-gradient(orange, red);

}

CSS

Technology

Transcript of CSS