PowerPoint Presentation - An Introduction to CSS Styling
advertisement
An Introduction to Cascading Style Sheets
Basic CSS Syntax
Nick Foxall
SM5312 week 6: basic CSS syntax
1
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how XHTML elements and markup should be
displayed by the browser (or user agent)
Styles can be included in the <head> area of an XHTML
document, or placed in external Style Sheet files.
Multiple style definitions are able to cascade into one…
SM5312 week 6: basic CSS syntax
2
What’s a “Cascade”?
All styles will "cascade" into a new "virtual" style sheet in the
following rule order, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)
An inline style (inside an HTML element) with the highest priority
will override a style declared inside the <head> tag, in turn
overrides an external style sheet, which finally overrides browser
default values.
SM5312 week 6: basic CSS syntax
3
External Style Sheets
Having all styles in an external Style Sheet allows for the
style formatting of many pages from one file, saving a lot of
updating work.
An external Style Sheet is a text file saved with the
extension .css At the top of a new CSS document, the
character set should be specified:
@charset "UTF-8";
Not essential, but good practise to ensure the CSS file is
compliant with web standards. A new, blank .css file
created in Dreamweaver will automatically include this
syntax.
SM5312 week 6: basic CSS syntax
4
Rules in CSS
A CSS Style Sheet is basically a collection of rules,
describing how the browser should display XHTML
elements.
Each rule contains 2 parts:
A Selector, stating which element in the XHTML a rule
applies to;
One or more Declarations, which describe how these
elements should be displayed.
SM5312 week 6: basic CSS syntax
5
CSS Rules: Selectors and Declarations
Rule
Selector
h1 { font-family: Times, Georgia, serif;
font-size: 24px; text-align: center; }
Declarations
Enclosed in curly brackets { }
SM5312 week 6: basic CSS syntax
6
CSS Rules: Selectors and Declarations
Rule
Selector
h1 {
font-family: Times, Georgia, serif;
font-size: 24px;
text-align: center;
}
Declarations
A more readable way of writing CSS rules
SM5312 week 6: basic CSS syntax
7
CSS Rules: Declaration Parts
Properties
Values
h1 {
font-family: Times, Georgia, serif;
font-size: 24px;
text-align:: center;;
}
Properties and values
separated with a colon
Each declaration
separated with a semicolon
Declarations consist of 2 parts: a property and a
value. Each declaration ends with a semi-colon ( ; ).
Properties and values are separated with a colon ( : ).
SM5312 week 6: basic CSS syntax
8
CSS Rules: Declaration Parts
Only values with a space in the name
need to be enclosed in quotes
h1 {
font-family: “Trebuchet MS”, serif;
font-size: 24px;
text-align: center;
}
Unlike XHTML, values do not have to be enclosed
in quotation marks, unless the value name
includes a space (e.g multi-word name).
SM5312 week 6: basic CSS syntax
9
Versions of CSS
Like XML and XHTML, CSS specifications are laid down by
the World Wide Web Consortium.
The current, most widely used version of the CSS
specification is version 2.1
There are over 100 different properties available in CSS
2.1. You can view the current CSS 2.1 specification at
www.w3.org/TR/CSS21/
You can also validate the CSS you are working on by going
to http://jigsaw.w3.org/css-validator/
SM5312 week 6: basic CSS syntax
10
CSS Simple, or Element Selectors
The most basic form of CSS selector is an XHTML
element name;
h1, h2, p, ol, ul, table, etc.
This is the simple or element selector. Example:
p { color: #003366; }
This will set every occurrence of content marked
up the <p> paragraph tag to be a dark blue colour.
SM5312 week 6: basic CSS syntax
11
CSS Class Selectors
However, in XHTML markup, elements can have
class attributes assigned to them. The value
attached to a class attribute can be one (or more)
names, separated by spaces. Example:
<h1 class=“special”> or
<h1 class=“special underlined”>
The actual definition of the value “special” is
defined in a CSS class selector…
SM5312 week 6: basic CSS syntax
12
CSS Class Selectors
h1.special { color: #FF0000; }
This will now make all <h1> elements with the class “special” display
text with a red colour. <h1> elements that don’t have the class attribute
“special” will continue to display in the default <h1> colour.
A CSS class selector can also be defined more generally, without the
element name (just the dot):
.special { color: #FF0000; }
This class can now be applied to any XHTML element that has the
class attribute “special”.
Actually the full CSS syntax is *.special, where * is a selector that
matches anything. However, CSS shorthand means we can drop the *.
SM5312 week 6: basic CSS syntax
13
CSS ID Selectors
XHTML elements can also have id selectors assigned to
them. Example:
<p id=“summary”>blah, blah, blah.</p>
In the CSS, the id “summary” can be styled in a rule, thus:
#summary { font-style: italic; }
Whereas class selectors can be used across a number of
elements in an XHTML document, ID selectors can only be
assigned to one specific element in any given XHTML
document.
SM5312 week 6: basic CSS syntax
14
CSS ID Selectors
In the CSS, id selectors are always defined with a # (hash)
symbol first:
#summary { font-style: italic; }
Again, this is CSS shorthand for…
*#summary { font-style: italic; }
…meaning the id #summary can be applied to any XHTML
element (but only one element can have that id name in the
XHTML document).
SM5312 week 6: basic CSS syntax
15
Class Selectors vs ID Selectors
How do we know which to use and when?
ID selectors:
1. As they must be unique to a page, ID selectors are
useful for persistent structural elements, such as
navigation zones, or key content areas, that occur once
on a page, but that are consistent across a site.
2. For example, #mainNav may be the selector to style the
the main navigation element, which will likely appear on
every page of your site.
3. So, ID selectors are generally applied to conceptually
similar elements across a site.
SM5312 week 6: basic CSS syntax
16
Class Selectors vs ID Selectors
How do we know which to use and when?
Class selectors:
1. As they can be allied to any number of elements on a
page, class selectors are useful for identifying (and
targeting) types of content, or similar items.
2. For example, you have a news page with a date at the
start of each story. If you use ID selectors, you’d have to
give every occurrence of the date a separate ID name.
Much easier to give every date one class name and
style that one class.
SM5312 week 6: basic CSS syntax
17
CSS Pseudo-Classes
Pseudo-classes are CSS classes used to add effects to
certain elements. They are used most often to style the
anchor elements <a> of hyperlinks. Example:
a:link { color: blue; text-decoration: underlined; }
Can also be written without the a (anchor) element:
:link { color: blue; text-decoration: underlined; }
SM5312 week 6: basic CSS syntax
18
CSS Pseudo-Classes
There are four pseudo-class elements provided to make
rollover and on-click effects possible:
a:link { color: blue; text-decoration: underlined; }
link not yet visited
a:visited { color: green; text-decoration: underlined; }
visited link
a:hover { color: red; text-decoration: none; }
effect on the link when the mouse hovers over it
a:active { color: purple; text-decoration: none; }
effect on the link when the mouse button is pressed down on it
Note that pseudo-classes for rollover effects must be
written in this order in a CSS file for them to work correctly.
SM5312 week 6: basic CSS syntax
19
Combining Pseudo-Classes with Classes
Pseudo-classes can also be combined with regular
CSS class selectors to create multiple link and
rollover styles, depending on the parent class.
Examples:
a.main:link { color: blue; }
a.sidebar:link { color: grey; }
a.footer:link { color: white; }
SM5312 week 6: basic CSS syntax
20
Element Selector Grouping
Element selectors can be grouped together if you
want to apply one CSS rule to a range of
elements. Example:
h1, h2, h3, h4, h5, h6 { color: #FF0000; }
Each element is separated by a comma (except
for the last element before the start of the
declaration).
However…
SM5312 week 6: basic CSS syntax
21
Inheritance
Certain CSS properties are inherited by the
descendents of the elements those styles are
applied to.
For example, if you give the <body> element a
color style of gray, all descendents of <body> will
inherit the color gray, until you specify otherwise.
SM5312 week 6: basic CSS syntax
22
Inheritance
By setting a number of ‘basic’ styles in top-most
elements, such as <body>, you can avoid having
to style many descendent elements. This…
body { color: gray; }
Is much better than having to write this…
p, div, h1, h2, h3, ul, ol { color: gray; }
Note: inheritance is not the same as cascade!
SM5312 week 6: basic CSS syntax
23
The Universal Selector
There is also a Universal Selector, that acts like a
wildcard, styling every available element that isn’t
specifically styled elsewhere. Example:
* { padding: 0; margin: 0; }
…would usefully set the overall page styling to
zero padding and margin, which could then be
adjusted as-needed further down the line.
The universal selector is donated by an * symbol
SM5312 week 6: basic CSS syntax
24
Descendent Selectors
Descendent Selectors (sometimes called contextual) can
give a finer level of control over class selectors. Examples:
p em { font-weight: bold; color: red; }
Bold and blue will be applied to the <em> element, only if it
occurs inside a <p> element. It would not apply if the <em>
was inside say an <h1> element.
#mainNav ul { font-family: Arial, sans-serif }
The font of the <ul> element would only change to Arial if it
was inside the content area defined by the ID #mainNav
Each descendent element is separated by a single space
SM5312
weekCSS
6: basic CSS
syntax
in
the
code
(no commas!)
25
Class & Element Selector Order
A class selector will take precedence over a more general
element selector. Example, These two CSS rules set the
color of paragraph elements:
p { color: gray; }
p.first { color: red; }
The top rule sets all general <p> content to a grey colour.
The next rule sets all paragraphs with the class attribute
“first” (i.e. <p class=“first”> ) to red text.
The p.first rule takes precedence and changes the text to
black.
SM5312 week 6: basic CSS syntax
26
Class & Element Selector Order
If an XHTML element belongs to more than one class, then
the later CSS rules take precedence over earlier ones
Example:
p.first { color: #000000; }
p.changed { color: purple; }
If a <p> element in the XHTML is specified with both
classes (i.e. <p class=“first changed”> ) then the text will
become purple, not black.
The last class rule in the order takes precedence.
SM5312 week 6: basic CSS syntax
27
