Skip to content

Commit cedf6ac

Browse files
mattmakaimattmakai
committed
working on css page
1 parent 6cf6f0d commit cedf6ac

File tree

3 files changed

+29
-23
lines changed

3 files changed

+29
-23
lines changed

‎cascading-style-sheets.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,19 @@ <h1>Cascading Style Sheets (CSS)</h1>
4242
<p>Cascading Style Sheet (CSS) files contain rules for how to display and
4343
lay out the HTML content when it is rendered by a web browser.</p>
4444
<h2>Why is CSS necessary?</h2>
45-
<p>CSS separates content contained in the HTML file from how the content
46-
should be displayed. That separation between content and how to display it
47-
enables devices to render the content differently based on factors such as
48-
screen size. </p>
45+
<p>CSS separates the content contained in HTML files from how the content
46+
should be displayed. It is important to separate the content from the rules
47+
for how it should be rendered primarily because it is easier to reuse those
48+
rules across many pages. CSS files are also much easier to maintain on large
49+
projects than styles embedded within the HTML files.</p>
50+
<h2>Responsive design</h2>
51+
<p>Separating the content from the rules for how to display the content allows
52+
devices to render the output differently based on factors such as screen size
53+
and device type. Displaying content differently based on varying screen
54+
attributes is often called <em>responsive design</em>. The responsiveness is
55+
accomplished by implementing
56+
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>
57+
in the CSS. </p>
4958
<p>For example, a mobile device does not have as much space to display a
5059
navigation bar on the side of a page so it is often pushed down
5160
below the main content. The
@@ -62,12 +71,6 @@ <h2>How is CSS retrieved from a web server?</h2>
6271
Stack Python contains a reference to <code>theme/css/fsp.css</code> which is shown
6372
in the view source screenshot below.</p>
6473
<p><img src="theme/img/fsp-css-source.jpg" width="100%" alt="View source screenshot for the fsp.css file in index.html." class="technical-diagram" /></p>
65-
<h2>Responsive design</h2>
66-
<p>Responsive design is an approach for creating CSS that lays out content
67-
differently based on screen attributes. The responsiveness is accomplished
68-
by implementing
69-
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>
70-
in the CSS. </p>
7174
<h2>CSS preprocessors</h2>
7275
<p>A CSS preprocessor compiles a processed language into plain CSS code. CSS
7376
preprocessing languages add syntax such as variables, mixins and functions

‎feeds/all.atom.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-07-23T15:10:12Z</updated></feed>
2+
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-07-24T09:50:38Z</updated></feed>

‎source/content/pages/05-client-side/0501-css.markdown‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,21 @@ lay out the HTML content when it is rendered by a web browser.
2222

2323

2424
## Why is CSS necessary?
25-
CSS separates content contained in the HTML file from how the content
26-
should be displayed. That separation between content and how to display it
27-
enables devices to render the content differently based on factors such as
28-
screen size.
25+
CSS separates the content contained in HTML files from how the content
26+
should be displayed. It is important to separate the content from the rules
27+
for how it should be rendered primarily because it is easier to reuse those
28+
rules across many pages. CSS files are also much easier to maintain on large
29+
projects than styles embedded within the HTML files.
30+
31+
32+
## Responsive design
33+
Separating the content from the rules for how to display the content allows
34+
devices to render the output differently based on factors such as screen size
35+
and device type. Displaying content differently based on varying screen
36+
attributes is often called *responsive design*. The responsiveness is
37+
accomplished by implementing
38+
[media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
39+
in the CSS.
2940

3041
For example, a mobile device does not have as much space to display a
3142
navigation bar on the side of a page so it is often pushed down
@@ -50,14 +61,6 @@ in the view source screenshot below.
5061
<img src="theme/img/fsp-css-source.jpg" width="100%" alt="View source screenshot for the fsp.css file in index.html." class="technical-diagram" />
5162

5263

53-
## Responsive design
54-
Responsive design is an approach for creating CSS that lays out content
55-
differently based on screen attributes. The responsiveness is accomplished
56-
by implementing
57-
[media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
58-
in the CSS.
59-
60-
6164
## CSS preprocessors
6265
A CSS preprocessor compiles a processed language into plain CSS code. CSS
6366
preprocessing languages add syntax such as variables, mixins and functions

0 commit comments

Comments
 (0)