microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

moving nav to top level

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-25 11:52:00 -08:00
parent 2922fd3eb3
commit 45a553fa14
5 changed files with 73 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
step1-01/css-demo/README.md
View File

@@ -20,17 +20,32 @@ CSS is always applied in `property: value` pairs, like `background: blue;` and a
CSS can be applied to HTML tags in three different ways.
1. Inline - Styles are applied directly to the HTML tag
- `<div style="background: blue; color: white;">Hello </div>`
- `<div style="background: blue; color: white;">Hello </div>`
2. Via a `<style>` tag in the HTML page
3. Through an externally loaded CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
### Targeting specific HTML tags
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "selectors", and they are just as important to learn as the properties/values themselves. Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. When selectors are combined with CSS styles, we call this a ruleset.
CSS rulesets take on the following form:
```css
selector1,
selector2 {
property1: value1;
property2: value2;
}
```
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
<img src="../../assets/css-syntax.png"/>
Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
```css
/* Targeting the entire page */

63
step1-01/css-demo/css-demo.css
View File

@@ -1,63 +0,0 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
/* body {
font: 1.2em sans-serif;
} */
/* h1 {
color: black;
background: #ababab;
margin-bottom: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
} */
/* span {
color: #004578;
} */
/* .tiles {
display: flex;
} */
/* .tiles img {
width: 100%;
} */
/* .tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
} */
/* div.links {
background: #004578;
} */
/* a {
color: white;
} */
/* a:hover {
color: #ccc;
} */
/* a ~ a {
display: block;
} */
/* .tiles > div:last-child {
margin-right: 0;
} */
/* #contact-form {
display: flex;
flex-direction: column;
} */
/* input[type='submit'] {
margin-top: 10px;
} */