CSS main properties

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

too many to be listed¶

• more than 100 properties defined in the standard (see full list here)

• we just mention the most obviously needed

text properties¶

text_html = `<p class="text">
a sample text</p>`;
text_css = `.text {
    font-family: times;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    color: darkolivegreen;
}
`;
tools.sample_from_strings({html: text_html, css: text_css})

many fonts available¶

• see for example a collection of google fonts

• note also some less traditional fonts

  • that come with usual symbols

  • see in particular fontawesome who offer a decent collection for free

the example below illustrates how to load and use them in your page

tools.sample_from_stem("../samples/15-font-demo")

notes on the fonts example (1)¶

• observe the single CSS rule here, that allows to apply the font to the whole document
  this is an example of inheritance

• btw, it is strongly recommended to avoid mixing fonts in a document

notes on the fonts example (2)¶

• also observe the import and use of fontawesome
  to display custom symbols before address and phone number, like

  <span class="fas fa-mobile-alt">

  that I found browsing the fontawesome catalog

• these symbols are more convenient than bitmap pictures
  in particular can be safely scaled / colorized using CSS

notes on the fonts example (3)¶

• for cosmetic reasons, the example is a bit simplified
  use something like this to import a font in all variants of bold/italic

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Raleway:200,200i,400,400i,500,500i,600,600i,700,700i">

Unicode characters¶

• also remember there are more than 150.000 characters defined in the Unicode standard; so without the need to switch to another font, you can just write things like these
  ︙→ ⇀ « » ❯ × ∑ ∀α ∃ε ∈ x² © …

• being part of a text, these can also be safely styled - i.e. scaled, coloured…
  as opposed, again, to using bitmap pictures

tools.sample_from_strings({
    html : `<div>
︙→ ⇀ « » ❯ × ∑ ∀α ∃ε ∈ x² © …
<div>`
    ,
    css : `div {
    color:blue;
    background-color: gray;
    font-size: 20px;
    display: flex;
    justify-content: center;
    padding: 20px;
}`}, {
  start_with: 'css'
})

Unicode - the easy way¶

if you need to insert e.g. the ℃ symbol, you can do it several ways :

easiest way : just cut-and-paste it right into the html as-is (provided that your html file is utf8-encoded)

Unicode - shortnames¶

some characters can be inserted with the &...; notation using nicknames, like e.g.

• < for < and > for >
  sometimes useful to actually insert brackets like in <code>

•   for a non-breaking space which is more explicit/readable

• … for ellipsis …

Unicode - the less easy way (advanced)¶

each Unicode character has a unique codepoint
you can use that in a pure-ASCII source, and write either

• ℃ (decimal) or

• ℃ the x stands for hexa

the box model¶

so much about fonts and text, now for something completely different:

each visible element can be styled according to the box model, as shown in the browser devel tools

atomic properties (1)¶

each side (top, right, bottom, left) of the box has its own individual properties
here e.g. we illustrate this with padding and border

click on Open in new window and use inspector on the <p> element

box1_html = `<p class="box1">
a box
</p>`

box1_css = `p.box1 {
    font-size: x-large;
    background-color: #ccc;

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 40px;

    border-bottom-width: 5px;
    border-bottom-color: black;
    border-bottom-style: solid;
}`

tools.sample_from_strings({html: box1_html, css: box1_css}, { start_with: 'css' })

atomic properties (2)¶

again with also margin and border-radius - nothing really new, but you can see the combinations are likely to be numerous ...

box2_html = `<p class="box2">
a second box
</p>`

box2_css = `p.box2 {
    font-size: x-large;

    background-color: #ccc;

    padding-left: 40px;
    padding-top: 10px;

    margin-left: 20px;
    margin-top: 30px;

    border-top-width: 5px;
    border-top-color: black;
    border-top-style: solid;

    border-left-width: 10px;
    border-left-color: red;
    border-left-style: solid;

    border-top-left-radius: 5px;
}`

tools.sample_from_strings({html: box2_html, css: box2_css}, { start_with: 'css' })

shorthand properties¶

of course this can become quite tedious, so there also are so-called shorthand properties
that allow to set several atomic properties in one line
for dealing with paddings, margins, borders and fonts, among others

box-related shorthands order¶

one trick is to remember this figure

• padding: 10px 20px 30px 40px will assign the 4 padding properties in the order above

• padding: 10px will set all 4 padding properties

• margin: 10px 20px will set top and bottom to 10px, and both sides to 20px

more shorthands¶

same kind of shorthands are available for

• font: xxx see details here

• border: xxx see details here

• for a more complete list, see this page on MDN

shorthand example¶

use the inspector from the devel tools to check the individual properties of the <p> elt, e.g. the padding

shorthand_html = `<p class="shorthand1">
shorthand properties
</p>
`

shorthand_css = `p.shorthand1 {
    font: italic bold 20pt Arial, sans-serif;
    margin: 40px;
    padding: 30px 90px;
    border: 2px solid green;
    border-radius: 10px;
}`;
tools.sample_from_strings({html: shorthand_html, css: shorthand_css}, {start_with: 'css'})

unit lengths¶

a great many deal of units are available to express lengths - see more details on this page , e.g. :

• 10px

• 1in, 2.54cm, 25mm

• 20pt (1pt = 1/72 inch)

• 2em, 1ex, 20ch, relative to current font size

• 80% typically for width and height, relative to parent element

• 90vh means 90% of the viewport height - try it out ! and there is vw for the viewport width

colors¶

several formats are supported to describe a color :

• common colors by name, like red (see full list)

• RGB components like #8000ff that means

  • red = 0x80 = 128, green = 0x00 = 0, blue = 0xff = 255

• same in decimal - the recommended way:

  • rgb(128 0 255)

• opacity (in the [0-1.] range can be given as a fourth argument

  • rgb(128 0 255 / 20%) will be only 20% opaque, i.e. almost transparent

you can read more on this on css-tricks

colors: online resources¶

• like always, many online sites can help pick a decent color palette

  • personnally I like this one https://colorhunt.co/palette

background¶

there are 8 elementary properties that make an element’s background

• background-image

• background-position

• background-size

• background-repeat

• background-attachment

• background-origin

• background-clip

• background-color

background shorthand¶

most often this is set through a unique shorthand property background

https://css-tricks.com/almanac/properties/b/background/

also note that background

• does cover the padding area

• but not the margin area

• that is thus essentially transparent

• and styled by parent

background and margins (demo)¶

background_html = `<div>
  <section>
      <h1> a title </h1>
      <p> paragraph </p>
   </section>
</div>
`

background_css = `* {
    border: 1px solid red;
}
div {
    background: url(_static/texture.png);
    margin: 50px;
}
section {
    margin: 20px;
    padding: 30px;
    background: orange;
}
h1, p {
    padding: 8px;
    background-color: yellow;
}
h1 {
    margin-bottom: 40px;
}
p {
    margin-top: 20px;
}
`

tools.sample_from_strings({html: background_html, css: background_css})

background - demo explained¶

box-sizing¶

the box-sizing property affects the way width and height properties are computed:

• box-sizing: content-box : only take content into account

• box-sizing: border-box : content + padding + border

(note that margins are always excluded)

not often needed, but typical use case is

• you want a given component to take 500px in total

• so the borders and paddings push content inside

• then use box-sizing: border-box

see also https://css-tricks.com/box-sizing/ that has a live demo, as well as https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#browser_compatibility