Lecture - CSS

Adding stylesheets

Inline stylesheets

<p style="color:#6C9; text-align:center">
  Centered, blueish
</p>

Embedded stylesheets

<head>
  ...
  <style type="text/css">
    p { color: red; }
  </style>
  ...
</head>

External stylesheets

<head>
  ...
  <title>Page with style</title>
  <link rel="stylesheet" href="mystyle.css" />
  ...
</head>

Syntax

CSS Rules

selector { property: value; }

selector {
  property: value;
  property: value;
  property: value;
}

Example

h1 {
  color: #CDF;
  background-color: #9FF;
}

Get all h1-element and change the color to #CDF and background-color to #9FF

Selectors

CSS Rules

selector {
  property: value;
  property: value;
  property: value;
}

tag selector (type selector)
class selector
id selector
attribute selectors
pseudo-classes selectors

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors

Tag selectors (type selectors)

Single selector

h1 { property: value; }

An em element that is a descendant of an h1 element

h1 em { property: value; }

Example:

p em strong { property: value; }

 <p>
   This is an <em><strong>example</strong></em>.
   Another <strong>text</strong>.
 </p>

Class selectors

Single selector

.avatar { property: value; }

 <p class="avatar"> Selected </p>
 ...
 <p class="avatar"> Selected </p>
 ...
 <div class="active avatar"> Selected </div>
 ...
 <p> Not selected </p>

Combined selector

p.avatar { property: value; }

 <p class="avatar"> Selected </p>
 ...
 <p class="avatar"> Selected </p>
 ...
 <div class="active avatar"> Not selected </div>
 ...
 <p> Not selected </p>

ID selectors

Single selector

#content { property: value; }

 <div id="content">
   Selected
 </div>

 <div>
   Not selected
 </div>

Important: The ID value (above "content") must be unique on the page!

Attribute selectors

All elements with the attribute disabled

[disabled] { propery: value; }

All

[type='button'] { propery: value; }

All secure links

a[href^="https://"] {propery: value;}]

All .png-images

img[src$=".png"] {propery: value;}]

...

Selector	Selects
A E	E that is decendant of A
A > E	E that is a child of A
E:first-child	E that is first child
B + E	E that is next sibling of B

Grouping selectors

h1,h2,h3 { propery: value; }

p.red strong.hidden, #content p:first-line { propery: value; }

Pseudo class selectors

Hovering links

a:link { propery: value; }
a:visited { propery: value; }
a:focus { propery: value; }
a:hover { propery: value; }
a:active { propery: value; }

Example

div p:first-child {propery: value;}

 <div>
   <p>I am first child</p>
   <ul>
     <li>I am first child as well!</li>
     <li>Poor me... :(</li>
   </ul>
   <p>And me...</p>
 </div>

Specificity

Different selectors have higher specificity than others.

p#firstptag {color: yellow; } /* 101 */

p.content {color: green; }    /* 11 */

p {color: red; }              /* 1 */

p {color: blue; }             /* 1 + last */

Propery inheritance

Some properties are inheritanced by decendents

p { color: red; }

 <p>
   This text will be red. <em>This text as well!</em>
 </p>

Not all properties are inherited. Refer to the spec.

Readable CSS

#content p { font-size: 1.1em; color: #4D83A4; margin-left: 10px; }

#content {
  float: left;
  font-size: 1.6em;
}
  #content p {
    color: #4D83A4;
    font-size: 1.1em;
  }
     #content p:first-letter {
        font-size: 1.7em;
     }

#content
{
  font-size   : 1.6em;
  float       : left;
  margin-right: left;
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS

Comments

Multiline comments

/*  Layout
    Using: Two column floating layout
    Total width: 250px
*/

No single line // available

Order matters

<head>
  ...
  <link rel="stylesheet" href="reset.css" />

  <link rel="stylesheet" href="main.css" />
</head>


Fonts and text	Sizes, margins, fontfaces
Graphics	Colors, borders, shadows, effects, backgrounds
Layout	Boxes, positioning, layout models
Animations	Transformations, transitions

Media Queries

Responsive page?

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Introduction to web programming

(1DV525)

CSS

Licence for this work

You are free to

Content

From this...

...to this!

Styles on our pages

Adding stylesheets

Syntax

Selectors

Tag selectors (type selectors)

Class selectors

ID selectors

Attribute selectors

Relationship selectors

Grouping selectors

Pseudo class selectors

Specificity

Propery inheritance

Reference for HTML and CSS

Readable CSS

Comments

Order matters

Properties

Media Queries

CSS Frameworks

CSS Preprocessors

Why use CSS Preprocessors?

Which?