Alice / 02

css/reset.css

css/style.css

@import url("reset.css");
@import url("variables.css");


@import url("reset.css");
@import url("variables.css");

/*
-----------------------------------------
CSS PROPERTIES & VALUES - QUICK REFERENCE
-----------------------------------------

CSS comments use /* and * / (without the space).

UNITS
px    = Pixels. Fixed CSS measurement.
%     = Percentage relative to another value,
        often the parent element.
em    = Relative to the element's font size
        (or parent's font size for font-size).
rem   = Relative to the root HTML font size.
vw    = 1% of the viewport width.
vh    = 1% of the viewport height.
ch    = Approximate width of the "0" character.

TYPOGRAPHY
font-family: Arial, sans-serif;
  Sets the typeface and fallback fonts.

font-size: 16px;
  Sets the size of the text.

font-weight: 400;
  Controls text weight.
  400 = Normal, 700 = Bold.
  Variable fonts may support values 100-900.

line-height: 1.5;
  Controls spacing between lines.
  1.5 means 1.5 times the font size.

letter-spacing: 2px;
  Controls spacing between characters.
  Negative values tighten spacing.

text-align: left;
  Aligns text: left, right, center, justify.

text-transform: uppercase;
  Changes appearance of text:
  uppercase, lowercase, capitalize, none.

COLOUR
color: #222222;
  Sets text colour.

background-color: #ffffff;
  Sets the background colour.

SPACING
margin: 20px;
  Space outside an element.

padding: 20px;
  Space inside an element.

margin-bottom: 20px;
  Adds space below an element.

WIDTH
width: 100%;
  Sets an element's width.

max-width: 800px;
  Limits how wide an element can become.

-----------------------------------------
*/


/* BODY - General page styling */
body {
  background-color: #ffffff;
  color: #222222;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 40px;
}

/* H1 - Main heading */
h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

/* H2 - Subheading */
h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 30px;
}

/* P - Paragraph text */
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0px;
  max-width: 650px;
  margin-bottom: 20px;
}

/*
WORKSHOP NAVIGATION — shared across the ten examples
These ordinary links open the neighbouring folder without JavaScript.
inline-block keeps the arrows beside the example number. Padding gives each
arrow a comfortable click area; currentColor follows this page's text colour.
The navigation stays in normal flow above the content, so it cannot cover it.
An outline makes keyboard focus visible. Unavailable directions are plain
spans, not links, so they cannot accidentally navigate or receive focus.
*/
.example-navigation {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 20px;
}
.example-navigation a,
.example-navigation .unavailable {
  display: inline-block;
  padding: 12px;
  font-size: 20px;
  color: inherit;
  text-decoration: none;
}
.example-navigation a:hover { text-decoration: underline; }
.example-navigation a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.example-navigation .unavailable { opacity: .35; }
.example-navigation .example-number { font-size: 12px; }

css/variables.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- Workshop links: each example still loads its own local CSS and JavaScript. -->
<nav class="example-navigation" aria-label="Workshop examples">
  <a href="../html-CSS01/index.html" aria-label="Previous example: 01" title="Previous example">←</a>
  <span class="example-number">02 / 10</span>
  <a href="../html-CSS03/index.html" aria-label="Next example: 03" title="Next example">→</a>
</nav>



<h1>Alice's Adventures in Wonderland</h1>

<h2>Down the Rabbit-Hole</h2>

<p>
  Alice was beginning to get very tired of sitting by her
  sister on the bank, and of having nothing to do: once or
  twice she had peeped into the book her sister was reading,
  but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures
  or conversations?"
</p>

<p>
  So she was considering in her own mind (as well as she
  could, for the hot day made her feel very sleepy and
  stupid), whether the pleasure of making a daisy-chain
  would be worth the trouble of getting up and picking
  the daisies, when suddenly a White Rabbit with pink
  eyes ran close by her.
</p>

<p>
  There was nothing so very remarkable in that; nor did
  Alice think it so very much out of the way to hear the
  Rabbit say to itself, "Oh dear! Oh dear! I shall be late!"
  (when she thought it over afterwards, it occurred to her
  that she ought to have wondered at this, but at the time
  it all seemed quite natural); but when the Rabbit actually
  took a watch out of its waistcoat-pocket, and looked at
  it, and then hurried on, Alice started to her feet.
</p>


</body>
</html>