Sheets Brief Introduction Norman White Background HTML was not intended to have tags for formatting a document Intended to define contents headings paragraphs etc HTML 32 added tags like font color ID: 153452
Download Presentation The PPT/PDF document "CSS Cascading Style" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CSSCascading Style SheetsBrief Introduction
Norman WhiteSlide2
BackgroundHTML was not intended to have tags for formatting a document.
Intended to define contents (headings, paragraphs etc.)
HTML 3.2 added tags like font, color
But that dramatically increased the size of html documents, and made maintenance of large web sites increasingly difficult
HTML 4.0 introduces CSS , Cascading Style Sheets
Now formatting can be moved out of the html into a CSS file.Slide3
CSS AdvantagesMove all style information to a single file
Can change the look of a whole site, by changing one file
Example 1
<html>
<head>
<link
rel
="
stylesheet
"
type="text/
css
"
href
="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>Slide4
Style Sheet Ex1.cssbody
{ background-
color:yellow
; }
h1 { font-size:36pt; }
h2 {
color:blue
; }
p { margin-left:50px; }
Result:
http://www.w3schools.com/css/showit.asp?filename=ex1Slide5
Another Example<html>
<head>
<link
rel
="
stylesheet
"
type="text/
css
"
href
="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>
<hr />
<p>You can see that the style sheet formats the text</p>
<p><a
href
="http://www.w3schools.com" target="_blank">This is a link</a></p>
</body>
</html>Slide6
Style Sheet ex2.cssbody {background-
color:tan
;}
h1 {color:maroon;font-size:20pt;}
hr {
color:navy
;}
p {font-size:11pt;margin-left:15px;}
a:link {
color:green
;}
a:visited {
color:yellow
;}
a:hover {
color:black
;}
a:active {
color:blue
;}Slide7
Example 2 HTML and CSShtml
<html>
<head>
<link
rel
="
stylesheet
" type="text/
css
"
href
="ex2.css" /> </head>
<body>
<h1>This is a header 1</h1>
<hr /> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p> </body> </html>
CSS
body {background-color:tan;}h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;}Slide8
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The
selector
is normally the
HTML element
you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.Slide9
CSS ExampleA CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {
color:red;text-align:center
;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red
;
text-
align:center
;
}
http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1Slide10
CSS CommentsComments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-
align:center
;
/*This is another comment*/
color:black
;
font-
family:arial
;
}Slide11
Other Selectors, ID and CLASSThe id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single,
unique
element.
The id selector uses the id attribute of the HTML element, and is defined with a
"#".
The style rule below will be applied to the element with id="para1":
Example
#para1
{
text-
align:center
;color:red;} http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_idSlide12
Class SelectorThe
class
selector is used to specify a style for a
group
of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a
"."
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {text-
align:center
;} Slide13
Restrict classes to particular html tagsYou can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
Example
p.center
{text-
align:center
;} Slide14
Methods to insert a CSS fileExternal Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link
rel
="
stylesheet
" type="text/
css
"
href
="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .
css extension. An example of a style sheet file is shown below: hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
NOTE: CSS Files can be referenced that are on a different server, allowing Styles to be shared across many pages (i.e. Blogs etc.)Slide15
Internal Style SheetAn internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/
css
">
hr {
color:sienna
;}
p {margin-left:20px;}
body
{background-
image:url
("images/back40.gif");}
</style></head>Slide16
In-Line StylesInline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! Best for testing only.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Slide17
CASCADING – What does that mean?What happens when we have multiple properties for the same selector, specified in different style sheets?
How do they get merged for a particular HTML element?
Multiple styles get “cascaded” together for each element.Slide18
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red
;
text-
align:left
;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;font-size:20pt;} If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;text-align:right;font-size:20pt; The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.Slide19
Multiple Styles Will Cascade into One
Styles can be specified:
inside an HTML element
inside the head section of an HTML page
in an external CSS file
Tip:
Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1) Browser default
2) External style sheet
3) Internal style sheet (in the head section)
4) Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!Slide20
CSS StylingBackgroundsText
Fonts
Links
Lists
TablesSlide21
BackgroundsCSS Background Properties
background-color
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
background-image
body {background-
image:url
('paper.gif');}
background-repeat
body
{
background-
image:url('gradient2.png');background-repeat:repeat-x;}background-attachmentbody{
background-image:url('smiley.gif');
background-repeat:no-repeat;background-attachment:fixed;}background-positionbody{ background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;
background-position:center; }Slide22
TextText Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "
rgb
(255,0,0)"
a color name - like "red"
Look at
CSS Color Values
for a complete list of possible color values.
The default color for a page is defined in the body selector.
Example
body {
color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}Slide23
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {text-
align:center
;}
p.date
{text-
align:right
;}
p.main
{text-
align:justify;} Slide24
Text DecorationThe text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
a {text-
decoration:none
;}
Another Example
h1 {text-
decoration:overline
;}
h2 {text-
decoration:line
-through;}
h3 {text-decoration:underline;}h4 {text-decoration:blink;}Slide25
ALL CSS Text PropertiesProperty
Description
color
Sets
the color of text
direction
Specifies
the text direction/writing direction
letter-spacing
Increases
or decreases the space between characters in a text
line-height
Sets
the line height
text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text Slide26
FontsMany font families, see w3schools for the listSlide27
LinksLinks can be styled with any CSS property (e.g. color, font-family, background, etc.).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user
mouses
over it
a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */ Slide28
ListsThe CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
List
I In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type property:
Example
ul.a
{list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}Slide29
Images as list markersTo specify an image as the list item marker, use the list-style-image property:
Example
ul
{
list-style-image:
url
('sqpurple.gif');
}Slide30
Tables (see w3schools for all examples)Examples:
table,
th
, td
{
border: 1px solid black;
}
table
{
border-
collapse:collapse
;
}
table,th
, td{border: 1px solid black;}table {width:100%;}th
{height:50px;
}Slide31
The CSS Box Model (very important for mobile devices)
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
The image below illustrates the box model:Slide32
Box Model ComponentsMargin - Clears an area around the border. The margin does not have a background color, it is completely transparent
Border
- A border that goes around the padding and content. The border is affected by the background color of the box
Padding
- Clears an area around the content. The padding is affected by the background color of the box
Content
- The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.Slide33
Width and Height of an Element
Important:
When you set the width and height properties of an element with CSS, you just set the width and height of the
content area
. To calculate the
full s
ize of an element, you must also add the padding, borders and margins.
The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)+ 10px (left and right border)+ 20px (left and right margin)= 300pxAssume that you had only 250px of space. Let's make an element with a total width of 250px:Example width:220px;padding:10px;
border:5px solid gray;margin:0px; The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right marginThe total height of an element should be calculated like this:Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom marginSlide34
Importance of Box Model for MobileMobile devices can come in a variety of different sizes.
We may want to change the layout and size of a page depending on what it is displayed on:
Desktop computer
Iphone
Ipad
Android (many size devices)
Later we will see that with HTML 5 we can dynamically determine the device size and bring in appropriate style settings for it
One of the problems with mobile devices is how to reformat your information so that it is easily manipulated on a mobile device.
We need to take advantage of some of the unique features of mobile devices. These include:
Touch based resizing and scrolling. Mobile devices can scroll through long lists easily, so you usually avoid multicolumn tables.
Support for orientation. You may need to change the
css
file depending on the orientation .
Shaking to indicate an action.
GeolocationMany moreNew CSS3 and html5 elements now make it possible to eliminate much of the need for special gif and jpeg icons. (for instance, you can draw a circle by creating a box with the correct rounded borders) HTML5 and CS3 media queries allow you to specify what CSS files to use depending on the width of the deviceSlide35
Management TakeawayUsing style sheets can make your web pages take on a customized, consistent look with very little effort. In many cases, one can find external style sheets at different sites that have already been carefully developed to give a particular look and feel. The “themes” that one can use on different sites are typically just different CSS files.
Style sheets make it much easier to change the look and feel of a set of web pages.
Style sheets will be very important when we want to have pages that display well on different screen sizes.
The ID and CLASS method of referencing html tags will also be similar to what
JQuery
uses to make
javascript
much easier to use. (as well as
JQuery
Mobile)