1 getting started with css. 2 css cascading style sheets xhtml provides structure for our documents...

1

Getting Started with CSS

2

CSS Cascading Style Sheets

• XHTML provides structure for our documents (web pages)

• CSS provides Style or Presentation for our documents

• Important to learn the language of CSS

• CSS is better suited than XHTML for specifying style information

• CSS is much better for handling styles for multiple pages

3

CSS rules, selectors, properties and values

• CSS contains simple statements called rules

• Each rule provides the style for a selection of XHTML elements

• A typical rule consists of a selector along with one or more properties and values

• The selector specifies which elements the rule applies to

4

The language of CSS

• CSS has its own language or syntax

• Each statement in CSS consists of the following:Location, Property, Style

5

CSS Location, Property, Style

1. Location (XHTML element)2. Property (like background color)3. Style (like color)

CSS format:

element { property: style;}

6

p Rule

CSS format: element { property: style;}

CSS example:p { background-color: red;}

7

CSS Location, Property, Style

• Relating this concept to an example of a house

Location = bedroom

Property = carpet

Style = red

• Using CSS syntax it would look something like:

bedroom {

carpet: red;

}

8

CSS declaration known as a Rule

1. Select element you want to style

2. Specify the property you want to style

(property of the element)

1. Set the style (or color) for the property

element {

property: style;

}

9

Anatomy of a CSS Rule

CSS Rule: element { property: style;}

p rule example: p { background-color: red;}

Or write like… p { background-color: red; }

**(linebreaks and spacing used to improve readability)

10

Adding more style to a Rule

• Elements have many properties which can be defined

• You can add as many properties and values as you like into each rule

• The following has a background color of red to the <p> element and adds a 1 pixel thick solid gray border to that element

p { background-color: red; border: 1px solid gray;}

11

Inserting a <style> element into our XHTML

• Adding a internal CSS using the <style> element to an XHTML page

<style type=“text/css”>

</style>

12

Inserting a <style> element into our XHTML

• Add opening & closing style tags within the <head> element

• Can go just before the closing </head> element

• CSS rules will go between these style elements

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1" /><title>Adams Document</title><style type=“text/css”></style></head>

13

Inserting a <style> element example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Adams Document</title><style type=“text/css”>

p {color: maroon;

}</style></head><body><h1>welcome to my webpage </h1></body></html>

14

Adding style using CSS color property

• Specifying the font color for paragraphs

• Applies style to only the <p> element

• The p selector selects all the paragraphs in our XHTML document and changes font color to maroon

• The property to change the font color is named color

p {

color: maroon;

}

15

Adding style using CSS color property

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1" /><title>Adams Document</title><style type=“text/css”>

p {color: maroon;

}</style></head><body>

<p>Welcome, the text in all paragraphs will be colored maroon

</p>

16

Writing combined rules for more than one element

• Putting commas between the selectors h1, h2 allows us to combine styling to our <h1> and <h2> headings

• Combined rule

<style type=“text/css”>p {

color: maroon;}h1, h2 {

font-family: sans-serif;color: gray;

}</style>

17

Adding an underline to both h1, h2 headings


p {

color: maroon;

}

h1, h2 {

font-family: sans-serif;

color: gray;

border-bottom: 1px solid black;

}

</style>

18

Adding a second rule for only the h1 headings

• Additional (more specific) rules can be added to elements

<style type=“text/css”>p {

color: maroon;}h1, h2 {

font-family: sans-serif;color: gray;

}

h1 {border-bottom: 1px solid black;

}</style>

19

Cascading Styles

• Can have as many rules as you want for an element

• Each rule adds to the style information of the rule before it

• Any style specific to an element you would write another rule

• CSS allows you to specify all kinds of selectors that determine which elements your styles are applied to

20

Using an external Style Sheet

• You can use an external Style Sheet (instead of an internal Style Sheet)

• External Style Sheet is linked to within the xhtml page

• External CSS is a text document saved with the .css extension

• Remember a webpage is also a text document saved with the .html extension

• External CSS enable you to easily update an entire site vs having to update the Style Sheet on each page

21

Creating an external Style Sheet

• You can copy CSS …simply highlight, copy and paste into a blank plain text document

p { color: maroon;}h1, h2 { font-family: sans-serif; color: gray;}h1 { border-bottom: 1px solid black;}

22

Creating an external Style Sheet

• Save Style Sheet in the same directory (folder) as your webpage

• Save with the .css file extension anyname.css

• Delete any style elements back in the webpage, int CSS in head


</style>

23

Linking an external Style Sheet

• Add <link> element within the <head> element

• Can go just before the closing </head> element

• Links to our external Style Sheet

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-

1" /><title>Adams Document</title>

<link type=“text/css” rel=“Style Sheet” href=“name.css” /></head>

24

<link type=“text/css” rel=“Style Sheet” href=“name.css” />

• link element used to link to external info

• type refers to the type of info, “text/css” (CSS Style Sheet)

• rel attribute specifies the relationship between the XHTML file and the file (CSS Style Sheet) we are linking to

• href links to where file (CSS Style Sheet) is located

• <link> is an empty element, must end with />

25

href absolute

• Relative or absolute path can be used within href

• Absolute path would provide the complete path in order to find file

(http://www.coffee.com/misc/name.css)

26

href relative

• Relative means relative to where your file is currently located in the directory or folder structure

• In the relative example below, name.css must reside within the same folder/directory as the webpage the code resides in

<link type=“text/css” rel=“Style Sheet” ref=“name.css” />

27

href=“../name.css”

In the example below, name.css must reside in the directory or folder directly above the current folder or directory

<link type=“text/css” rel=“Style Sheet” href=“../name.css” />

28

Serif vs sans serif font style

• Sans serif have the clean look

Sans serif example

• Serif have “serifs” or tails and are considered more difficult to read, Serif is the default font used if we don’t specify any in our Style Sheet

Serif example

29

Changing our <p> element to use a sans-serif font

p {


color: maroon;

}

h1, h2 {


color: gray;

}

h1 {

border-bottom: 1px solid black;

}

30

Inheritance, parent and child elements

• Adding the font-family property to the “p” selector will affect any elements inside this <p> element

• Additional elements that are located within elements will inherit their style

• For example, if a <p> element has a font-family property, than any elements inside the <p> element will inherit the same style

• Parent and child elements, child inherits style from parent

31

Styling a <body> element affects whole document

• Add a body selector (see below)• Modify the p,h1,h2 selectors, remove font-family from p and

h1,h2, no longer needed

body { font-family: sans-serif;

}p { color: maroon;}h1, h2 { color: gray;}h1 { border-bottom: 1px solid black;}

32

Overriding an inheritance

Add a new rule for <em> element, rule overrides its parent rule

body { font-family: sans-serif; }

p { color: maroon;

}h1, h2 { color: gray;

}h1 { border-bottom: 1px solid black;

}em { font-family: serif;

}

33

Inheritance

• You can override an inherited value by adding a new rule around the desired (child) element

• New rule is considered a specific rule for that element only (and any of its child elements)

• The most specific rule will always override an inherited value

34

Inheritance

• Determining which properties are inherited and which are not can best be determined by using a CSS reference

35

Inheritance

• Styles that affect the way the text looks, such as font color (the color property), the font-family, and other font related properties such as font size, font-weight (for bold text), and font-style (for italics) are inherited

36

Inheritance

• Properties such as border are not inherited

• You can always override a property that is being inherited

• Use a specific selector to override a property from a parent

37

Adding comments can help explain CSS logic

• Add comments to your CSS file using

/* addcomments */

• Comments can span multiple lines, for example

/* this rule selects all paragraphs and colors them gray/*

38

Adding classes

• Can define a class of elements and then apply styles to any element that belongs to that class

• A class is simply a grouping or belonging to a group

• Sort of like belonging to a club, there are members who are part of the club

• Using a class would allow you to create a class for each <p> element individually

39

class=“name_of_class”

<h1>Mocha</h1><p class=“mocha” >Welcome to my paragraph about my mocha type drinks</p><h1>Espresso</h1><p class=“expresso” >Welcome to my paragraph about my expresso type drinks</p><h1>Vanilla</h1><p class=“vanilla” >Welcome to my paragraph about my expresso type drinks</p>

40

Creating a selector for the class

• To specify a particular class you would write out the selector in the following format

p.mocha {

color: olive;

}

• This selector only selects paragraphs belonging to the mocha class

p represents the selector

mocha represents the class name

olive represents the style/value

41

Creating a p selector for the mocha class

• Enables the selecting of <p> elements that belong to only the mocha class

• Add the class attribute to any <p> element which you want the desired rule/style applied to

• Adding the p.mocha class selector to the .css


p { color: maroon; }

h1, h2 { color: gray; }

h1 { border-bottom: 1px solid black; }

em { font-family: serif; }

p.mocha { color: olive; }

42

Taking classes further

• If you wanted to apply the same styling to blockquotes

• You could add a second rule to the mocha class

blockqoute.mocha, p.mocha { color: olive; }

43

Adding a class to an element

• Within the XHTML you would add the following to the desired blockquote

<blockquote class=“mocha”>Text goes here</blockquote>

44

Specifying several elements to class

• Modify the p.mocha class selector in the .css


p { color: maroon; }h1, h2 { color: gray; }h1 { border-bottom: 1px solid black; }

em { font-family: serif; }blockqoute.mocha, p.mocha { color: olive; }

45

Adding class to multiple elements

• If you wanted to add class to multiple elements you could instead write as a class and apply to all desired elements

.mocha { color: olive; }

• Rule will apply to all members assigned to this class

<p class=“mocha”>Text goes here</p>

46

Adding a class

• Leaving out all the element names and instead writing out by starting with a period followed by class name will apply rule to all elements with that class


h1 { border-bottom: 1px solid black; }

em { font-family: serif; }

.mocha { color: olive; }

47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Adams Document</title><link type=“text/css” rel=“Style Sheet” href=“name.css” /></head><body><h1 class=“mocha”>Mocha </h1><p class=“mocha”>Mocha is the most popular customer item.</p><h2 class=“mocha”>Mocha is part of the chocolate family</h2></body></html>

48

Elements can be in more than one class

• If you want to specify a <p> element in three classes you would write out the three classes with space in-between and no comma

<p class=“mocha vanilla chocalate”>

• Use multiple classes when you want an element to have styles you’ve defined in different classes

• Not recommended, but possible

49

Elements can be in more than one class

If an element belongs to multiple classes and all of which define the same property like the <p> element, then the style which gets applied is ?…

..since there is a conflict, the most specific rule will win or if all the same than the rule listed last in CSS file would rule

50

Determining how styles are applied

Do any selectors select your element

…if so then that’s your value

If there are no selectors then you rely on inheritance

…look at the elements parents until you find the property defined, if you do then that’s the value

If there is no selectors and no inheritance

…then the default value defined by the browser will be used

51

Determining how styles are applied

Again, if multiple selectors select an element

..then there is a conflict, the most specific rule will win or if all the same than the rule listed last in CSS file would rule

52

Always validate your CSS Style Sheet

• Always make sure to validate your CSS Style Sheet to check for conformance

http://jigsaw.w3.org/css-validator/

• There will be no obvious message that it validated, instead it will notify you of obvious errors or make suggestions

• It does list out the valid CSS information

http://jigsaw.w3.org/css-validator/

53

Review of the benefits to always validating

• Web pages will work and appear as intended by designer

• Will be better supported on new devices being used to view web pages

• Easy to make errors when writing code within a text editor, important to verify syntax

-end

1 getting started with css. 2 css cascading style sheets xhtml provides structure for our documents...

Documents