Beginning HTML & CSS 1

Notes from “Pages Web avec HTML5 et feuilles de style CSS 3 : S’initier


What is HTML and CSS

HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are two parts of the modern web framework. HTML gives structure and meaning to the elements on a webpage and CSS changes the way content is presented.

For example,

HTMLCSS
ParagraphThe colour of the text in the paragraph
TitleHow the title is centred
ImageBorder around the image
FontStyle of font
WebpageColour of the background

As a general rule, HTML will always represent the content and CSS will always represent the appearance of the content.

HTML terms

There are three basic terms in HTML; The element, the tag and the attribute.

The Element

An element defines what something is in the structure of the page. For instance a paragraph is an element, as is title, anchor, divider, span, etc…They are also enclosed in <> brackets so the elements in the previous would be,

ElementSymbol
Paragraph<p>
Title<h1>
Anchor<a>
Divider<div>
Span<span>

Tags

When elements are wrapped in <> then they are tags. You might have a title at the top of the page but the tag for that title is <h1>. They also normally come in pairs surrounding the object they represent. So if we use the elements from the table above we get,

ElementTagged element
Paragraph<p>These tags enclose a paragraph.</p>
Title<h1>These tags enclose a title.</h1>
Anchor<a>These tags enclose an anchor.</a>
Divider<div>These tags enclose a division.</div>
Span<span>These tags enclose a span.</span>

Above you can also see the closing tag has a / in it. <tag> is an opening tag </tag> a closing tag.

Attributes

Attributes give additional information about the content of an element. First comes the attribute name, then an equals sign and finally the attribute value.

ElementElement with attribute
Paragraph<p lang=”fr”>Language attribute with a value of French.</p>
Title<h1 class=”home_titles”>Class attribute with a value of home_titles.</h1>
Anchor<a href=”https://masonbee.nz”>Href attribute with a value of https://masonbee.nz.</a>
Divider<div style=”color: #ff0000″>Style attribute with a value of the colour red.</div>
Span<span hidden>Global attribute hidden. Note the lack of = and “”. It just hids the element.</span>

How an HTML page is structured

The HTML file is just a text file like that created by Gedit or Kate but instead of the file extension .txt it is given the extension .html to specify that it should be read as an HTML page.

All HTML pages have the <!DOCTYPE> declaration and the elements html, head and body.

The <!DOCTYPE​> declaration says what form of html will be used such as 4.01, or xhtml, etc…. See this page from W3C for a fuller list. If the type of html to be used is the latest (eg; 5) then the declaration is <!DOCTYPE html>. To look at a basic page,

<!DOCTYPE html> <!-- Declaration of document type -->
<html>          <!-- Start of html element-->
<head>          <!-- Start of head element-->
</head>         <!-- End of head element-->
<body>          <!-- Start of body element-->
</body>         <!-- End of body element-->
</html>         <!-- End of html element-->

Everything inside the <head></head> tags won’t be shown on the page. For instance the content in the <title></title> tag will only be shown on the browser top bar. What is seen on the page is everything in between the <body></body> tags. A slightly fuller document with a title, a character set chosen and some text would look more like this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>My first webpage</title>
</head>
<body>
  <p>Wow! That was easy.</p>
</body>
</html>

And where possible elements inside other elements should be nested for easier reading. It should also be noted that the meta tag does not have a closing tag. This is because some tags are self closing. Others are <hr> for horizontal rule or <br> for break.

CSS terms

In CSS there are also terms called selectors. properties and values.

Selectors

All elements on a web page can be styled and the selector chooses which ones will be. You might select all paragraphs and make the font size 28 pixels and color black or maybe just one paragraph with an id or class. Selectors are followed by {} braces which hold the styles to be applied to the selected elements.

 p {                  /* p element selector and opening brace*/
  font-size: 24px;    /* apply font-size with value 24px to element*/
  color: pink;        /* apply color pink to element*/
}                     /* closing brace */

Properties

After the selector comes the properties. In the above example the properties are font-size and color. They come in between the opening and closing braces and are followed by colon and then the value. Some common properties are,

PropertyDescription
color:Used to color text
text-align:Used to align text to left, right, centre or justify.
background-color:Used to give the background colour of the element.
font-size:Used to give the font size of the element.
font-weight:Used to give the font weight such as bold or normal.

Values

Having selected the element with the selector and chosen what property we then need to add the value such as brown or left or so on. Each property has certain values that can be applied to it. For instance text-align could have the values left, right, centre, or justify but not the value orange. So, using the above table of properties we have,

PropertyPossible values
color:A Hexadecimal colour such as #ffffff;
A RGB colour such as rgb(255, 0, 0);
A RGBA* such as rgba(255, 0, 0, 0.3);
A HSL Color such as hsl(120, 100%, 50%);
or a HSLA* color such as hsla(120, 100%, 50%, 0.3);
text-align:left;
right;
justify;
center;
background-color:A color value such as hexadecimal, RGB, RGBA, HSL, as HSLA.
transparent
initial
inherit
font-size:A pixel size such as 14px;
A percentage such as 50%; or,
medium;
xx-small;
x-small;
small;
large;
x-large;
xx-large;
smaller;
larger;
length such as 20px;
initial which sets the initial value for the property.
inherit where is inherits its value from the parent element.
font-weight:normal;
bold;
bolder;
lighter;
initial;
inherit;
*Note the A in RGBA and HSLA is a value of opacity and ranges from 0 (transparent) to 1 (opaque).

As you can see there are quite a few values and each ends in a ;.

How to use selectors

As said above selectors choose what elements on a web page are to be styled. The most common selectors are type, class and ID.

Type selector

Normally a selector will target an element by type. For instance if we want to target all the paragraph elements we would use the p type selector.

p {

/* everything between the brackets
will target all paragraphs as we
have used the p type selector. */

}

Class selector

A class selector allows you to choose the element to be styled based on the value of the class attribute. This allows you to make up a name such as firstPara so you can target a defined element instead of all of the type. Class selectors all have a point (.) in front of them. You declare in the HTML whether to use a class selector using class=”” in the element. For instance if we wanted to apply the class selector firstPara to a paragraph then in the HTMLwe would have,

<p class="firstPara"> Everything inside is now styled with the firstPara class.</p> <!-- First Paragraph -->
<p>This on is just a normal paragraph </p>                                          <!-- Second Paragraph -->
<p class="firstPara"> Everything inside is now styled with the firstPara class.</p> <!-- Third Paragraph -->
<h1 class="firstPara"> Everything inside is now styled with the firstPara class.</h1>

and in the CSS you might have something like,

.firstPara {
  text-align: center;
  color: red;
}

In the above example everything in the first paragraph would have centre aligned text that is red in colour and the second paragraph would be normal. However firstPara isn’t a good name for a class selector as it is only intuitively named if it is used on the first paragraph or for that case on a paragraph. A better class selector name might have been style1.

ID selector

ID selectors are even more accurate than class selectors and can only be used once on a page. And example of a good use of the ID selector might be to style the page title. Something that only appears once. ID selectors are preceded in CSS by a hash sign (#) in front of them. If we were to use the page title example the HTML might look something like this.

<h1 id="pagetitle"> Page Title </h1>
<h1> Normal Heading 1 </h1>
<p class="style1"> Paragraph </p>

And the CSS,

#pagetitle {
    font-size: 2em;
    colour: blue;
}

Linking HTML and CSS

There are three ways to apply CSS to an HTML page.

Inline CSS

The first is to write the CSS inline using the attribute style in the tag to be styled. For instance if we wanted to apply red text to a paragraph then we could write,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<p style="color: red;">Paragraph with red text.</p>

</body>
</html>

In general this is considered bad practice but sometimes there is just no way else to apply the style. This style would only be applied to the one paragraph though.

Style in head

The second is to use the <style> </style> tags in the head of the document. To repeat the example from above,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<style>
p {
	color: red;
}
</style>

<title></title>
</head>
<body>

<p>Paragraph with red text.</p>

</body>
</html>

The difference here is that the style would be applied to all the paragraphs in the document but only in that document. You couldn’t change the style here and have it change across multiple documents.

CSS Stylesheet

The third way is to reference a CSS stylesheet in the head of all your documents. This allows you to change the style in the stylesheet and have it applied to all the documents with the link in them. Now you have two documents though.

The HTML document

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" type="text/css" rel="stylesheet">
<title></title>
</head>
<body>
<p>Paragraph with red text.</p>
</body>
</html>

The Stylesheet

p {
	color: red;
}

In this case the stylesheet is called style.css and the link in the head of the HTML document points to it and gives it’s MIME type and the rel attribute which specifies the relationship between the document and the linked resource. In this case rel specifies stylesheet so it imports a stylesheet.

CSS Reset

A CSS reset stylesheet is a handy tool that should be placed above all other stylesheets in the document to give it precedence. It exists because all browsers have different ways of interpreting HTML. To quote Meyer Web,

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Eric Meyer

The original was produced around 2007 but the one in use today in millions of websites id version 2. It looks like this,

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

This allows us to develop a single CSS document without having to worry as much about how it will look across different browsers.

A far more complex alternative, but better in many cases, is Normalize.css. It is used in used by Twitter, TweetDeck, GitHub, Soundcloud, Guardian, Medium, GOV.UK, Bootstrap, HTML5 Boilerplate and many others.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

It requires a greater understanding of CSS and how you wish to present your own styles.

Testing your websites

It is important to test your websites across different browsers, on different platforms and in various sizes. What works on Chrome may not work on Firefox or the default browser in a Samsung S9.

Leave a comment