-
Notifications
You must be signed in to change notification settings - Fork 0
/
css_slides.Rmd
130 lines (94 loc) · 3.46 KB
/
css_slides.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
---
title: "Introduction to Cascading Style Sheets (CSS)"
author: "Rose McKeon"
date: "(June 12th 2019)"
subtitle: https://github.com/StirlingCodingClub/css
output:
beamer_presentation:
theme: "default"
colortheme: "default"
fonttheme: "default"
ioslides_presentation: default
slidy_presentation: default
header-includes:
- \usepackage{hyperref}
- \usepackage{tikz}
- \usepackage{caption}
colorlinks: true
linkcolor: blue
urlcolor: blue
---
```{r setup, include=FALSE}
library(knitr)
knitr::opts_chunk$set(echo = FALSE)
```
# What is CSS?
- CSS is a language that describes the *style* of a HTML document.
- It targets particular HTML **elements** and describes their visual properties.
- On it's own CSS doesn't do anything at all.
You'll need to know some basic HTML in order to understand how to use CSS.
# What is HTML?
Hyper Text Markup Language (HTML) is the language that creates Web pages. It describes their *structure*.
- A web page is made up of HTML **elements**
- Elements have names which are used to represent them with **tags**: `<html>`.
- Element tags define the type of content held within them to give HTML pages a structured hierarchy.
# Basic HTML
All HTML pages **must have** these elements:
```html
<html>
<head>
<title>A title</title>
<!-- settings and meta tags go here -->
</head>
<body>
<!-- content goes here -->
</body>
</html>
```
# HTML Tags
Most element tags wrap content to define where it starts and ends, so they have an opening tag like `<p>` and a closing tag like `</p>`.
```html
<h1>A heading</h1>
<p>A paragraph</p>
```
Sometimes tags have **attributes** which provide additional information about the element. For example, the link tag `<a>` (which stands for 'anchor') needs the **href** attribute to work.
```html
<a href="https://google.com">A link</a>
```
# HTML Tags
**Self-closing** tags don't wrap, these have closing slashes instead.
```html
<br /> <!-- a line break -->
<hr /> <!-- a horizontal rule -->
```
Again, sometimes these tags will have attributes. The image tag `<img>` needs the **src** attribute to work.
```html
<img src="https://tinyurl.com/y63hts5h" />
```
You can put all HTML tags directly in RMarkdown documents.
# How CSS and HTML work together
Using separate languages to describe style and structure allows their syntax to better fit their purpose. It also keeps web pages very flexible as different styles can be loaded to change how a page looks without altering it's markup.
- CSS **selectors** target HTML **elements**.
- Visual **properties** of targeted elements are declared in **declaration blocks**.
# How CSS and HTML work together
Here's how a paragraph looks in HTML:
```html
<p>A paragraph that says whatever...</p>
```
Here's a CSS declaration block that targets it:
```css
p {
font-size: 1em;
line-height: 1;
}
```
The selector `p` is followed by curly braces that contain the declarations. Each declaration states a visual property to change and has a coressponding value: `property: value;`
# HTML without CSS
Without CSS every webpage looks like a very boring plain text document.
# Let's make it pretty
- If you haven't already, clone this Git repository to get the example files to work with.
```
$ git clone git@github.com:StirlingCodingClub/css.git
```
- Open `html/example.html` in your web browser to see the plain example page for yourself.
- Follow the instructions in `css_notes.html` to find out how basic CSS can make this example page much more interesting.