CSS main properties

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¶

let text_html = `<p class="text">
a sample text</p>`;

let text_css = `.text {
    font-family: times;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    color: darkolivegreen;
}
`;
await tools.sample_from_strings({html: text_html, css: text_css}, {start_with: '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

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

notes (1): a single CSS rule

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 (2): how to use fontawesome

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 (3): to import all font variants

for cosmetic reasons, the example is a bit simplified
in real pages, 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

await tools.sample_from_strings({
    html :
    `<div>
︙→ ⇀ « » ❯ × ∑ ∀α ∃ε ∈ x² © …
<div>`
    ,
    css : `body {
    color: red;
    font-size: 18px;
    padding: 20px;
}
`
}, {iframe_max_height: 80})

input-methods (1): cut-n-paste

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)

input-methods (2): using shortnames like <

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 …

await tools.sample_from_strings({
    html :
    `<div>
here's how to obtain an HTML tag:
&amp;lt;code&amp;gt; ... &amp;lt;/code&amp;gt;

<br>

most current characters also have a nickname,
here's an ellipsis: &amp;hellip;
</div>`
    ,
    css : `body {
    color: blue;
    font-size: 18px;
    padding: 20px;
}`
})

input-methods (3): using Unicode codepoints (optional)

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

note that the margin area is technically not part of the element !
it is just a space around it, that remains transparent (so colored by parent)

atomic properties¶

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

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

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

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

another example: margin and border

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

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

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

await 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 a single line

this is available for dealing with paddings, margins, borders, fonts, among others…

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

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

a useful site to pick colors: colorhunt.co

like always, many online sites can help pick a decent color palette
- personnally I like this one https://colorhunt.co/palette

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

an example with multiple shorthand properties

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

let shorthand_html = `<div>
  some <span>text</span>
with shorthand properties
</div>
`

let shorthand_css = `body{
    font: italic 10pt "Arial", serif;
}
div {
    border: 2px dashed blue;
    border-radius: 5px;
    padding: 20px 5px;
}
span {
    background-color: #ddf;
    padding: 2px 10px;
}
`
await tools.sample_from_strings({html: shorthand_html, css: shorthand_css}, {start_with: 'css'})

`background`¶

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


`background-color`	`background-image`
`background-repeat`	`background-position`
`background-size`	`background-attachment`
`background-origin`	`background-clip`

`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 only covers the padding area

`box-sizing` (optional)¶

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