Transcript Using Cascading Style Sheets (CSS)

Using Cascading Style Sheets
(CSS)
Dept. of Computer Science and
Computer Information
CSCI N-100
What is CSS
• CSS is an abbreviation for Cascading Style Sheets.
Style sheets are simply text files (.css ), composed
of lines of code that tell browsers how to display
an HTML page.
• They give the designer more control over the
appearance of a webpage by allowing to
specifically define styles for elements, such as
fonts, on the page.
• By using CSS one could separate HTML content
from its appearance, distinguishing style from
structure.
What is CSS
• In CSS, a style is a grouping of different properties given a common
name. If you were to re-create this paper for the web, you could
define styles for the text on your title page, outline page, and so on.
• For our example, you could create a style called topicHeadings and
specify its font properties to be bold and have a font-size of 14pt. A
specification of a property is known as a rule. With a style
established, whenever you type in text for a topic heading, you can
set it to the topicHeading style and all of that style's properties are
applied to the selected text in one step.
• Later, if you decide to change the font color or some other aspect of
the style, you can just change its definition or specification in the
style sheet and the appearance of all text marked with that style
will change throughout the webpage or website.
Why are style sheets called
'cascading'?
• As already indicated, a designer can create a style sheet to tell a
browser how she prefers a webpage displayed, but browsers and
even the users viewing the webpage may apply additional style
sheets of their own.
• Since several style sheets may be affecting the appearance of an
HTML page, there must be an order in which style sheets are
applied.
• The style sheets are applied in a 'cascading' order with the
designer's style sheet having the strongest claim, followed by the
user's, and then the browser's.
• If there are conflicts between the designer's and user's style sheets,
the browser's would resolve it. Although, in the end, the user can
always override any other style sheet if she wishes.
Concept
• One way to think of CSS is as a word processing tool for the web.
• For example, if you were writing a paper in a word program, you
may have a title page, an outline page, and then the pages for the
rest of your paper. For your title page, you set the text of your
paper's title to be bold, Times New Roman, and have a font-size of
18pt. On your outline page, you set the text to be normal with a
font-size of 12pt. In the rest of your paper, for all of the topic
headings indicated in your outline, you set that text to be bold and
have a font-size of 14pt. For the text in your paragraphs, you set
them to be normal with a font size of 12pt. Within your paper,
there are quotes that you want to indent and have in different
fonts, etc.
• Bold, font, and font-size are all properties of text or Type. By
specifying how each type element in your paper appears, what you
are essentially doing is creating styles.
Advantages of CSS
•
•
•
•
•
More Precise Formatting
Separation of HTML Content from Appearance
Saves Time
Easier Site Maintenance
Web Accessibility
Disadvantages of CSS
•
•
•
•
Inconsistent Browser Support
Larger Initial Time Commitment
Not Perfect
Bugs
Implementation Methods
• There are three methods of CSS
implementation:
– external,
– Internal or embedded,
– and inline.
• Which method to use depends entirely on
how large your website is and what type of
maintenance will be kept.
External style sheets
• For larger sites, i.e. consisting of more than four or five HTML
pages, external style sheets are recommended.
• By creating an external CSS file that links to all the your pages, you
can update the appearance of your pages by changing the values in
just one file.
• This is great for management of large, sophisticated sites. For
example, different departments of an organization can create their
own departmental webpages yet still project a consistent overall
organization image by sharing a few CSS files.
• External style sheets also save time, not only in terms of when
you're updating or editing, but also download time. Since one file
contains all the style instructions for a website, once it is
downloaded, all the pages that are linked to it can refer to it. It is
not downloaded every time a page is requested, which makes your
website much smaller and quicker to download.
Internal (or Embedded) style sheets
• For smaller sites, maybe less than two to three pages, it
may be easier to use embedded CSS.
• Internal (or Embedded) style sheets only affect the style of
the pages they are written into. When you update the
appearance of a website, you will have to edit every page.
Inconsistency may arise if you miss any of the pages.
• Instead of one file, your style instructions are contained in
every file and they will be downloaded every time a user
sees a page from your site.
• This repeated action will slow download time. If your site is
small and it does not contain many style instructions, then
download and maintenance time should not be an issue.
Inline CSS
• Many web developers think that inline CSS should be
avoided, because it really does not support the CSS
philosophy of separation of content from appearance
nor does it take advantage of CSS's site management
capabilities (So when internal style sheets are
mentioned, it usually refers to embedded style sheets.)
• Inline CSS is written among the rest of the HTML code,
similar to presentational HTML tags. To edit, you would
have to go through the page line by line to find the CSS
code. This is not an efficient method of implementing
CSS.
Here are examples of an inline style rule. Note
the structure of the rule.
• Inline style for the body of the web page
• <body style = "background-color: maroon; font-family:
"Vladimir Script", serif, sans-serif;">
• Inline style for a paragraph
• <p style = "background-color: blue; color: aqua; font-size:
25px;">Some text goes here</p>
• Inline style for a paragraph
• <p style = "font-size: 12px; font-weight: bold; text-indent:
30px;">Some Text goes here</p>
Looking below, this is a sample of an inline style. The style being used is for the body of
the web page. The information is the background color for the web page is maroon; the
font style (family) has three selections - the first selection is a script, or cursive style of
lettering, the last two are default styles. If the user viewing your page does not have the
first font on their computer, the browser will go to the next option (serif). The browser
will display the text in a default serif setting.
Note the style is written inside the html <body> tag. That is why it is called inline.
It is inline with the tag. An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly
<html>
<head>
<title>CSS - Inline style</title>
</head>
<body style = "background-color: maroon; font-family: "Vladimir Script", serif, sans-serif;">
<h2>Cascading Style Sheets - N100</h2>
<p>Here are some notes and links to help with the CSS for the web page.</p>
</body>
</html>
An internal style sheet (also called embedded sometimes) should be used when a single
document has a unique style. By using an internal style, you are telling the browser how to
display similar elements in the web page. All h1 headings will have the same style – orange
text and centered. All paragraphs will have the same style – font size of 20 and font style of
Times New Roman.
You define internal styles in the head section of an HTML page, by using the <style> tag, like
this:
<html>
<head>
<title>CSS – Internal style</title>
<style type="text/css">
body {background-color: #d0e4fe;}
h1 {color: orange; text-align: center;}
p {font-family: "Times New Roman"; font-size: 20px;}
</style>
< /head>
<body>
<h1>Cascading Style Sheets - N100</h2>
<p>Here are some notes and links to help with the CSS for the web page.</p>
</body>
</html>
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.
• 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");}
• Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
head section.
<html>
<head>
<title>CSS - External style</title>
< link rel="stylesheet" type="text/css" href="mystyle.css" />
< /head>
<body>
<h1>Cascading Style Sheets - N100</h2>
<p>Here are some notes and links to help with the CSS for the web page.</p>
</body>
</html>
References
• Wellesley College Information Services
http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssMain.html
• W3schools
http://www.w3schools.com/css/default.asp