Skip to content

Commit 4ba82de

Browse files
christinatruongchristinatruong
committed
Added in-slide CSS example, moved inline & internal css slides to extras.
1 parent 5800542 commit 4ba82de

2 files changed

Lines changed: 132 additions & 41 deletions

File tree

‎framework/extras-referencing-css.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>Ladies Learning Code: Intro to HTML & CSS</title>
7+
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
8+
<link rel="stylesheet" href="css/slideshow.css">
9+
10+
<!-- Theme-specific styles -->
11+
<link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
12+
<link rel="stylesheet" href="css/font-awesome.css">
13+
<link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
14+
<link rel="stylesheet" href="css/theme-llc.css">
15+
<link rel="shortcut icon" href="img/favicon.ico">
16+
17+
<!-- Workshop-specific styles -->
18+
<link rel="stylesheet" href="css/workshop.css">
19+
20+
<!-- Takes care of CSS3 prefixes! -->
21+
<script src="scripts/prefixfree.min.js"></script>
22+
</head>
23+
24+
<body>
25+
26+
<base target="_blank">
27+
28+
<main>
29+
<section class="slide" data-markdown>
30+
##Referencing CSS - Inline & Internal
31+
32+
There are three ways to include (otherwise known as *referencing*) CSS in an HTML page.
33+
34+
**INLINE** - can be added to any HTML element using the `style` *attribute*.
35+
36+
```
37+
&lt;p style=&quot;color: blue;&quot;&gt;I'm writing CSS!&lt;/p&gt;
38+
```
39+
40+
This technique should be avoided but it's good to know how it works in case you encounter it.
41+
42+
**INTERNAL** - uses `&lt;style&gt;` and is included in the `&lt;head&gt;` element.
43+
44+
```
45+
&lt;head&gt;
46+
&lt;title&gt;Page Title&lt;/title&gt;
47+
&lt;style&gt;
48+
h1 {
49+
font-size: 16px;
50+
}
51+
&lt;/style&gt;
52+
&lt;/head&gt;
53+
&lt;body&gt;
54+
&lt;p&gt;I'm still writing CSS!&lt;/p&gt;
55+
&lt;/body&gt;
56+
```
57+
58+
This method is preferred over *inline* css, however it is still inefficient because if you had multiple web pages, the style block and any revisions would have to be replicated on every single page.
59+
60+
The **external** method is most widely used. Refer back to the original presentation [here](../index.html#slide41).
61+
</section>
62+
</main><!-- cls main section -->
63+
64+
<footer>
65+
<p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
66+
<p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
67+
</footer>
68+
69+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
70+
<script src="scripts/slideshow.js"></script>
71+
72+
<!-- Uncomment the plugins you need -->
73+
<script src="scripts/plugins/css-edit.js"></script>
74+
<script src="scripts/plugins/css-snippets.js"></script>
75+
<script src="scripts/plugins/css-Ctrls.js"></script>
76+
<!-- <script src="plugins/code-highlight.js"></script>-->
77+
78+
<script src="scripts/plugins/markdown/marked.js"></script>
79+
<script src="scripts/plugins/markdown/markdown.js"></script>
80+
<script src="scripts/plugins/highlight/highlight.js"></script>
81+
<script>hljs.initHighlightingOnLoad();</script>
82+
83+
<!-- Prettify -->
84+
<script src="scripts/plugins/prettify.js"></script>
85+
<script src="scripts/plugins/lang-css.js"></script>
86+
<script src="scripts/plugins/prism.js"></script>
87+
88+
<script>
89+
var slideshow = new SlideShow();
90+
91+
// Grabs all the .snippet elements
92+
var snippets = document.querySelectorAll('.snippet');
93+
for(var i=0; i<snippets.length; i++) {
94+
new CSSSnippet(snippets[i]);
95+
}
96+
97+
// Opens all links in a new window
98+
var links = document.getElementsByTagName("a");
99+
for (var i = 0; i < links.length; i++) {
100+
var link = links[i];
101+
link.addEventListener(function() {
102+
window.open(this.href);
103+
});
104+
}
105+
106+
jQuery(document).ready(function(){
107+
jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
108+
});
109+
</script>
110+
</body>
111+
</html>

‎index.html‎

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -646,7 +646,7 @@ <h2>Adding images</h2>
646646
* http://slipsum.com/
647647
* and [many more](http://meettheipsums.com/)!
648648

649-
For your reference, [exercise3-about.html](project/examples/exercise3-about.html) can be found in your **examples** folder but only look if you get stuck! Try asking a mentor first!
649+
For reference, [exercise3-about.html](project/examples/exercise3-about.html) can be found in the **examples** folder but look only if you're stuck!
650650
</section>
651651

652652
<section class="slide title" data-markdown>
@@ -657,9 +657,9 @@ <h2>Adding images</h2>
657657
<section class="slide" data-markdown>
658658
##CSS & HTML
659659

660-
CSS is its own language and has different syntax rules than HTML but it the two are closely paired. CSS is made up of rules that refer to HTML elements and define what those elements should look like.
660+
CSS is a different language from HTMl and has its own syntax rules though the two are closely paired. CSS is made up of rules that refer to HTML elements and define what those elements should look like.
661661

662-
CSS separates content (i.e. text) from presentation (i.e. text colour) and helps to reduce redundancy and save time.
662+
CSS separates content (i.e. text) from presentation (i.e. text colour) and helps to reduce redundancy.
663663

664664
Older presentational HTML tags like `&lt;center>` and `&lt;font>` should no longer be used because CSS takes care of presentation and styles.
665665
</section>
@@ -684,7 +684,7 @@ <h2>Adding images</h2>
684684
</section>
685685

686686
<section class="slide">
687-
<h2>CSS Syntax</h2>
687+
<h2>CSS Terminology & Syntax</h2>
688688

689689
<pre><code>h1 {
690690
color: blue;
@@ -706,6 +706,18 @@ <h2>CSS Syntax</h2>
706706
</ul>
707707
</section>
708708

709+
<section class="slide">
710+
<h2>Write some CSS</h2>
711+
<p>Let's change the styles of the paragraphs on this slide using <code>font-size</code>.</p>
712+
713+
<textarea class="snippet">p {
714+
715+
}</textarea>
716+
<div class="example">
717+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt sint beatae dolor dolorum aliquid quis explicabo vitae numquam, quas illo dolore molestiae ratione, perferendis, deleniti nemo ea voluptatibus! Quibusdam.</p>
718+
</div>
719+
</section>
720+
709721
<section class="slide" data-markdown>
710722
##Descendant selectors
711723

@@ -724,9 +736,7 @@ <h2>CSS Syntax</h2>
724736
}
725737
```
726738

727-
Feel free to skip a level but be mindful of specificity rules. For example, `nav ul li a` would override `nav a` because it's more specific.
728-
729-
However, it’s usually easier to start with generic selectors and make them more specific, as needed, rather than starting with very specific selectors and adding extra markup or classes to try to override the styles.
739+
Feel free to skip a level but be mindful of specificity rules. For example, `nav ul li a` would override `nav a` because it's more specific. It’s usually easier to start with generic selectors and make them more specific, as needed, rather than starting with very specific selectors and adding extra markup or classes to try to override the styles.
730740
</section>
731741

732742
<section class="slide" data-markdown>
@@ -754,43 +764,13 @@ <h2>CSS Syntax</h2>
754764
</section>
755765

756766
<section class="slide" data-markdown>
757-
##Referencing CSS - Inline & Internal
758-
759-
There are three ways to include (otherwise known as *referencing*) CSS in an HTML page.
767+
##Referencing CSS
760768

761-
**INLINE** - can be added to any HTML element using the `style` *attribute*.
762-
763-
```
764-
&lt;p style=&quot;color: blue;&quot;&gt;I'm writing CSS!&lt;/p&gt;
765-
```
766-
767-
This technique should be avoided but it's good to know how it works in case you encounter it.
768-
769-
**INTERNAL** - uses `&lt;style&gt;` and is included in the `&lt;head&gt;` element.
770-
771-
```
772-
&lt;head&gt;
773-
&lt;title&gt;Page Title&lt;/title&gt;
774-
&lt;style&gt;
775-
h1 {
776-
font-size: 16px;
777-
}
778-
&lt;/style&gt;
779-
&lt;/head&gt;
780-
&lt;body&gt;
781-
&lt;p&gt;I'm still writing CSS!&lt;/p&gt;
782-
&lt;/body&gt;
783-
```
784-
785-
This method is preferred over *inline* css, however it is still inefficient because if you had multiple web pages, the style block and any revisions would have to be replicated on every single page.
786-
</section>
787-
788-
<section class="slide" data-markdown>
789-
##Referencing CSS - External
769+
There are three ways to include (otherwise known as *referencing*) CSS in an HTML page. Today we'll be using the **external** method. To read more about **inline** and **internal**, view [this extra resource](framework/extras-referencing-css.html).
790770

791-
The external method links to a separate style sheet file and is recommended because it separates the CSS from the HTML document. The style sheet is referenced in the `&lt;head&gt;` of the document. Only the CSS file needs to be updated rather than the CSS block on every single page.
771+
The external method links to a separate style sheet file and is recommended because it separates the CSS from the HTML document. Only the CSS file needs to be updated.
792772

793-
Referenced in the head element with a `&lt;link&gt;` tag and two **attributes**, `rel` (relationship) and `href`. Just like creating links, the value of the `href` points to the location of the style sheet.
773+
The style sheet is referenced in the `&lt;head&gt;` of the document with a `&lt;link&gt;` tag and two **attributes**, `rel` (relationship) and `href`. Just like links, the value of `href` points to the location of the style sheet.
794774

795775
Though it is not required, css files are often saved in a css folder for organization, so make sure the file path points to the appropriate directory.
796776

0 commit comments

Comments
 (0)