Cascading Style Sheets
What are Style Sheets? • What is a Style Sheet? •
A style sheet is a sort of definition for how the HTML elements in an HTML file will work
• Why use Style Sheets? •
•
To clearly separate the content of HTML files from the presentation layout of the HTML file. To save you from doing a lot of work, if used properly and efficiently, that is.
Style Sheets are like Rule Books • You can kind of think of a style sheet as a sort of rule book for how an HTML tag will behave. • For instance, if there is a rule in your rule book stating that the tag will always generate an orange background, then any HTML web page that references this rule book will have an orange background.
What are Cascading Style Sheets? • There are four different locations where a style definition can appear. • So what’s the problem? Well, if a style is defined in more than one location, then the web browser must have a way of knowing which style definition to use. • This problem is solved by arranging the four potential style sheet locations in order from lowest priority to highest priority. • Looking at the bigger picture, we say that styles “cascade” into a new, virtual style sheet according to the rules concerning the priority of a location.
Style Sheet Locations •
There are four different style sheet locations: Default Browser Styles
1. •
This is when you have no style sheets
External
2. •
This is a CSS file that is just referenced from your web page
Internal
3. •
This is defined in the section of your HTML page
Inline
4. •
The style is defined as a parameter in the tag
The Priority of Style Sheet Locations Default Brower Styles
Lowest Priority
External Internal Inline
Highest Priority
Internal Style Sheets • An Internal Style Sheet is defined in the head section of a webpage. For example: CSS Information…
External Style Sheets • An External Style Sheet is a CSS file that… • •
contains only CSS information is separate from the HTML file
• It is referenced by the HTML in the section. • For example: Note: Inserting a reference to an external style sheet is like inserting an image the relative location of the CSS file to the HTML file is IMPORTANT!
CSS Syntax selector { property:value; property:value; property:value }
No semi-colon is needed if there in only one property being defined or if it is the last in a series of properties being defined.
• The selector is the HTML tag you wish to define • The property is attribute you wish to change • The value is what you want to change the attribute to
CSS Example • Ok let’s do an example! • Open Notepad and create a new web page • Save the file as example.html in c:\temp •
Remember to save as type: ‘All Files’
• In the section of your webpage, insert:
• In the section of your webpage, create a paragraph using the tags • Remember to save the file when you’re done!
CSS Example (cont’d) This is some text ☺
CSS Example (cont’d) • Now we have to create our CSS file! • Open Notepad and create a new file • Save the file as example.css in c:\temp •
Remember to save as type: ‘All Files’
• This file contains only CSS information • It does not contain any tags or tags or any other tags
CSS Example (cont’d) • Ok, now that we have a CSS file, lets add some definitions for changing the… • • • • •
Background colour Text colour Font size Text decoration Page margins
• Remember to save the file when you’re done!
CSS Example (cont’d)
CSS Example (cont’d) • When you open up our example web page, it should look like this • Note – Even though the text looks like it is centered, it is actually at the 30% margin for the window containing the web page.
Background Properties Property
Usage
background-color
background-color: orange background-color: #FF9900
background-image
backround-image: url(‘yoda.jpg’)
background-repeat
background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat
background-attachment
background-attachment: scroll background-attachment: fixed
Background Properties (cont’d) • background-color •
You can use either the name of the color or the hexadecimal color code
• background-image • •
Remember, the pathway for the location of the image must be relative to the HTML document Also, the image name must be spelled correctly
• background-repeat • •
repeat-x repeat-y
The image repeats along the top row The image repeats along the left-hand column
• background-attachment • •
scroll Fixed
The background image will scroll with the rest of the page The background image will not scroll with the rest of the page
Text Properties Property color text-align
text-decoration
Usage color: orange color: #FF9900 text-align: left text-align: right text-align: center text-decoration: underline text-decoration: overline text-decoration: line-through text-decoration: blink
Text Properties (cont’d) • color •
You can use either the name of the color or the hexadecimal color code
• text-align •
You can left, right and center align your text
• text-decoration • • • •
underline underlines the text overline inserts a line overtop the text line-through inserts a line through the text blink causes the text to start blinking
Font Properties Property
Usage
font-family
font-family: courier
font-size
font-size: 200% font-size: large font-weight: bold font-style: italics
font-weight font-style
Font Properties (cont’d) • font-family • •
Simply type in the name of the font you want to use If the font name is longer more than one word, put quotes around it •
•
“comic sans”, “sans serif”, etc…
Note: if the browser doesn’t support a font, then it will display the browser’s default font
• font-size •
You can either use a percentage or one of the following words: •
xx-small, x-small, small, medium, large, x-large, xx-large
• font-weight •
Add bold to some text
• font-style •
Add italics to some text
Border Properties Property border-color border-width border-style
Usage border-color: orange border-color: #FF9900 border-width: 8px border-width: thick border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge
Border Properties (cont’d) • border-color •
You can use either the name of the color or the hexadecimal color code
• border-width •
You can use either the number of pixels or one of the following: •
thin, medium, thick
• border-style •
Choose from a variety of border styles such as: •
none, dotted, dashed, solid, double, groove, ridge, inset, outset
List Properties Property
Usage
list-style-image
list-style-image: url(‘yoda.jpg’)
list-style-type
list-style-type: disc list-style-type: circle list-style-type: square
(for unordered lists)
list-style-type (for ordered lists)
list-style-type: decimal list-style-type: lower-roman list-style-type: upper-roman list-style-type: lower-alpha list-style-type: upper-alpha
List Properties (cont’d) • List-style image •
•
Remember, the pathway for the location of the image must be relative to the HTML document Also, the image name must be spelled correctly
Page Margins Properties Property margin-top margin-bottom margin-left margin-right
Usage margin-top: 10cm margin-top: 10% margin-bottom: 40cm margin-bottom: 40% margin-left: 20cm margin-left: 20% margin-right: 70cm margin-right: 70%
Page Margins Properties (cont’d) • margin-top •
You can either use a number value or a percentage
• margin-bottom •
You can either use a number value or a percentage
• margin-left •
You can either use a number value or a percentage
• margin-right •
You can either use a number value or a percentage
Dimension Properties Property height width
Usage height: 34px height: 12% border-width: 76px border-width: 100%
The height and width can both be defined as a number (in px or cm) or as a percentage of the containing block .
Classes • Classes allow you to define different styles for the same HTML tag / element •
For example, say you would like to have two different paragraph types in your web page, one left-aligned and one right-aligned
• Classes are declared in CSS by placing a dot in between the element and the class name • For Example: p.left & p.right • Note – Do not start a class name with a number because it will not work in Mozilla / Firefox
Classes (cont’d) • In an HTML tag, a class is specified by inserting it into the tag as a parameter. Some text
• For example… This is some left-aligned text. This is some right-aligned text. • Now let’s do an example by modifying our previous example!
In our CSS file…
In our HTML file…
Classes (cont’d)
Class Inheritance
Notice anything interesting here?
Class Inheritance (cont’d) • Looking at the example from the previous slide… • The p declaration with no class sets the default style • The classes inherit all the properties from the non-class declaration unless a specific property is overwritten by the same property that’s also defined in the class •
In this example, the default text color of blue is overwritten with purple in class “left” and with green in class “right”
• If neither of the declarations set a property, the browser default is used
Element-less Classes • An element-less class is a class that doesn’t have an element associated with it. • These classes can be used by any element • Element-less classes can be declared using the form: .classname { property:value; property:value; property:value }
Element-less Classes (cont’d) • For a quick example, let’s say we created an elementless class in an external css file that centered text • We could then use it for various kinds of tags including , , , , , etc…
Element-less Classes (cont’d)
Element-less Classes (cont’d)
Centering Images • One thing that CSS does not do easily is centering block elements •
div boxes, images, tables, etc…
• To center an image: img.center { display:block; margin-left:auto; margin-right:auto }
Pseudo-classes • Pseudo-classes are used to add special effects to some selectors selector:pseudoclass { property:value } • Pseudo-classes can also be combined with classes selector.classname:pseudoclass { property:value }
Anchor Pseudo-classes • A link that is visited, unvisited or when you move your mouse over the link can all be displayed in different ways a:link {color:orange} a:visited {color:green} a:hover {color:red}
unvisited link visited link mouse over link
• a:hover must come after a:link and a:visited in the CSS definition in order to work!
Combining Classes & Pseudo-Classes • The CSS definition: a.red:visited { color:red }
• The HTML code: Google
• What’s displayed on screen after a link has been visited: Google
• The tag defines a division / section • •
•
Also known as “div boxes” If you declare a div box to be a height and width, then it will take up that much space on the screen, starting from where you called it This is why a lot of people use CSS – you can put anything anywhere you want it on the screen without having to rely on tables.
• For this upcoming example, let’s use an internal style sheet…
box Example
Div Box Example 1
Div properties Property float overflow
position
Usage float:left float:right overflow: visible overflow: hidden overflow: scroll position: relative position: absolute
Div properties (cont’d) • float •
Float decides where a given element will occur, so, for instance, on the left hand side of the webpage or the righthand side
• overflow •
The overflow property decides what to do if the content inside a given element exceeds the height and width •
The overflow can remain visible, become hidden, or utilize scrolls
• Position •
Absolute positioning means that an element can be placed anywhere on the web page by simply specifying the number of pixels from the top of the webpage and the number of pixels from the left-hand side of the webpage
Div properties (cont’d) Property top left
Usage top: 100px top: 50% left:100px left: 50%
• top specifies how far from the top an element will appear either - in pixels or a percentage. • left specifies how far from the left-hand side an element will appear either - in pixels or a percentage.
Div Box Example 2 • Okay, let’s do an example using an external style sheet that combines all that we learned about div boxes!
In our CSS file…
In our HTML file…
Div Box Example 2 (cont’d)
