Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
ATLAS WEB Cascading Style Sheets
2
Pre-Style The first website (Look Familiar?):
3
Things Were a-Changin’
‘It has been a consistent source of delight for me over the past year to get to continually tell hordes (literally) of people who want to – strap yourselves in, here it comes – control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: “Sorry you’re screwed”’ - Marc Andreesen, Creator of the Mosaic Browser (via )
4
HTML-Based Styling Old methods now out-of-date (Don’t do these things) <font face=“arial” size=“3” color=“green”>Hello World</font> <body bgcolor=“red” background=“img/my-image.jpg”> <body> <table width=“800” height=“600”> </table>
5
HTML-Based Styling Old methods now out-of-date (Don’t do these things) <center>Centered Text</center> <b>Bold Text</b> <i>Italic Text</i>
6
HTML-Based Styling Labor Intensive Difficult to maintain and update
Slower to upload (Dialup, people) Slower to load in browser Style mixed with content
7
A Need for Something Better…
Style Sheets! Proposed by Robert Cailliau Editing Presentation Printing
8
Not a New Idea… William W. Tunnicliffe was credited by Charles F. Goldfarb (Creator of Standard Generalized Markup Language – precursor to HTML) with first proposing the idea of a separation of presentation and content in the late 1960s
9
Style Sheets in Web Browsers
Cascading HTML Style Sheets (CHSS) used by Opera Browser + Bert Bo’s Style Sheet Proposal = W3C Specification for CSS, 1996
10
Adoption Internet Explorer 5.0 in 2000 adopts CSS standards of W3C Netscape Navigator adopts CSS standards in 2001 New browsers emerging after this point launched with CSS support (Chrome, Firefox, Safari, etc.)
11
Game Changer Easier to build, maintain, and update
Faster to load / upload Compact, reusable code Easier to index
12
Cascading Style Sheets (CSS)
Layout Colors Fonts Animation Etc.
13
CSS Rules CSS allows designers to create rules that determine the way elements within HTML pages are presented Block Elements - <header>, <nav>, <article>, <h1>, <h2>, <p>. etc. Inline Elements - <img>, <em>, <span>, etc.
14
CSS Rules p{ font-family:arial; } p { Selector Property font-family: arial; Value |----Declaration----|
15
Linking CSS Use Code Editior (Sublime Text, Brackets, etc.)
File > Save As > file-name DOT CSS (file-name.css) CSS file saved in CSS folder (typically) <head> <link href=“css/file-name.css” rel=“stylesheet”> </head>
16
Internal vs. External CSS
CSS is technically separate for HTML Reusable code (within document) Less overall files External CSS truly separated from HTML Reusable code (across all documents) More files (usually only a few)
17
CSS Selectors Universal Selector *{ declaration } – All elements in a page (Not commonly used) Type Selector h1, h2, h3{ declaration } – Affects all of these elements on a page
18
CSS Selectors Class Selector .classname{ declaration } – Affects any element in HTML document with this class name. Multiple elements can have same class name within one HTML document ID Selector #idname{ declaration } – Affects any element in HTML document with this ID name. Only a single HTML element should have a specific ID name one HTML document
19
CSS Selectors Child Selector li>a{ declaration } – Would affect any <a> element directly within a <li> Descendant Selector li a{ declaration } – Would affect any <a> element anywhere within a <li>, even nested further down
20
Last Rule p{ color:green; } color:red; Color will be red
21
Specificity Type selector is more specific than Universal Selector
ID Selector more specific than Type Selector Class Selector more specific than ID Selector
22
Inheritance CSS Properties declared at a higher level will be inherited by lower level elements body{ font-family:arial; color:blue; } All other elements within body will inherit these properties
23
Color RGB Hexadecimal Color Names
24
RGB, RGBA Red, Green, Blue p{ background-color:rgb(255, 0, 0); }
Red, Green, Blue, Alpha background-color:rgba(255, 0, 0, .5);
25
Hexadecimal First two values = red Second two values = green
Third pair of values = blue No Alpha Channel p{ background-color:#ff0000; } 00 = Black ff = White 00,11,22,33,44,55,66,77,88,99,aa,bb,cc,dd,ee,ff
26
Color Names p{ } Usable in a pinch Not great for robust design
Background-color:red; } Usable in a pinch Not great for robust design Hex and RGB values present in all other design tools Color names are not
27
Attendance Question: Week 3
Give another real-world example of design and content being separate entities from one another yet are brought together within a final output. What are the pros and cons to this structure within the context of your example? (You example does not need to be about code) Post your question to Edmodo under “Lecture Attendance Question Week 3” Your answer should be approximately one paragraph in length.
Similar presentations
