Presentation: styles and layout

We will also see different strategies to handle custom fonts, and transform our one-page into a multi-page website with navigation. Cascading Style Sheets were introduced to describe the visual aspect of a webpage. When CSS were introduced, browsers already had a bit of styles in the form of rules and font-sizes applied to headings, paragraphs, lists, etc.

Adding CSS

There are three ways to add styling to CSS content:

inline styles, such as, in the <body> of your HTML:

<h2 style="color: green;">My Title</h2>

It works but needs to be replicated for all elements with this property (all h2 have to be edited) and makes your HTML unreadable.

internal CSS, such as, in the <head> of your HTML:

<style>
h2 { color: green; }
</style>

This is better because you don’t have to repeat yourself that much, but it links your style to one page. In modern webdesign practices, we use only one stylesheet for all our pages, so that any update is replicated on all the pages of our website.

external CSS, i.e. a dedicated CSS file that contains all our styles. We basically link all our HTML pages to our single CSS file in the <head> of our site

<link href="myCSSFile.css" rel="stylesheet" type="text/css">

This is much better. We just need to copy/paster this line at the top of all the pages that are supposed to use our styles.

Now, let’s write some basic CSS. We’ll use the content from Alice to make a nice layout from scratch.

Codepen actually has two tabs, HTML and CSS. Though the link between both is omitted for brevity sake, your stylesheet is added to the HTML in the external CSS way.

http://codepen.io/louis-ev/pen/ygjydo ?result

CSS selectors

CSS is based on HTML and uses all existing HTML elements. Like HTML, it has a set number of predefined properties and values (such as `color: green;`). Like HTML, formatting with line breaks, indentations and spaces doesn’t matter for CSS. But indenting makes code easier to read so be sure to follow the following structure.

A CSS instruction is always written the same way, by surrounding it with curly brackets:

selector {
first-property: value;
second-property: value;
third-property: value;
}

So in the case of `color: green;`, color is a property and green is a value. That value can be of other types for the color property, but we’ll talk about that in a minute. We’ll focus on selectors first.

A selector is what will help us target the HTML element we want to style.

1. write the HTML tag

h2 {
color: cadetblue;
}

This will target ALL h2 in the page, wherever they are.

http://codepen.io/louis-ev/pen/zNmJGe

You can also be more specific and target only the <h2> in the <article> (so, not the author h2 that’s in the header). To do so, we just need to write both tags with a space in-between.

article h2 {
color: cadetblue;
}

http://codepen.io/louis-ev/pen/QdZVEQ

2. use an id

IDs are unique in a webpage. There can only be one ID in a page. It is however less and less used because of this reason.

If we wanted to style a single item like the author, we could target it this way:

in HTML:

<h2 id="author">Lewis Carroll</h2>

and in CSS:

#author {
color: blue;
}

This works but isn’t recommended. Instead, we prefer to…

3. use a class

Classes are the most widely used option to target elements in a webpage. They can be used only once in HTML (and so target a single element in CSS) or be used many times in a single document.

In our example, if we add a class to our paragraphs we can target them all at once (and not any other paragraphs in the document).

<p class="text-content">Alice was beginning to get very tired of sitting…</p>
<p class="text-content">So she was considering in her own mind…</p>
<p class="text-content">There was nothing so VERY remarkable…</p>

To target a class, just add a point before its name in CSS

.text-content {
font-size:14px;
}

http://codepen.io/louis-ev/pen/ygRxpG

This is what you need to know to get started. Now, if there are 3 different ways to target HTML elements, you might wonder then what happens if we write the following (with our HTML document) :

h2 {
color: cadetblue;
}
#author {
color: blue;
}

Let’s try and see what happens:

http://codepen.io/louis-ev/pen/oBaPyL

The author’s name has turned to blue. This is because an id is more specific than a tag selector, so the id overrides the tag. This topic may be confusing at first but practice helps understand. Also, the inspector is a fantastic tool to understand which rule wins.

The inspector tells us precisely which rule is the most specific by putting it at the top of the right panel. Neat!

CSS properties

Now that we’ve seen how to target tags, we will add some basic CSS to our book. If we want to target the body and give it a `background-color`:

body {
background-color: rebeccapurple;
}

http://codepen.io/louis-ev/pen/NdMqRp

This is a bit rough (though that color is lovely). Let’s get a color from a color picker and apply it.

body {
background-color: #f9f9f9;
}

http://codepen.io/louis-ev/pen/EZLjNO ?result

Now the text is a bit too close from the window’s edge. Lets give it some padding. We’ll also give all text on this page a lighter shade of black to reduce the contrast and improve the visual comfort.

http://codepen.io/louis-ev/pen/zNjGPy

We can see that the image isn’t aligned to the left edge of the text. This is because of <figure>, which is an element that has the following default styling on Chrome and Safari (and others) :

This is what `user agent stylesheet` means. This element, by default, has these attribute. So in order to prevent those styles to wreck our layout, we have to override them and remove all the margins (we can add them back if we need later).

figure {
margin: 0;
}

http://codepen.io/louis-ev/pen/JEvdpQ

So, we’ve seen that to edit the style of an HTML element, we just need to write the selector, and surround all its properties and values with curly brackets.

Lets go wild and add a bunch of selectors and properties. We’ll limit ourselves for now to:

color
background-color
width
margin
padding
line-height
font-size
text-align
font-style
font-weight

and, if you know how to use those properties already:

float
max-width
text-transform

If you need, you can find the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

You can experiment in the inspector as well.

Let’s meet in 15 minutes and see where you are.

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

Here’s an example of what can be made

http://codepen.io/louis-ev/pen/Qdrbra?result

Custom fonts

There are two strategies to load custom fonts:

load a local font file that you’ll send on your server, the same way that you do with images and .css files
load an external stylesheet that will download and set a few CSS properties to enable the use of custom fonts in your stylesheet

This second approach is the one used on Google Fonts by default. It has drawbacks (a request to a third party on page load) but it is simple to setup and works out of the box.

Select a typeface you’d like to import in your document on https://fonts.google.com/

Then, open the panel with your font and copy the line that describes a link to the font stylesheet, such as

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Paste this line right before your CSS <link> statement.

You’ll now be able to use this font anywhere in your CSS file, the same way you would if it was a system font:

font-family: ’Lato’, sans-serif;