css crash course
DESCRIPTION
CSS Crash Course. By Daniel D'Agostino First drafted: 19 th June 2007 Written on: 19 th October 2008. Part 1. Introduction to CSS. What is CSS/Why CSS?. A language complementary to HTML Separation of structure (HTML) and style (CSS) Centralisation of style in one file - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/1.jpg)
CSS Crash Course
By Daniel D'Agostino
First drafted: 19th June 2007
Written on: 19th October 2008
![Page 2: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/2.jpg)
Part 1
Introduction to CSS
![Page 3: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/3.jpg)
What is CSS/Why CSS?
A language complementary to HTML
Separation of structure (HTML) and style (CSS)
Centralisation of style in one file
modifying one declaration can affect the whole site Allows allocating style to HTML elements defined by
complex relationships
e.g. A list in a list Note: Like HTML, different browsers interpret CSS
differently
![Page 4: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/4.jpg)
Links
What can you do with CSS? http://meyerweb.com/eric/css/edge/ http://www.csszengarden.com/
Good reference material http://www.w3schools.com/css/ http://glish.com/css http://www.blooberry.com/indexdot/css/
![Page 5: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/5.jpg)
Kickstart: The HTML side
1.Create a basic HTML file with <head>, <body> etc and some basic content to test with
2.Add the following to the <head> section of your HTML page:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Remember to close with /> if you are using XHTML!
![Page 6: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/6.jpg)
Kickstart: The CSS side
1. Create an empty text file called style.css
2. Add the following in the CSS file:
body
{
background-color:#FF0000;
}
Your page background should become red (equivalent to <body bgcolor=”#FF0000”>)
![Page 7: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/7.jpg)
CSS Syntax explained
body
{
background-color:#FF0000;
}
HTML element being designed
property
subproperty
valueproperties of an element are listed between curly brackets
![Page 8: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/8.jpg)
CSS Colours explained
3 types of colour values: hex values e.g. #FFFFFF
shorthand: #xyz == #xxyyzz
RGB values e.g. rgb(255, 255, 255) colour names e.g. white
To set: foreground (text) colour use color: background colour use background-color:
![Page 9: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/9.jpg)
More CSS examples
background-color:#000000; color:#FFFFFF; text-decoration:underline; font-weight:bold; font-style:italic; margin-left:5px; padding-right:10%;
![Page 10: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/10.jpg)
CSS property shorthand
Consider: font-weight:bold; font-style:italic;
...these are both subproperties of font.
Shorthand equivalent: font: bold italic;
![Page 11: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/11.jpg)
CSS Text Formatting
Examples: color:black;
font-weight:bold;
font-style:italic;
text-decoration:underline;
text-align:center;
font-family:Arial;
font-size:18px;
References: http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/css/css_text.asp
![Page 12: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/12.jpg)
About Fonts
Try to use cross-platform fonts (e.g. Arial) so that site can look the same on different operating systems
You can define a list of fonts to use... if the first one is not found, the next one in the list is used
e.g. font-family: Verdana, Arial, Helvetica
monospace is a family of fixed-width fonts serif vs sans-serif
e.g. Times New Roman vs Arial
![Page 13: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/13.jpg)
CSS Borders
border
left right top bottom
widthcolorstyle
widthcolorstyle
widthcolorstyle
widthcolorstyle
![Page 14: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/14.jpg)
CSS Borders explained
Define only one property of one border: border-bottom-width:3px;
Define one border entirely: border: solid 2px #CC0000;
Define one property of all borders: border-style:dashed;
Define all properties of all borders: border: dotted 3px black;
![Page 15: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/15.jpg)
Margins vs Padding
a b c d e
1 2 3 4 5
1 10 11 100 101
i ii iv viii
100 101
Consider a table...
![Page 16: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/16.jpg)
Margins vs Padding
011 100
110 111
padding
margin
![Page 17: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/17.jpg)
CSS Margins and Padding
Set individual margins:
margin-left:2px; margin-right:4px; margin-top:3px; margin-bottom:5px;
Set all margins: margin:5px;
Set individual padding: padding-left:2px; padding-right:4px; padding-top:3px; padding-bottom:5px;
Set all padding: padding:5px;
![Page 18: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/18.jpg)
CSS Links
a:link {...}
unvisited link a:visited {...}
visited link a:hover {...}
mouseover link a:active {...}
link with focus
Reference:
http://www.w3schools.com/css/css_pseudo_classes.asp
![Page 19: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/19.jpg)
Other useful CSS properties
display (block, inline, ...) visibility (visible, hidden, ...) float overflow cursor list-style-type background (color, image, repeat) border-collapse (for tables)
![Page 20: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/20.jpg)
CSS Complex Relationships
p img {...} Applies to <img>'s inside <p>'s
td, th, table {...} Applies to all of <td>, <th> and <table>
p.myclass {...} Applies to <p>'s using the myclass class
p#myid {...} Applies to <p>'s using the myid id
![Page 21: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/21.jpg)
CSS Complex Relationships
Note: p#myid != p #myid (with space) p#myid -> all paragraphs defined as myid p #myid -> all elements defined as myid which are
in a paragraph
Elements with particular attributes: input[type=”text”] {...} limited browser support
![Page 22: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/22.jpg)
CSS Inheritance
If a property is not defined, its value is usually inherited from that of the parent (containing) element
e.g. a paragraph may inherit the <body>'s text colour
A value can be explicitly inherited from the parent element using the inherit keyword
e.g. color:inherit; useful when a property already has a value but we
want to override it with an inherited value
![Page 23: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/23.jpg)
Advanced CSS
Further Reading Pseudo-classes Pseudo-elements Generated content
![Page 24: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/24.jpg)
Part 2
CSS Techniques
![Page 25: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/25.jpg)
HTML style attribute
Can be used to use CSS directly in an HTML element
e.g. <p style=”text-align:right;”>...</p>
Useful for associating CSS with an HTML element that occurs only once (and which thus does not need to be defined in the external CSS file)
Eliminates need for HTML layout tags/attributes in such situations
![Page 26: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/26.jpg)
Internal Style Sheets
For CSS to be used with only one HTML page
...no need to use an external CSS file! Put the following in your <head> section:
<style type=”text/css”>
<!--
/* CSS code goes here */
-->
</style> HTML comments <!-- --> are important for old non-CSS
browsers to ignore the CSS
Note: CSS comments are like in C++: /* ... */
![Page 27: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/27.jpg)
CSS Classes
HTML side: <p class=”fancy”>...</p>
CSS side: .fancy {...}
Applies properties of class .fancy to any HTML element that uses that class
Classes begin with a dot
![Page 28: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/28.jpg)
CSS IDs
HTML side: <h2 id=”contents”>...</h2>
CSS side: #contents {...}
Applies properties of class .fancy to any HTML element that uses that class
IDs begin with a hash sign Unlike classes, IDs can be used only once in an
HTML page
![Page 29: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/29.jpg)
HTML <div>'s
HTML divisions are used to group several HTML elements together
Useful to apply the same CSS to several elements at once
Also useful to group elements structure-wise Commonly used to create divisions for
navigation and content in the CSS layout
![Page 30: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/30.jpg)
The CSS Layout: History
HTML page layout evolved substantially over the years
plain pages frames tables ...and finally, CSS!
Tables are ok but inadequate no logical relation between cells bloat page with presentation details maintenance nightmare
![Page 31: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/31.jpg)
The CSS Layout: <div>'s
<div id=”navigation”>
<!-- navigation goes here -->
</div>
<div id=”content”>
<!-- content goes here -->
</div>
![Page 32: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/32.jpg)
CSS Positioning
position:absolute; puts element in top-right corner regardless of other
elements declared before or after it
positioning properties: top:5px; left:10px; right:15px; bottom:20px;
![Page 33: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/33.jpg)
The CSS Layout: How-To
Using <div>'s and CSS positioning properties, <div>'s can be placed anywhere on the page
This works great, and is used worldwide But... there is a better way!
HTML lists can be used for navigation... even if it is horizontal (with display:inline)
The HTML <body> itself can be used for content
![Page 34: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/34.jpg)
The Meaning of CSS
CSS = Cascading Style Sheets Why Cascading?
1.style attribute
2.id attribute
3.class attribute
4.internal style sheet
5.external style sheet
6.default browser style setting
CSS may be defined in various locations. Each of these has a priority. If a property is not defined in the highest priority location, the browser tries to find it in the next location.
![Page 35: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/35.jpg)
CSS Media
Different CSS can be applied to different CSS media
Useful especially to make your website printer-friendly!
Default media type is screen Support for media types is browser-dependent
although CSS defines them
![Page 36: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/36.jpg)
CSS Media Types
screen print all aural braille
embossed handheld projection tty tv
Reference:http://www.w3schools.com/css/css_mediatypes.asp
![Page 37: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/37.jpg)
Example with Print Media
@media print{ #navigation { display:none; }
#content { margin-left:0px; }}
![Page 38: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/38.jpg)
Multiple Style Sheets
<link rel=”stylesheet” type=”text/css” href=”blue.css” title=”Blue Theme”>
<link rel=”alternate stylesheet” type=”text/css” href=”green.css” title=”Green Theme”>
Use several <link>'s to use multiple CSS files
Use the title attribute to name them (for user selection)
![Page 39: CSS Crash Course](https://reader035.vdocuments.site/reader035/viewer/2022062301/56813739550346895d9ec9f0/html5/thumbnails/39.jpg)
Importing Style Sheets
A style sheet can import properties from another style sheet
@import statements must occur before any other property declarations
@import url(”another.css”);
Reference:
http://www.w3.org/TR/CSS2/cascade.html#at-import