Top Banner
Cascading Style Sheets CSS
28

Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Mar 28, 2015

Download

Documents

Jeremiah Reese

css stylesheet

css code

css file style sheet

advantages of css

css commands

style attribute

style formatting

implementation css files

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Cascading Style Sheets

CSS

Page 2: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Learning outcome

• CSS– Introduction– Motivation– Advantages– Implementation– Classes & Ids– <span> and <div>– General Model– Validation

Page 3: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

CSS Introduction• HTML was originally designed as a simple way of presenting

information, with the aesthetics less important than the content. Of course as the web grew, presentation become much more important.

• New tags were created to allow greater presentation freedom (<font>). HTML coders quickly noticed that they were retyping the same old tags over and over leading to huge HTML files and above all, time consumption and frustration.

• Imagine you've just designed a two hundred page web site for a client, who at the last minute decides the font is a little two small or the typeface should be serif instead of sans-serif

Page 4: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Motivation• In 1996 (and 1998) CSS (Cascading StyleSheets) became a formal

recommendation of the W3C. Stylesheets act as partners to HTML/XHTML documents; taking care of all layout, fonts, colors and the overall look of a page/site.

• With CSS the idea is to leave most of the formatting out of your HTML/XHTML files and use only nice structural elements (like headings, paragraphs and links). Thus separating structure and presentation.

• If you decide to change the look of a site, you modify the CSS file (style sheet) and all the HTML/XHTML pages reading from that file will display differently. This makes maintenance of your design much easier.

Page 5: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

A Simple Table • Classic HTML• <table>• <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"• color="red"><b>this is line 1</b></font></td></tr>• <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"• color="red"><b>this is line 2</b></font></td></tr>• <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"• color="red"><b>this is line 3</b></font></td></tr>• </table>

• With CSS (assuming "subtext" is defined)• <table>• <tr><td class="subtext">this is line 1</td></tr>• <tr><td class="subtext">this is line 2</td></tr>• <tr><td class="subtext">this is line 3</td></tr>• </table>

Page 6: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Advantages of CSS1. Makes web site maintenance easier

– Fewer lines to change.– Fewer pages to upload.

2. Improves page load time for a site– Style sheet is downloaded once and cached.

3. Insures page consistency within a site1. Every page that uses your style sheet is derived from an identical style

4. Also helps improve accessibility– People can define own style sheets to override default settings (poor vision,

colorblind, etc).– Mobile devices can have customized sheets.

5. There are dozens of extra formatting options and possibilities available through stylesheet commands that are not possible through normal HTML/XHTML.

Page 7: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Implementation

• CSS files are termed “cascading” stylesheets for two reasons: – one stylesheet can cascade, or have influence over, multiple

pages.– Similarly, many CSS files can define a single page.

• There are 3 ways to implement CSS into your site:– Use one CSS file for all your pages. (Best Way!)– Integrate CSS commands into the head of your documents.– Use the style attribute to put CSS code directly into an element.

• CSS allows you to use all three of these methods together, inheriting and overriding values as you go.

Page 8: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

One Stylesheet (to rule them all)• You write just one .css file and have all pages reference it. Example: mystyle.css

• Syntax in CSS is DIFFERENT than in XTHML:

– selector {property: value; property: value; property: value; }

• Examples:– body {background: blue; color: white; }– /* Previously we set the body element this way: */– /* <body bgcolor="green" text="white"> */

• h1 {font-family: Verdana, sans-serif; color: red; font-size: 20px; }

• p, div, h2 {color: #00DDFF; width: 80%; } /* modifies 3 tags */

Page 9: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Syntax Rules

1. The selector is usually the name of a tag, without its surrounding angle-brackets.

– div, span, h1 etc.

2. The braces are {curly}, not [square] or (round).

3. 3. After the property name there is a colon, and between each individual part there is a semicolon. Each of these pairs of properties and values is a declaration.

– You can put each separate declaration on a different line to make it easier to read.

Page 10: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Attaching your StyleSheet• In order for your XHTML pages to use a CSS, you’ll need to show

them where the css file is.

• Put this line of code into the head part of any documents you want to read this file:

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

• This could be a new tag to you — rel stands for the file’s ‘RELationship’, and type shows that it’s a text file acting as a CSS stylesheet

• You can link multiple stylesheets to a page if you want,.– (one file for your fonts, another for margins and spacing etc.)

Page 11: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Individual Style blocks• If, a number of pages need some particular styling and you need to override the

values you’ve defined in your main stylesheet, you can use the style blocks method.

• To embed style, put this into your head: <style type="text/css"> p {font-weight: normal; color: gray; } h1 {color: black; } </st yle>

• The type attribute here allows browsers to treat this code as CSS. CSS code applied in this way is not technically a stylesheet , but is called an “inline style block”

Page 12: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Using the Style Attribute• If you need to modify one tag on its own you can embed style information

into it using the style attribute:

<p style="color: blue; font-family: Arial; ">

• The style formatting will stop as soon as you close the tag it’s applied to, just like any other attribute, so it will be just this paragraph that will be affected. Also note that there aren’t any curly braces used here, but the colon/semicolon rule still applies.

• This method is useful for once-off formatting, and overriding previously defined properties, but you shouldn’t use it very much. If you find yourself adding the same style to multiple tags, it might be worth your while promoting it to your main stylesheet, to save time and space.

Page 13: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Classes and IDs

• If you have been using a stylesheet to reformat HTML tags you might wish you could just set up certain ways of formatting HTML elements and apply them to multiple tags.

• You also might want to be able to define multiple types of a single tag, such as 2-3 standard paragraph types.

• Using classes and ids (which are roughly the same thing), you can set up these custom options, which allow you to format single tags in many different ways. They're easy to set up, fast and flexible

Page 14: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

classes• Class selectors are created by typing a dot followed by the class name. Example: You want to format lots of individual pieces of text as 12 point red

Verdana, so put this line of CSS into your style:

.caution {font-family: Verdana; font-size: 12pt; color: red; } .center {text-align:center;}

• Note the dot before the name you want to use for it. You can add classes to any element.

Examples:<p class="caution">

<h1 class="center">

• NOTE: For classes that have multiple attributes, try to name the classes based on their function rather than their presentation

Page 15: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Anonymous classes

</head> <style> <!-- .fred { color: #eeebd2; background-color: #d8a29b; border: thin groove #9baab2; } --> </style></head><body> <h1 class="fred">A Simple Heading</h1> <p class="fred">some text . . . some text</p></body>

Page 16: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

id

• ids are practically the same as classes, with one difference. Only one element can be given each id per page. The code is the same, but with hashes (#) in place of the dots.

#header {width: 90%; background: white; font-size: 20px; color: purple; }<h1 id="header">stuff</h1>

• NOTE: – Both class and id names can contain characters a-z, A-Z, digits 0-9,

underscores and hyphens, but they cannot start with a number or dash.

Page 17: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Limited Classes• It is possible to create "limited" classes that can only be applied to specific tags. This allows

you to reuse tag names and control the application of classes without resorting to using ID's

/* ******************** A Custom Unordered List ********************/ul.cust{list-style-type:none;padding:0px;margin:0px;}li.cust{background-image:url(arrow.gif);background-repeat:no-repeat;background-position:0px 5px;padding-left:14px;}

Page 18: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

<span> & <div>

• <span> and <div> are used to mark specific sections of code and are only different in that div tag acts as if a <br/> was declared before and after the start and end tag. These two tags are incredibly useful tools for identifying and selecting sections of text that you want to use a class or id on.

<span class="caution center">affected text</span>

• This would create your desired text, without a font tag in sight. The span tag does absolutely nothing on its own without the class attribute.

Page 19: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Divisions

• Styles can be applied to blocks of HTML code using div

<head> <style> <!-- .myclass { color: blue; background: cyan; text-decoration: underline; border: thin groove red; } --> </style></head><body> <div class="myclass"> <h2>A Simple Heading</h2> <p>some text . . . </p> </div></body>

Page 20: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Spans• spans are similar

to divisions<head> <style> <!-- .myclass { color: red; background: cyan; text-decoration: none; } --> </style></head><body> <span class="myclass"> <h2>A Simple Heading</h2> <p>some text . . . </p> </span></body>

Page 21: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

IDs<head> <style> <!-- #list1 { color: blue; background: cyan; text-decoration: underline; border: thin groove red; } --> </style></head><body> <ul id="list1"> <li>First</li> <li>Second</li> <li>Third</li> </ul></body>

• Classes specify styles for particular instances of an element

• IDs specify the style of a single element

• IDs allow the element to be identified by other elements on the page

Page 22: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

General Model/* ***** Styles specific to this site (may be separate sheet)************/

body {background-color: teal}h1 {color:black; font-size:20pt}

/* ***** Styles appropriate whenever (may be separate sheet) *************/

/* *** Color ** */

/* Color class selectors *//* Example: <h1 class="center black"*/

.black {color:black}

.aqua {color:aqua}

.blue {color:blue}

.white {color:white}

.yellow {color:yellow}

Page 23: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

CSS Documents Can Be "Validated"

You can check your .css documents to see if the are "valid" by going to the following link:

http://jigsaw.w3.org/css-validator/

If your css file violates any rules or is missing any required elements it will generate errors.

Page 24: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Help on CSS

W3C Schools: (you can learn everything here, and they have "try it“ pages that let you test sections of CSS code)

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

Other sites to look at:• http://www.tizag.com/cssT/pclass.php• http://www.echoecho.com/cssintroduction.htm• http://www.davesite.com/webstation/css/chap01.shtml•http://www.yourhtmlsource.com/stylesheets/

introduction.html

Page 25: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Revision• Data Representation

– Understand the binary system– Integer representation– Floating point – Underflow and overflow in floating point representation– ASCII

• Data Storage– the difference between difference types of memories and how do they work– Understand the role of cache memory – Understand how the cache memory enhances computer’s performance– Temporal and locality principles– Understand the role of a decoder – Address space vs the number of address lines

• Data processing– The component of the CPU– How these component communicate with each other– How does the CPU communicate the different memories– Advantages and disadvantages of pipelining – How to overcome pipelining hazards

Page 26: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Revision (Con’t)

• Turing Machine– Understand the concept of Turing machine– Be able to write a simple turing machine programs – i.e. Program to work out the two’s complement of a binary sequence or a program that mulitply a binary number by 2 or 4 . ext

• Operating systems:– Memory management– Process management– I/O device management

• Computer networks– Network classes– IP addressing– subnetting

• XHTML– Know the difference between HTML , XML and XHTML and understand why it is advisable to code using xhtml.– Different type of DTD– Well formed vs valid xml document

• CSS– Difference between differente styles– Iinline style– Embedded – External CSS

• Next Semester we will have an extra lecture– Introduction into Assembly language (included in the exam)

Page 27: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

2nd coursework

• Check your email on 22nd of December• The coursework will be available on my website

and will be emailed to you.

• You will be able to see the marks for your first assignment on the Intranet by Monday next week

• I will be running Math workshop next semester. So you can see at least once a week.

• Any problems with Data Rep course, just ask!

Page 28: Cascading Style Sheets CSS. Learning outcome CSS – Introduction – Motivation – Advantages – Implementation – Classes & Ids – and – General Model – Validation.

Fin

Good luck


Related Documents
CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)

Category: Documents
CSS: Cascading Style Sheets - elite.polito.it · Summary •Introduction •CSS syntax •CSS selectors •CSS cascading •CSS box model •CSS positioning schemes •Page layout

CSS: Cascading Style Sheets - elite.polito.it · Summary...

Category: Documents
CSS :cascading style sheetsloutfi.fr/site_icn/css.pdf · CSS : Cascading Style Sheet S.Loutfi • Le CSS est un langage informatique de é des pages Web. • Le code CSS (Cascading

CSS :cascading style sheetsloutfi.fr/site_icn/css.pdf ·...

Category: Documents
Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) - Gunadarma...

Category: Documents
CSS: Cascading Style Sheets - polito.it · Cascading Style Sheets •CSS: Cascading Style Sheet •CSS 1: W3C recommendation (17 Dec 1996) •CSS 2.1: W3C Recommendation (7 June 2011)

CSS: Cascading Style Sheets - polito.it · Cascading Style....

Category: Documents
CSS: Cascading Style Sheets

CSS: Cascading Style Sheets

Category: Documents
Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties.

Cascading Style Sheets 23 rd March. Cascading Style Sheets.....

Category: Documents
Css = cascading style sheets

Css = cascading style sheets

Category: Documents
Cascading style sheets (css)

Cascading style sheets (css)

Category: Documents
CSS-Cascading Style Sheets

CSS-Cascading Style Sheets

Category: Documents
Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final.

Cascading Style Sheets II Robin Burke ECT 270. Outline...

Category: Documents
CSS Cascading Style Sheets Cascading Style Sheets 1.

CSS Cascading Style Sheets Cascading Style Sheets 1.

Category: Documents