5. Inline-styles
You can add a ‘style’ attribute to any HTML
element and define your styles there
<div style=”width:50px;height:50px;”></div>
<div width=”50” height=”50”></div>
6. Internal Style Sheet
You can also place a <style> tag in the <head>
portion of your HTML document and define your
CSS there
<head>
<style type=”text/css”>
…
</style>
</head>
7. External Style Sheets
The most common place for CSS is an external
style sheet
Which is a file with a .css extension
To access this file you will need to use the HTML
<link> element
You place a <link> between your HTML <head>
tags
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
8. CSS Syntax
A typical CSS statement looks like this:
SELECTOR {
DECLARATION;
PROPERTY: VALUE;
}
For Example:
h1 { color: #FFFFFF; }
Selector-> h1
Declaration-> color: #FFFFFF;
Property-> color
Value-> #FFFFFF
10. CSS Syntax Cont.
CSS declarations always end with a semicolon,
and curly brackets surround declaration groups.
Do not leave spaces between property values and
units THERE’S A SPACE HERE
incorrect width: 20 px;
correct width: 20px;
11. Open Core-Concepts
sheet in Dropbox
Dropbox/Lecture2/CSS core concepts.doc
Go to page 5: Common CSS Attributes
12. CSS Classes
A special non-unique case for elements. Classes
should be used when multiple elements require
the same styling
14. CSS Classes Cont...
CSS classes are declared with a period ‘.’ followed
by a unique name
Such as ‘.box’ in the previous example
In CSS if you follow a class declaration with a
selector you can define specific declarations for
that element
15. CSS Classes Cont...
Where ‘.box’ is the class, ‘p’ is the selector and
‘color: green;’ is the declaration
.box p {
color: green;
}
16. Let’s change it up a bit
Add background color to the boxes
Add a border to the boxes
Add margin to the boxes
Float all boxes left
18. Cascading Style Sheets
When an HTML element has multiple styles
defined on it the one with the highest priority will
be chosen and override the rest.
19. Cascading Style Sheets
Cont...
An inline style has the highest priority and will
override any other CSS defined
Internal style sheet
External style sheets
These are typically declared before the internal
style sheets
Browser default options are at the bottom of the
list, and will have the lowest priority.
