Skip to content

Commit cef5d54

Browse files
lee-ngolee-ngo
committed
More changes in HTML + CSS
1 parent 78a87d6 commit cef5d54

File tree

1 file changed

+54
-37
lines changed

1 file changed

+54
-37
lines changed

‎README.md

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,13 @@ Please set up the following:
2929
* Download the tutorial files on this page within the zip file
3030

3131
###### Download the files for this class:
32-
- Go to https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS
33-
- Click on the button on the right-hand side that says "Download ZIP"
34-
- Go to your downloads folder and double click on the .zip file to unzip it
35-
- IMPORTANT! leave all the individual files in the downloaded folder (if you would like to move it out of the downloads folder move the entire folder, not individual items)
36-
- From Atom: file > open, select the folder and then click "Open"
37-
- From Atom: if the file tree does not appear on the left hand View > Toggle Tree View -- this will show you the entire folder within Atom
38-
- *Now if you already know some of what we're talking about,* you're all set to poke around in the files -- index.html and CSS/style.css are the two files we will using.
39-
32+
1. Go to https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS
33+
2. Click on the button on the right-hand side that says "Download ZIP"
34+
3. Go to your downloads folder and double click on the .zip file to unzip it
35+
4. IMPORTANT! Leave all the individual files in the downloaded folder (if you would like to move it out of the downloads folder move the entire folder, not individual items)
36+
5. From Atom: file > open, select the folder and then click "Open"
37+
6. From Atom: if the file tree does not appear on the left hand View > Toggle Tree View -- this will show you the entire folder within Atom
38+
7. *Now if you already know some of what we're talking about,* you're all set to poke around in the files -- index.html and CSS/style.css are the two files we will using.
4039

4140
Patience! Setting up your computer takes time and can be tricky, especially across platforms.
4241

@@ -59,17 +58,17 @@ e.g. Element = <tag attribute=”blahblah”>content content</tag>
5958
Tags are used to mark up the beginning and end of an HTML element.
6059

6160
Almost everything in HTML needs to start and end with a tag
62-
Everything is wrapped like layers of an onionm `<opened>` and `</closed>`
63-
e.g. `<div>”Hello!”</div>`
64-
Note: not every tag is like this!
65-
66-
*Common Tags:*
67-
`<html></html>` designates document as HTML
68-
`<div></div>` notes a block element in the page
69-
`<a></a>` anchor, activates a link in the page
70-
`<head></head>` contains meta information
71-
`<body></body>` contains browser information
72-
`<span></span>` notes an inline element
61+
Everything is wrapped like layers of an onion, `<opened>` and `</closed>`
62+
- e.g. `<div>”Hello!”</div>`
63+
- *Note: not every tag is like this!*
64+
65+
Common Tags:
66+
- `<html></html>` designates document as HTML
67+
- `<div></div>` notes a block element in the page
68+
- `<a></a>` anchor, activates a link in the page
69+
- `<head></head>` contains meta information
70+
- `<body></body>` contains browser information
71+
- `<span></span>` notes an inline element
7372

7473
Irregular Tags:
7574
- `<img />` creates an image in the page
@@ -79,18 +78,6 @@ Irregular Tags:
7978
- `<input />` creates an input field
8079

8180
#### HTML Attributes:
82-
83-
84-
85-
#### HTML Elements:
86-
An element in HTML represents some kind of structure, generally and element
87-
consists of a start tag, perhaps some attributes, some content, and an end tag.
88-
89-
```html
90-
<p>This is an element, it consists of p tags and content.</p>
91-
```
92-
93-
#### HTML attributes:
9481
HTML attributes inform the browser on what to do with a tagged piece of content.
9582
Attributes generally appear as name-value pairs.
9683
```
@@ -102,19 +89,49 @@ The most common attributes are:
10289
- href=”” - hyperlink reference to an internal or external link
10390
- src=”” - source file to an image, video, etc.
10491
- style=”” - add some color, font, margins, etc.
105-
^ There’s a MUCH better way to do this via CSS - more on that later!
92+
- ^ *There’s a MUCH better way to do this via CSS - more on that later!*
10693

10794
How do we check elements for whether they're talking to the browser? Use the **inspect element** feature!
10895

96+
But... how do we make HTML... better?
97+
10998
## Overview of CSS
110-
- Specificity
111-
- id's vs Classes
112-
- syntax
11399

114-
####Specificity
115100
What Does CSS Stand for?
101+
- Cascading - prioritizing certain values over others
102+
- Style - focusing on layout, colors, fonts, etc.
103+
- Sheet - another name for the file we use here
104+
105+
The internet used to be ugly. Enter CSS - a consolidated way to make it prettier.
106+
107+
Three primary objects:
108+
- Elements: e.g. h1, div, body, a - default HTML (already reviewed)
109+
- IDs: everything that starts with a “#”
110+
- Classes: everything that starts with a “.”
111+
112+
Syntax of CSS:
113+
```
114+
h1 { // this is either an element, class, or ID
115+
font-size: 24px; // syntax is name: value;
116+
font-weight: bold;
117+
color: #000000; // hexadecimal, RGB, etc.
118+
}
119+
```
120+
Space doesn’t matter, but “onion” rules apply
121+
122+
#### What are IDs?
123+
IDs are attributes that are used only on one element ONLY and noted with a “#” symbol in CSS
124+
e.g.
125+
```
126+
HTML: <a id=”leesName”>Lee Ngo</a>
127+
CSS: #leesName { color: white; }
128+
```
129+
IDs are used to direct functions to unique elements in the HTML so that there’s no confusion
130+
131+
ex: clicking to a specific part of page
132+
116133

117-
####id's vs Classes
134+
#### Ids vs Classes
118135
Classes are used when you need to style multiple elements in a document, while
119136
id's are used to style specific elements on a page.
120137

0 commit comments

Comments
 (0)