/
Using Cascading Style Sheets (CSS) Using Cascading Style Sheets (CSS)

Using Cascading Style Sheets (CSS) - PowerPoint Presentation

kittie-lecroy
kittie-lecroy . @kittie-lecroy
Follow
425 views
Uploaded On 2015-10-08

Using Cascading Style Sheets (CSS) - PPT Presentation

Dept of Computer Science and Computer Information CSCI N100 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 ID: 153458

css style sheets page style css page sheets font text html inline body web sheet size title color pages

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "Using Cascading Style Sheets (CSS)" 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.


Presentation Transcript

Slide1

Using Cascading Style Sheets (CSS)

Dept. of Computer Science and Computer Information

CSCI N-100Slide2

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.Slide3

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. Slide4

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. Slide5

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.Slide6

Advantages of CSS

More Precise Formatting

Separation of HTML Content from Appearance

Saves Time

Easier Site Maintenance

Web Accessibility Slide7

Disadvantages of CSS

Inconsistent Browser Support

Larger Initial Time Commitment

Not Perfect

Bugs Slide8

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. Slide9

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.Slide10

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. Slide11

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. Slide12

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>Slide13

<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>

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 sparinglySlide14

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>Slide15

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.

<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>

Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

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.Slide16

References

Wellesley College Information Services

http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssMain.html

W3schools

http://www.w3schools.com/css/default.asp