CSS basics

tools = require('../js/tools'); tools.init()

purpose of style sheet¶

• keep contents and presentation separate

• allow to adapt same contents

  • to different media

  • to differents tastes (themes)

• generally written by people with different background and sensibility

  • engineers vs designers

what can be styled ?¶

• short answer : virtually everything

• let’s start with the obvious

text properties¶

• font-family : e.g. Times

• font-size : e.g. 12px

• font-weight : e.g. bold

• font-style : e.g. italic

• text-decoration : e.g. underline

• … and a whole many more

first example¶

• we create a hyperlink to google

• we attach a CSS fragment to change its appearance

• warning this changes all the <a> elements on that page

link_html = `<a href="https://www.google.com" target="_">
link to google
</a>
`
link_css = `/* change these properties
   on all <a> elements in the page */
a {
    font-family: times;
    font-size: large;
    color: red;
    padding: 10px;
    border: 1px solid green;
    border-radius: 8px;
    text-decoration: none;
}`
tools.sample_from_strings({html: link_html, css: link_css}, {start_with: "css"})

vocabulary: properties¶

• the names that appear on the left hand side of the : colon
  like color, font-family, …

• are called properties

• also listed in the Elements tab of the devel tools, in the Computed pane

• several hundreds of them

  • note that not all properties are relevant on all elements

how to locally override properties¶

to do that you need to go in this area of the Devel Tools