Lecture 9 Cascading Style Sheets

Cascading Style Sheets
CSS
What is CSS
• CSS is a style language that defines layout of
HTML documents. For example, CSS covers
fonts, colours, margins, lines, height, width,
background images, advanced positions and
many other things.
• HTML can be (mis-)used to add layout to
websites. But CSS offers more options and is
more accurate and sophisticated and is
supported by all browsers today.
What is the difference between CSS
and HTML?
• HTML is used to structure content.
• CSS is used for formatting structured content.
• CSS provides web designers with sophisticated
layout opportunities supported by all browsers.
• At the same time, separation of the
presentation style of documents from the
content of documents, makes site maintenance
a lot easier.
Benefits of CSS
• control layout of many documents from one
single style sheet;
• more precise control of layout;
• apply different layout to different media-types
(screen, print, etc.);
• numerous advanced and sophisticated
techniques.
Basic CSS Syntax
• Let's say we want a nice red color as the
background of a webpage:
Using HTML we could have done it like this:
<body bgcolor="#FF0000">
With CSS the same result can be achieved like
this:
body {background-color: #FF0000;}
• As you will note, the codes are more or less
identical for HTML and CSS.
• The above example also shows you the
fundamental CSS model:
Applying CSS to an HTML document
• There are three ways you can apply CSS to an
HTML document. These methods are all
outlined below:
1. In-line
2. Internal
3. External
Method 1: In-line (the attribute style)
• One way to apply CSS to HTML is by using the
HTML attribute style. Building on the above
example with the red background color, it can
be applied like this:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Method 2: Internal (the style tag )
• Another way is to include the CSS codes using
the HTML tag <style>. For example like this:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Method 3: External (link to a style
sheet)
• The recommended method is to link to a
so-called external style sheet.
• An external style sheet is simply a text file
with the extension .css.
• Like any other file, you can place the style
sheet on your web server or hard disk.
• For example, let's say that your style sheet is
named style.css and is located in a folder
named style.
• The trick is to create a link from the HTML document
(default.htm) to the style sheet (style.css).
• Such link can be created with one line of HTML code

placed in the header section:
<link rel="stylesheet" type="text/css" href="style.css" />
• This link tells the browser that it should use the layout
from the CSS file when displaying the HTML file.
• The really smart thing is that several HTML documents can

be linked to the same style sheet. In other words, one CSS
file can be used to control the layout of many HTML
documents.
Different html docs can link to the
same css file
Benefits
• This technique can save you a lot of work - If
you, for example, would like to change the
background color of a website with 100 pages,
a style sheet can save you from having to
manually change all 100 HTML documents.
• Using CSS, the change can be made in a few
seconds just by changing one code in the
central style sheet.
Exercise
• Open Notepad (or whatever text editor you
use) and create two files - an HTML file and a
CSS file - with the following contents:
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
sytle.css
body {
background-color: #FF0000;
}
• Now place the two files in the same folder.
Remember to save the files with the right
extensions (respectively ".htm" and ".css")
• Open default.htm with your browser and see
how the page has a red background.
• Congratulations! You have made your first
style sheet!
CSS Properties: Colors and
backgrounds
• Here you will learn how to apply colors and
background colors to your websites. We will also
look at advanced methods to position and control
background images. The following CSS properties
will be explained:
– color
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
– background
Foreground colour
h1 {
color: #ff0000;
}
Colors can be entered as hexadecimal
values as in the example above
(#ff0000), or you can use the names of
the colors ("red") or rgb-values
(rgb(255,0,0)).
Background colour
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Adding an image
body {
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
}
Code to avoid repetition
body {
background-repeat: no-repeat;
}
h1 {
color: #990000;
}
Compiling [background]
• The property background is a short hand for
all the background properties listed in this
lesson.
• With background you can compress several
properties and thereby write your style sheet
in a shorter way which makes it easier to read.
Example
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
•Using background the same result can be
achieved in just one line of code:
background: #FFCC66 url("butterfly.gif")
no-repeat fixed right bottom;
Fonts
You will learn about fonts and how they are applied using
CSS. We will also look at how to work around the issue
that specific fonts chosen for a website can only be seen
if the font is installed on the PC used to access the
website. The following CSS properties will be described:
– font-family
– font-style
– font-variant
– font-weight
– font-size
– font
Font family [font-family]
• The property font-family is used to set a
prioritized list of fonts to be used to display a
given element or web page.
• If the first font on the list is not installed on
the computer used to access the site, the next
font on the list will be tried until a suitable
font is found.
Compiling [font]
• Using the font short hand property it is
possible to cover all the different font
properties in one single property.
• For example, imagine these four lines of code
used to describe font-properties for <p>:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
•Using the short hand property, the code can be
simplified as follows:
p{
font: italic bold 30px arial, sans-serif;
}
Text
Formatting and adding style to text is a key issue for
any web designer. In this lesson you will be
introduced to the amazing opportunities CSS gives
you to add layout to text. The following properties
will be described:
– text-indent
– text-align
– text-decoration
– letter-spacing
– text-transform
Text indention [text-indent]
• The property text-indent allows you to add an
elegant touch to text paragraphs by applying
an indent to the first line of the paragraph.
• In the example below a 30px is applied to all
text paragraphs marked with <p>:
p{
text-indent: 30px;
}
Text alignment [text-align]
• The CSS property text-align corresponds to the
attribute align used in old versions of HTML.
• Text can either be aligned to the left, to the right
or centred. In addition to this, the value justify
will stretch each line so that both the right and
left margins are straight.
• In the example below the text in table headings
<th> is aligned to the right while the table data
<td> are centred.
• In addition, normal text paragraphs are justified:
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Text decoration [text-decoration]
• The property text-decoration makes it is
possible to add different "decorations" or
"effects" to text.
• For example, you can underline the text, have
a line through or above the text, etc.
• In the following example, <h1> are underlined
headlines, <h2> are headlines with a line
above the text and <h3> are headlines with a
line though the text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Letter space [letter-spacing]
• The spacing between text characters can be
specified using the property letter-spacing.
• The value of the property is simply the desired
width.
• For example, if you want a spacing of 3px
between the letters in a text paragraph <p>
and 6px between letters in headlines <h1> the
code below could be used.
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Text transformation [text-transform]
• The text-transform property controls the
capitalization of a text.
• You can choose to capitalize, use uppercase
or lowercase regardless of how the original
text looks in the HTML code.
• An example could be the word "headline"
which can be presented to the user as
"HEADLINE" or "Headline". There are four
possible values for text-transform:
Possible values for text-transform
• capitalize: Capitalizes the first letter of each
word. For example: "john doe" will be "John
Doe".
• uppercase:Converts all letters to uppercase.
For example: "john doe" will be "JOHN DOE".
• lowercase: Converts all letters to lowercase.
For example: "JOHN DOE" will be "john doe".
• none: No transformations - the text is
presented as it appears in the HTML code.
Example
• As an example, we will use a list of names. The names
are all marked with <li> (list-item).
• Let's say that we want names to be capitalized and
headlines to be presented in uppercase letters:
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}

Lecture 9 Cascading Style Sheets

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 9 Cascading Style Sheets

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

• Such link can be created with one line of HTML code

<link rel="stylesheet" type="text/css" href="style.css" />

• The really smart thing is that several HTML documents can

You might also like