fullstackpython.com/cascading-style-sheets.html at gh-pages · selvankj/fullstackpython.com · GitHub

History

301 lines (300 loc) · 29 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

<!DOCTYPE html>

<head>

<title>Cascading Style Sheets - Full Stack Python</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<p class="banner"><a href="https://www.kickstarter.com/projects/mikeckennedy/python-for-entrepreneurs-video-course" style="color: #fff">Use Python to build your side business with the Python for Entrepreneurs video course!</a></p>

</div>

</div> <a href="https://github.com/mattmakai/fullstackpython.com"><img style="position: absolute; top: 0; right: 0; border: 0;" src="/img/fork.png" alt="Fork me on GitHub"></a>

<span class="logo-title"><a href="https://www.fullstackpython.com/">Full Stack Python</a></span>

</div>

<!--<a href="/blog.html" class="submenu-item-first">Blog</a> |

<a href="/books.html" class="submenu-item">Books</a> | -->

<a href="/table-of-contents.html" class="submenu-item-first">All topics</a> |

<a href="/blog.html" class="submenu-item">Blog</a> |

<a href="/email.html" class="submenu-item">Newsletter</a> |

<a href="https://twitter.com/fullstackpython" class="submenu-item">@fullstackpython</a> |

<a href="https://www.facebook.com/fullstackpython" class="submenu-item">Facebook</a> |

<a href="https://github.com/mattmakai/fullstackpython.com/tree/gh-pages/source" class="submenu-item">Source</a>

</div> </div>

</div><div class="row">

<h1>Cascading Style Sheets (CSS)</h1>

<p>Cascading Style Sheet (CSS) files contain rules for how to display and

lay out the HTML content when it is rendered by a web browser.</p>

<h2>Why is CSS necessary?</h2>

<p>CSS separates the content contained in HTML files from how the content

should be displayed. It is important to separate the content from the rules

for how it should be rendered primarily because it is easier to reuse those

rules across many pages. CSS files are also much easier to maintain on large

projects than styles embedded within the HTML files.</p>

<h2>How is CSS retrieved from a web server?</h2>

<p>The HTML file sent by the web server contains a reference to the CSS file(s)

needed to render the content. The web browser requests the CSS file after the

HTML file as shown below in a screenshot captured of the Chrome Web Developer

Tools network traffic.</p>

<p>That request for the fsp.css file is made because the HTML file for Full

Stack Python contains a reference to <code>theme/css/fsp.css</code> which is shown

in the view source screenshot below.</p>

<h2>CSS preprocessors</h2>

<p>A CSS preprocessor compiles a processed language into plain CSS code. CSS

preprocessing languages add syntax such as variables, mixins and functions

to reduce code duplication. The additional syntax also makes it possible for

designers to use these basic programming constructs to write maintainable

front end code.</p>

<ul>

<li>

<p><a href="http://sass-lang.com/">Sass</a> is currently the favored preprocessor in

the design community. Sass is considered the most powerful CSS preprocessor

in terms of advanced language features.</p>

</li>

<li>

<p><a href="http://lesscss.org/">LESS</a> is right up there with Sass and has an ace up

its sleeve in that the <a href="http://getbootstrap.com/">Bootstrap Framework</a> is

written in LESS which brings up its popularity.</p>

</li>

<li>

<p><a href="http://learnboost.github.io/stylus/">Stylus</a> is often cited as the third

most popular CSS preprocessing language.</p>

</li>

</ul>

<h3>CSS preprocessor resources</h3>

<ul>

<li>

<p>The Advanced Guide to HTML and CSS book has a well-written chapter on

<a href="http://learn.shayhowe.com/advanced-html-css/preprocessors">preprocessors</a>.</p>

</li>

<li>

<p><a href="http://css-tricks.com/sass-vs-less/">Sass vs LESS</a> provides a short answer

on which framework to use then a longer more detailed response for those

interested in understanding the details.</p>

</li>

<li>

<p><a href="http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor">How to choose the right CSS preprocessor</a>

has a comparison of Sass, LESS and Stylus.</p>

</li>

<li>

<p><a href="http://css-tricks.com/musings-on-preprocessing/">Musings on CSS preprocessors</a>

contains helpful advice ranging from how to work with preprocessors in a

team environment to what apps you can use to aid your workflow.</p>

</li>

</ul>

<h2>CSS frameworks</h2>

<p>CSS frameworks provide structure and a boilerplate base for building a

web application's design.</p>

<ul>

<li>

<p><a href="http://getbootstrap.com/">Bootstrap</a></p>

</li>

<li>

<p><a href="http://foundation.zurb.com/">Foundation</a></p>

</li>

<li>

<p><a href="http://gumbyframework.com/">Gumby</a></p>

</li>

<li>

<p><a href="http://compass-style.org/">Compass</a></p>

</li>

<li>

<p><a href="http://www.profoundgrid.com/">Profound Grid</a></p>

</li>

<li>

<p><a href="http://www.getskeleton.com/">Skeleton</a></p>

</li>

<li>

<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></p>

</li>

</ul>

<h2>CSS resources</h2>

<ul>

<li>

<p><a href="https://github.com/dypsilon/frontend-dev-bookmarks">Frontend Development Bookmarks</a>

is one of the largest collections of valuable resources for frontend

learning both in CSS as well as JavaScript.</p>

</li>

<li>

<p><a href="https://github.com/vasanthk/css-refresher-notes">CSS refresher notes</a> is

incredibly helpful if you've learned CSS in bits and pieces along the way

and you now want to fill in the gaps in your knowledge.</p>

</li>

<li>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla Developer Network's CSS page</a>

contains an extensive set of resources, tutorials and demos for learning

CSS.</p>

</li>

<li>

<p><a href="http://alistapart.com/article/css-positioning-101">CSS Positioning 101</a>

is a detailed guide for learning how to do element positioning correctly

with CSS.</p>

</li>

<li>

<p><a href="http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf">CSS3 cheat sheet</a></p>

</li>

<li>

<p><a href="http://learnlayout.com/toc.html">Learn CSS layout</a> is a simple guide that

breaks CSS layout topics into chapters so you can learn each part one

at a time.</p>

</li>

<li>

<p><a href="https://developers.google.com/web/fundamentals/">Google's Web Fundamentals class</a>

shows how to create responsive designs and performant websites.</p>

</li>

<li>

<p><a href="http://programming.oreilly.com/2014/04/tailoring-css-for-performance.html">Tailoring CSS for performance</a>

is an interesting read since many developers do not consider the

implications of CSS complexity in browser rendering time.</p>

</li>

<li>

<p><a href="http://caniuse.com/">Can I Use...</a> is a compatibility table that shows

which versions of browsers implement specific CSS features.</p>

</li>

</ul>

<h2>CSS learning checklist</h2>

<ol>

<li>

<p>Create a simple HTML file with basic elements in it. Use the

<code>python -m SimpleHTTPServer</code> command to serve it up. Create a

<code><style></style></code> element within the <code><head></code> section in the HTML

markup. Play with CSS within that style element to change the look and

feel of the page.</p>

</li>

<li>

<p>Check out front end frameworks such as Bootstrap and Foundation and integrate

one of those into the HTML page.</p>

</li>

<li>

<p>Work through the framework's grid system, styling options and customization

so you get comfortable with how to use the framework.</p>

</li>

<li>

<p>Apply the framework to your web application and tweak the design until you

have something that looks much better than generic HTML.</p>

</li>

</ol>

<h3>Once your app is styled what do you need to learn next?</h3>

<p class="under-btn">How do I improve an app's user interface?</p> </div>

</div>

<p class="under-btn">How should I host and service static content files?</p> </div>

</div>

<p class="under-btn">How do I use JavaScript with my Python web application?</p> </div>

</div>

</div><div id="mc_embed_signup">

<h4>Sign up here to receive a monthly email with major updates to this site, tutorials and discount codes for Python books.</h4>

</div>

</div>

</form>

</div>

<p style="font-size: .8em; margin-top: 10px;">Searching for a complete, step-by-step deployment walkthrough? Learn more about <a href="http://www.deploypython.com/">The Full Stack Python Guide to Deployments book</a>.

</p>

</div>

</div><div class="panel panel-success">

<h3 class="panel-head">Email Updates</h3>

</div>

<h5>Sign up to get a monthly email with Python tutorials and major updates to this site.</h5>

</div>

</form>

</div>

</div><div class="panel panel-success" id="full-toc">

<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Table of Contents</a></h3>

</div>

<a href="/introduction.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>1. Introduction</a><a href="/learning-programming.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Learning Programming</a><a href="/why-use-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Why Use Python?</a><a href="/python-2-or-3.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Python 2 or 3?</a><a href="/enterprise-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Enterprise Python</a><a href="/best-python-resources.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Best Python Resources</a><a href="/best-python-videos.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Best Python Videos</a><a href="/development-environments.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>2. Development Environments</a><a href="/vim.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Vim</a><a href="/emacs.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Emacs</a><a href="/python-programming-language.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>3. Core Language</a><a href="/generators.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Generators</a><a href="/comprehensions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Comprehensions</a><a href="/web-development.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>4. Web Development</a><a href="/web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Frameworks</a><a href="/django.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Django</a><a href="/flask.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Flask</a><a href="/bottle.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Bottle</a><a href="/pyramid.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Pyramid</a><a href="/morepath.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Morepath</a><a href="/other-web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Other Web Frameworks</a><a href="/web-design.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Design</a><a href="/cascading-style-sheets.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Cascading Style Sheets (CSS)</a><a href="/javascript.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>JavaScript</a><a href="/websockets.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>WebSockets</a><a href="/template-engines.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Template Engines</a><a href="/web-application-security.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Application Security</a><a href="/static-site-generator.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Static Site Generators</a><a href="/jinja2.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Jinja2</a><a href="/data.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>5. Data</a><a href="/databases.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Relational Databases</a><a href="/no-sql-datastore.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>NoSQL Data Stores</a><a href="/object-relational-mappers-orms.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Object-relational Mappers</a><a href="/postgresql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>PostgreSQL</a><a href="/mysql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>MySQL</a><a href="/sqlite.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>SQLite</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/api-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>API Integration</a><a href="/api-creation.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>API Creation</a><a href="/deployment.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>7. Deployment</a><a href="/servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Servers</a><a href="/platform-as-a-service.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Platform-as-a-Service</a><a href="/operating-systems.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Operating Systems</a><a href="/web-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Servers</a><a href="/wsgi-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>WSGI Servers</a><a href="/source-control.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Source Control</a><a href="/application-dependencies.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Application Dependencies</a><a href="/static-content.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Static Content</a><a href="/task-queues.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Task Queues</a><a href="/configuration-management.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Configuration Management</a><a href="/continuous-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Continuous Integration</a><a href="/logging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Logging</a><a href="/monitoring.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Monitoring</a><a href="/web-analytics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Analytics</a><a href="/docker.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Docker</a><a href="/caching.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Caching</a><a href="/microservices.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Microservices</a><a href="/devops.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>DevOps</a><a href="/nginx.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Nginx</a><a href="/apache-http-server.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Apache HTTP Server</a><a href="/caddy.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Caddy</a><a href="/green-unicorn-gunicorn.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Green Unicorn (Gunicorn)</a><a href="/ubuntu.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Ubuntu</a><a href="/testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>8. Testing</a><a href="/unit-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Unit Testing</a><a href="/integration-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Integration Testing</a><a href="/code-metrics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Code Metrics</a><a href="/debugging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Debugging</a><a href="/bots.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Bots</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a><a href="/change-log.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Change Log</a><a href="/future-directions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Future Directions</a><a href="/about-author.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>About the Author</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a>

</div>

</div> <div class="panel panel-success">

<div class="panel-heading"><h3 class="panel-head">Cascading Style Sheets</h3></div>

Major updates are tweeted via

<a href="https://twitter.com/fullstackpython">@fullstackpython</a>.

<hr/>

Need more detailed tutorials than you see here?

<a href="http://www.deploypython.com/">Learn more about The Full Stack Python Guide to Deployments book.</a>

</div>

<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Chapters</a></h3>

</div>

<a href="/introduction.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>1. Introduction</a><a href="/development-environments.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>2. Development Environments</a><a href="/python-programming-language.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>3. Core Language</a><a href="/web-development.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>4. Web Development</a> <a href="/cascading-style-sheets.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif;'>» Cascading Style Sheets (CSS)</a>

<a href="/data.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>5. Data</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/deployment.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>7. Deployment</a><a href="/testing.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>8. Testing</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a>

</div>

</div></div></div>

<hr/>

</div>

<a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>

2016

</div>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-19910497-7', 'auto');

ga('send', 'pageview');

</script>

var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); }

</script>

</body>

</html>

fullstackpython.com/cascading-style-sheets.html at gh-pages · selvankj/fullstackpython.com · GitHub

Expand file tree

Breadcrumbs

cascading-style-sheets.html

Latest commit

History

Breadcrumbs

cascading-style-sheets.html

File metadata and controls