CSS Cascading Style Sheets
advertisement
CSS
Cascading Style 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 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.
CSS Advantages
• Move 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>
Style Sheet Ex1.css
body
{ background-color:yellow; }
h1 { font-size:36pt; }
h2 { color:blue; }
p { margin-left:50px; }
Result:
http://www.w3schools.com/css/showit.asp?filename=ex1
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>
Style Sheet ex2.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;}
Example 2 HTML and CSS
html
<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;fontsize:20pt;}
hr {color:navy;}
p {font-size:11pt;marginleft:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
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.
CSS Example
A 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_syntax1
CSS Comments
Comments 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;
}
Other Selectors, ID and CLASS
The 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
unique
The id selector is used to specify a style for a single,
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_id
Class Selector
The 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;}
Restrict classes to particular html tags
You 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;}
Methods to insert a CSS file
• External 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.)
Internal Style Sheet
• An 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>
In-Line Styles
• Inline 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>
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.
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.
• 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!
CSS Styling
•
•
•
•
•
•
Backgrounds
Text
Fonts
Links
Lists
Tables
Backgrounds
•
CSS 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-attachment
• body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-position
• body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Text
• Text 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);}
• 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;}
• Text Decoration
– The 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;}
ALL CSS Text Properties
•
Property
•
•
•
•
•
•
•
•
•
•
•
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
Text-shadow
text-transform
vertical-align
white-space
spacing
Description
Sets the color of text
Specifies the text direction/writing direction
Increases or decreases the space between characters in a text
Sets the line height
Specifies the horizontal alignment of text
Specifies the decoration added to text
Specifies the indentation of the first line in a text-block text-shadow
Specifies the shadow effect added to text
Controls the capitalization of text unicode-bidi
Sets the vertical alignment of an element
Specifies how white-space inside an element is handled wordIncreases or decreases the space between words in a text
Fonts
• Many font families, see w3schools for the list
Links
• Links 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 */
Lists
•
The 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;}
Images as list markers
• To specify an image as the list item marker,
use the list-style-image property:
• Example
ul
{
list-style-image: url('sqpurple.gif');
}
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;
}
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:
Box Model Components
• Margin - 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.
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 size 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)
= 300px
Assume 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
margin
The 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 margin
Importance of Box Model for Mobile
•
•
Mobile 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:
–
–
–
–
•
•
•
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:
–
–
–
–
–
•
•
Desktop computer
Iphone
Ipad
Android (many size devices)
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.
Geolocation
Many more
New 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 device
Management Takeaway
• Using 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)
