<style>
.reveal {
font-size: 27px;
}
.reveal div.para {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
img[alt=drawing] { width: 200px; }
</style>
# COMP1010
## 5.6 Web Apps CSS
---
## CSS
* Cascading Style Sheets
* Describe the visual appearance of HTML pages
---
## Content
* We will learn some CSS.
* We will also learn more HTML.
* [Summary](https://coggle.it/diagram/YHessE-ADDai81Pb/t/css/665b7bc5a035ff8d29a9b12f7196087872a228f60c3387be3b90d34258a6c3bc)
---
## What Does CSS Look Like?
* Each `selector` has its list of property-value pairs inside curly braces.
* Each property-value pair is separated by a semi-colon (`;`).
* Each property is separated from its value by a colon (`:`).
```{css}
body {
background-color: lightgrey;
}
/* Make our paragraph red and centered */
p {
text-align: center;
color: red;
}
```
* Label a:
* selector
* property
* value
* comment
---
## Connecting CSS Documents to HTML
* CSS documents have the file extension `.css`.
* CSS documents need to be in the `static` folder.
* In the `head` of the `HTML`, create a `link` to your CSS document (example: `my_style.css`).
```{html}
<link rel="stylesheet" href="static/my_style.css">
```
* The equivalent PyHTML:
```{python}
response = html(
head(
link(rel="stylesheet", href="static/my_style.css")
)
)
```
---
## Try It Yourself
* You can adapt this example to change the look of any of your html tag sections.
* You can have as many selectors, and property-value pairs as you'd like.
---
## Important Note
* The static files are copied to your browser and then accessed from your HTML file.
* Sometimes, when you reload your page, the latest CSS file isn't copied over (if the browser thinks it already has it).
* So you may need to:
* Clear browsing history (like we do to clear cookies) **or**
* Ctrl-Shift-R to force a complete reload of the page
---
## Properties of Elements
* font (text only)
* size (text, lines, space)
* colour (text and background)
* alignment
* opacity
* padding
* border
* margin
We will cover some of these properties.
---
## Sizes
| Units | Units | Default for Paragraphs |
|---|---|---|
Pixels | px | 16px |
Em | em | 1em |
Percent | % | 100% |
<br>
* [More information about default heading settings](http://zuga.net/articles/html-heading-elements/).
---
## Colours
* There are several ways to define colours.
* Today we are going to look at 2 ways:
* [Name](https://www.w3schools.com/colors/colors_names.asp)
* RGB
---
## Colours: RGB
* **R**ed, **G**reen, **B**lue
* In RGB format, each colour is defined as:
* An amount of **r**ed (0-255)
* An amount of **g**reen (0-255)
* An amount of **b**lue (0-255)
* White: 255,255,255
* Black: 0,0,0
* In CSS, RGB is one way we can define colours. A colour property-value pair could look like this:
* `color:rgb(154, 175, 217)`
* [More information here](https://www.w3schools.com/css/css_colors_rgb.asp)
* A quick way to choose a single colour and find the RGB: Google: colour picker [or click here](https://www.google.com/search?q=colour+picker)
---
## Colours: Hex
* What is Hex?
* Not covered in this course.
* In short, in this context, Hex is used as a shorthand for RGB.
* I've found a colour I want to use, but only have the Hex value. Now what? [shortcut](https://www.rapidtables.com/convert/color/hex-to-rgb.html)
---
## Handy Properties
* Text:
* `font-size` ([a lot more detail](https://www.w3schools.com/css/css_font_size.asp))
* `text-align`
* `color`
* `font-family`
* Background:
* `background-color`
---
## Aside: Colour and Opacity
* Opacity separately (can be applied to images or text): `opacity:0.5`
* Opacity combined with a colour (changes the look of the colour): `background-color: rgba(255, 0, 0, 0.3)`
---
## Getting More Specific
* Classes (several things can be of the same class):
* `<p class="ex">` $\rightarrow$ `p.ex{}`
* Id (the id must be unique for each tag):
* `<p id="para1">` $\rightarrow$ `#para1{}`
---
## Document Sections (otherwise unspecified)
* `<div>`
---
## Padding, Margin, Border
* [Demo](https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel)
---
## Optional Extras: Laying Things Out
* We have already looked at HTML tables.
* Flexbox:
* [w3schools](https://www.w3schools.com/css/css3_flexbox_container.asp)
* [Flexbox Froggy](https://flexboxfroggy.com/): For laying things out flexibly horizontally and vertically.
* [Grid Garden](https://codepip.com/games/grid-garden/): Grid layout
---
## Demo
* Use CSS grid and other CSS features to improve the layout of Guess My Number.
---
## Resources
* If you're looking for colour schemes, I recommend sites such as [this one](https://paletton.com/). Or [this one](https://www.w3schools.com/colors/colors_palettes.asp)
* [Tutorial Republic: CSS](https://www.tutorialrepublic.com/css-tutorial/)
* [W3Schools: CSS](https://www.w3schools.com/css/default.asp)
---
{"metaMigratedAt":"2023-06-16T22:15:36.998Z","metaMigratedFrom":"YAML","title":"5.6 Web Apps CSS","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"969c3c3d-0ef4-4f08-b22a-2f2b8951224b\",\"add\":5135,\"del\":0}]"}