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

ミニテスト

• デスクトップPC (強く推薦) 又はノートPCで https://moo.sw.it.aoyama.ac.jp/ にログイン済み
• ナビゲーションは左に畳み、ブラウザは全画面に拡大
• もう片方のマシーンで電源を切る (ノートPCの場合、鞄に)
• 授業開始まで教科書、資料、筆箱、財布などを鞄に入れ、鞄は床に
• テスト終了後その場で待つ

Today's Schedule

• Minitest
• Last week's exercises
• CSS basics and syntax
• Font and color settings
• Length units
• Box model
• Today's exercises

Presentation of Teaching Staff

Assistant Professors (助教)

• Yoshiyuki SHOJI (莊司 慶行、総括)
• Motoki YATSU (谷津 元樹)
• Naoki YONEZAWA (米澤 直晃)

Teaching Assistants (TA)

• Nozomi KIKUCHI (菊池 のぞみ、Dürst 研 M2)
• Keita SUGIYAMA (杉山 敬太、Dürst 研 M2)
• Kōsuke KURIHARA (栗原 光祐、Dürst 研 M1)

Student Assistant (SA)

• Tsukasa SAWAURA (澤浦 司、Dürst 研 B4, temporarily)

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

• Download the document and change the extension to .html.
• Use the document Introduction to HTML as an example. Study it carefully.
• Use code, em, strong, abbr, pre,... elements wherever appropriate.
• Add the header and footer from the HTML document, and add a nav element with a table of contents.
• Properly indent your markup.
• Make sure you have at least as much markup as the Introduction to HTML document.
• Find out what other elements can go into the head element, and add 3 different ones with appropriate contents.
• Add translations to technical terms using the title attribute.
• The following elements should also be used: blockquote, ol
• Validate your document with the W3C nu validator. Use the desktop PC for validation.
  Caution: The validator will only detect syntactic errors. It will not tell you whether you have enough markup or not.
• Submit to Moodle

Last Week's Homework

• Review the contents of today's lecture, including Introduction to HTML and the lists of elements referenced therein
• Study the contents of Introduction to CSS
• On your notebook computer, install
  • Missing browsers
  • A powerful plain text editor

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)

• 1994: Håkon Wium Lie and Bert Bos start development
• Decemmber 1996: W3C publishes CSS 1 as a Recommendation
• April 1998: W3C publishes CSS 2 as a Recommendation
• Continuous active development in the W3C CSS Working Group
• Specification split into many modules at different levels and different stages (Working Draft (WD), Candidate Recommendation (CR), Recommendation (REC),…):
  • CSS Snapshot 2018 provides an overview
  • Full list of specifications
  • Full list of properties
  • To check browser support, use caniuse.com

What Makes CSS Special

• Simple syntax, error-tolerant
• Mainly for HTML, but also XML, SVG,…
• Graceful degradation
• Easy to combine different styles:
  Examples:
  • A stylesheet for the whole company
  • Stylesheets for different departments
  • Stylesheets for special kinds of Web pages
  • Style settings for specific Web pages
  • Style settings for parts of a page

How to Link a Stylesheet to a Web Page

• Web page and stylesheet are separate files (.html and .css)
• Each Web page has to indicate which stylesheet(s) it uses
• This is done using a link element inside the head element
• Example:
  <link rel="stylesheet" type="text/css" href='my_stylesheet.css'>
  

Example of a CSS Rule

a { color: blue; }

• a: Apply the declaration (part in {}) to all a elements
• color: Set the text color
• blue: The text color is blue

Basic Syntax of CSS

selector { property: value; }

• selector (セレクタ、選択子): Part of document where declarations are applied
• property (name) (プロパティ、特性 (名)): Kind of style declaration
• (property) value (値、特性値): Value of style declaration

Other Basic Properties

• font-family: specific font name(s) and/or serif (明朝など), sans-serif (ゴシックなど),…
• font-size: small, medium, large,…, absolute or relative size
• color: red, green, blue,…: Text color
• background-color: Background color
• text-align: left (左揃え), right (右揃え), center (中央そろえ), justify (両端揃え)

Grouping Selectors and Style Declarations

• If the declarations are the same, selectors can be grouped with ",":
  Example: p, blockquote { font-size: 12pt; }
• Several declarations can be combined in a declaration block:
  Example: p { color: navy; background-color: aqua; }
• Combining both groupings:
  Example: p, blockquote { color: navy; background-color: aqua; }

How to Write Readable CSS

Bad example:

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

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;
}

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

Color Specification

• Properties are color (for text,…), background-color (for background) and others
• Using color words: 16 basic colors: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red,
  blue, purple, teal, fuchsia, aqua
• Many more color names supported
• Using RGB values:
  • RGB: Red, Green , Blue are the three primary colors (三原色) additive light mixing
  • Each primary color is specified with one (0, 1,…, 9, A,…, F) or two (00-FF) hexadecimal digits
  • This is preceeded by a "#" character
  • Examples: #F00 (full R, no G or B → redfull R, no G or B → red), #00FFFF

Font Specification

• font-family: specific font name(s) and/or serif (明朝など), sans-serif (ゴシックなど),…
  (example: "Heisei Mincho W3", serif)
  Several fonts can be separated with commas, the first available font is used
• font-size: Size of font/text
• font-style: normal, italic (uses available fonts), oblique (calculated)
• font-weight: normal, bold, bolder, lighter, 100, 200,..., 900
  (fine settings may not be available)

Length Units in CSS

• Relative units (preferred):
  • em: height of upper-case "M"
  • ex: height of lower-case "x"
  • px: pixel
• Percentages
  Example: line-height: 120%; /* line height is 120% of font size */
  Example: margin-width: 10%; /* margin width is 10% of overall width */
• Absolute units (better avoid)
  • cm、mm
  • in (inch)、pt (points, 1/72 of an inch, widely used in printing industry)

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

• font-size: Font (text) size
• line-height: Line height, including interline space (行間)
• width
• height
• many other properties

The CSS Box Model (箱モデル)

Explanation of Box Model

(box model)

• Used for adding space and borders
• Space is a very important part of design
• Can be used both on block elements and inline elements
• From the inside outwards, there are the following things:
  • padding (padding-top, padding-right, padding-bottom, padding-left):
    only width
  • border (width (border-width), style (border-style), and color (border-color)
  • margin (margin-top, margin-right, margin-bottom, margin-left):
    only width
• Caution: border-style is initially none, has to be set to solid or so to actually see a border

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:

• border-color: red; /* same color for all four borders */
• border-color: red green; /* top/bottom are red, right/left green */
• border-color: red green blue; /* top red, right/left green, bottom blue */
• border-color: red green blue yellow; /* top red, right green, bottom blue, left yellow */

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

• When there are conflicting declarations, the later one wins
• This makes it possible to have compact stylesheets
• Example:

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

Style Inheritance (継承)

• Many CSS properties are inherited from parents to children in the HTML document structure
• Example: body { color: blue; }
  makes all text red
• This can be overwritten by a different declaration lower in the document structure
• Example: code { color: green; }
  means that code elements will no longer be blue
• Some properties are not inherited (E.g.: margin)

Combining Stylesheets

• A Web page can use several stylesheet links
  • The stylesheets are applied in order
  • Later declarations override earlier declarations
• Stylesheet import:スタイルシート (.css) で @import:
  • A stylesheet (.css) can import another stylesheet with @import
  • Example: @import url(http://www.example.org/styles/bluish.css)
  • @import rules must be before style rules, otherwise they are ignored
    
  • In case of conflicts, the importing stylesheet (later declaration) wins
• Application: Import general styles into a more specific stylesheet

How to Use Japanese in CSS

• We need to declare the character encoding
• Example:
@charset "UTF-8";
• This is not needed if the stylesheet is US-ASCII only
• This is always needed for UTF-8
• This rule goes at the very start of the stylesheet

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

• Images can be used e.g. as backgrounds
• For large images, it is best to do this with a link
  background: url(my_background.png);
• For our exercises, the result is limited to one file per exercise
• It is possible to convert a very small image to a data: URI
  (example online converter)
• When using images, make sure you have the right permissions
  (E.g. images on Operclipart are free to use)

Advanced CSS Examples

CSS Zen Garden (CSS の禅の楽園)

(Japanese translation no longer available)

CSS Validation

W3C の CSS Validation Service: https://jigsaw.w3.org/css-validator/#validate_by_upload

How to Work with CSS

• Have a look at list of properties
• Try to remember groups (e.g. grid-, scroll-) and important property names
• Use search efficiently: (parts of) property name + CSS,…
• Try out an example, understand the effect of the property
• Check possible property values and try them out
• Defaults and fallback behavior
• Inheritance (yes/no)
• Related properties (incl. shortcut properties)

Exercise 2a: A Stylesheet for Last Weeks' Documents

• Caution: If a declaration seems to have no effect, check the syntax with the validator (see below).
• Download the marked-up file about_CSS.html. Create a stylesheet named my_style.css, and link it
• Define the following styles:
  • Font size is 14pt for the text, and bigger (relative size!) for headings
  • Use the left 1/3 of the width for navigation, the right 2/3 for the contents
    (property hint: position: fixed)
  • Text uses a serif font, headings, headings use sans-serif fonts, code and pre use monospaced fonts
    (find a few nice fonts available on your PC, list them in the declaration, and end the list with a generic name)
  • Links, code, other inline elements and pre use specific foreground and background colors
  • Headings use margins and shadows, with larger shadows for major headings
  • Headers and footers use margins/borders/paddings to set them apart from the rest of the content.
  • Asides use the float property and margins/borders/paddings to set them apart from the rest of the content.
  • Tables use collapsed borders.
• Validate your CSS with the W3C CSS validator. Use the desktop PC for validation.
• Submit my_style.css to Moodle (deadline: today at 18:20; explicit submission no longer necessary).

Exercise 2b: A Stylesheet for Ruby Documentation

• Download three Ruby documentation .html files:
• Add a stylesheet link to my_rubydoc.css.
• Create your own stylesheet for Ruby documentation, named my_rubydoc.css.
• Make sure you create different styles for all class values in the file with class selectors.
• Make sure your style is exciting and personal, but usable for you.
• Use a very small image for list bullets or for some backgrounds
• Validate your CSS with the W3C CSS validator. Use the desktop PC for validation.
• Submit my_rubydoc.css to Moodle (deadline: Wednesday April 17, 22:00).

Homework

• Review the contents of today's lecture, including Introduction to CSS and the links in this handout
• Review the Ruby documentation used in exercise 2b
• On your notebook computer, install Ruby+Devkit 2.5.3-1 (x64):
  • Download the executable installer (rubyinstaller-devkit-2.5.3-1-x64.exe); this may take several minutes
  • Execute the installer by doubleclicking
  • Accept the licence, click Next
  • Select MSYS2 development toolchain 2018-10-21, click Next
  • Wait for installation to complete (a progress bar is shown; this will take several minutes)
  • Click Finish
  • Select 3, press Enter (text is output to a window; this may take several minutes)
  • press Enter
• On your notebook, update (or install) cygwin