Controlling Appearance with CSS

(CSS による見栄えの指定)

2nd lecture, April 15, 2019

Projects in Information Technology II

Martin J. Dürst


© 2005-19 Martin J. Dürst 青山学院大学



Today's Schedule


Presentation of Teaching Staff

Assistant Professors (助教)

Teaching Assistants (TA)

Student Assistant (SA)


Last Week's Exercise:
Mark up the Document Introduction to CSS


Last Week's Homework


Separation of Structure and Styling

6 reasons why styling should be separate from structure:

  1. Style reuse for many Web pages
  2. Simpler and cleaner Web page source
  3. Less data to download
  4. Easier to change styling
  5. Easier division of labor between designers and authors or programmers
  6. Separate style sheets for screen display, print, PCs, mobile phones, reading alound,...

Web page structure is defined with HTML

Web page styling uses CSS


History of CSS

(Cascading Style Sheets)


What Makes CSS Special


How to Link a Stylesheet to a Web Page


Example of a CSS Rule

a { color: blue; }


Basic Syntax of CSS

selector { property: value; }


Other Basic Properties


Grouping Selectors and Style Declarations


How to Write Readable CSS

Bad example:


Better example:

p, blockquote { color: navy; background-color: aqua; text-align: justify; }

Even better example:

p, blockquote {
    color: navy;
    background-color: aqua;
    text-align: justify;

Each rule on a separate line
No space before, but space after ",", ":", ";"
Spaces around "{" and before "}"


Color Specification


Font Specification


Length Units in CSS


Examples of Length Units:
20pt, 1.2em, 150%

Examples of length units: 20pt, 1.2em, 150%

Examples of length units: 20pt, 1.2em, 150%

Shown above: Using font-size declarations with different base sizes


Properties Using Length Units


The CSS Box Model (箱モデル)

箱モデルの図: 外側は margin、その内側に border、その内側 (文書などに一番近いところに) padding


Explanation of Box Model

(box model)


Setting Multiple Values: Clockwise Rule

It is a lot of work to set all border properties individually (e.g. border-top-color,…)

The border-color property allows many different settings:

Same for border-style, border-width, padding, margin


Setting Several Properties at Once

How to set border-top-width, border-top-style, and border-top-colorall at once:

border-top: 3pt solid red;

Same for border-right, border-bottom, border-left

The border property allows to set all four edges the same

Caution: The order is always width, style, color

There are many other properties, e.g. font (see spec), that work in a similar way

Such properties are called shortcut properties


Conflicting Declarations

   border:              3pt solid red;
   border-top-color:    blue;
   border-bottom-style: dashed;
   border-right-width:  10pt;


Style Inheritance (継承)


Combining Stylesheets


How to Use Japanese in CSS


Adding Content

Application: Adding "Section: " to section titles

Selector: target:before or target:after

Property and value: content: "Section: ";

Specific example: h3:before { content: "Section: "; }

Also possible to add counters and attribute values


Using Images in CSS


Advanced CSS Examples

CSS Zen Garden (CSS の禅の楽園)

(Japanese translation no longer available)


CSS Validation

W3C の CSS Validation Service:


How to Work with CSS


Exercise 2a: A Stylesheet for Last Weeks' Documents


Exercise 2b: A Stylesheet for Ruby Documentation