 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Measurement Many CSS properties (values within the declaration) require that you specify a unit of measurement, such as spacing between elements, border.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
Chapter 6 Web Typography
CS4370/6370 Web Development Cascading Style Sheets (CSS)
Week 7 Web Typography. 2 Understanding Type Design Principles.
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
CSS: Cascading Style Sheets. 2 History HTML tags were originally designed to define the content of a document. The layout of the document was supposed.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading style sheets (CSS)
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Cascading Style Sheet (CSS)
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
WORKING WITH CASCADING
Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Doman’s Sections Information in this presentation includes text and images from
CSS: Cascading Style Sheets. 2 What are Style Sheets A style sheet is a mechanism that allows to specify how HTML (/XHTML/XML) pages should look The style.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
ITP 104.  Basic HTML using and form  Using Filezilla  public_html ▪ 755 permission  Have a directory name itp104 ▪ 755 permission  classpage.html.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
More CSS.
Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.
 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.
Cascading Style Sheets Objective: Create an external style sheet, embedded style sheet, and an inline style to change the look and feel of a web site.
Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Copyright © 2006, Jumail, FSKSM, UTM Slide 1 Cascading Style Sheets (CSS)
CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:
Cascading Style Sheets Web Design Fairport High School.
Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CSS: Cascading Style Sheets Part II. Style Syntax.
CSS Cascading Style Sheets *referenced from
CSS FOUNDATIONS IN-DEPTH The nitty-gritty of css...
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
CSCE Chapter 3 (Cascading Style Sheets) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department of Computer.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
Cascading Style Sheets™ (CSS)
Cascading Style Sheets
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Second CSS Lecture Applications to XML
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Cascading Style Sheets
CSS Applications to XML 20-May-19.
Cascading Style Sheets™ (CSS)
Presentation transcript:

 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished this and nothing else, they’d save millions of dollars worth of Webmasters’ time.  The HTML style sheet standard enables you to set a great number of formatting characteristics that were never malleable before with any amount of effort. .

 These include exacting typeface controls, letter and line spacing, margins and page borders and expanded support for non- European languages and characters.  They also enable sizes and other measurements to be specified in familiar units such as inches, millimeters, points and picas.  You can also use style sheets to precisely position graphics and text anywhere on a Web page.

 Despite their intimidating power, style sheets can be very simple to create.  Some of these properties, such as text color, background tile, and centered small print, are easy to achieve with ordinary HTML tags. Others, such as line spacing and wide margins, are beyond the scope of HTML.  All of them can now be achieved easily with style sheets.  Style sheet specification are really a separate language.

 Of course, there are some familiar HTML tags in there.  As you might guess, body, p, h1, h2, a, and div in the style sheet refer to the corresponding tags in the HTML documents to which the style sheet will be applied.  In curly braces after each tag name are the specifications for how all text within that tag should appear.  The pt after each measurement means points (72points = 1inch).  If you prefer, you can specify any style measurement in inches (in), centimeters (cm), or widths-of-a-letter- m, which are called ems (em).  font size 3=12-point text, font size 1=6-point text, font size 7=24-point text

 To link this style sheet to the HTML documents, you include a tag in the section of each document.  It contains the following tag:   This assumes the style sheet was saved under the name hhh.css in the same directory folder as the HTML document.

 There are actually three different languages to choose from when you make a style sheet.  Cascading Style Sheets, level 1 (CSS1)  Cascading Style Sheets, level 2 (CSS2)  Cascading Style Sheets, level 3 (CSS3)

 font: Lets you set many font properties at once. You can specify a list of font names separated by commas; if the first is not available, the next is tried, an so on. You can also include the words bold and/or italic and a font size. Each of these font properties can be specified separately with font-family:, font-size:, font-weight: bold, and font-style: italic if you prefer.  Line-height: Also known in the publishing world as leading. This sets the height of each line of text, usually in points.  color: Sets the text color, using the standard color names or hexadecimal color codes

 text-decoration: Useful for turning link underlining off – simply set text decoration to none. The values of underline, italic, and line- through are also supported.  text-align: Aligns text to the left, right, or center (just like the HTML attribute. The CSS1 standard allows a value of justify for text aligned to both left and right margins.  text-indent: Indents beyond the left margin by a specified amount. You can say how far to indent in units (px, in, cm, mm, pt, pc), or you can specify a percentage of the page width (such as 20%)

 margin: Sets the left and right margins to the same value, which can be in measurement units or a percentage of the page width. Use margin- left: and margin-right: if you want to set the left and right margins independently, and margin- top: to set the top margin.  background: Places a color or image behind text, either with a color or an url (address) where address points to a background image tile. Note that this can be assigned not only to the tag, but to any tag or span of text to “highlight” an area on a page.  a:link {color: red;} a:visited {color:red;} a:active {color: black;}

 Each type of specially formatted text you define is called a style class.  A style class is a custom set of formatting specifications that can be applied to any passage of text in a Web page.  For example, suppose you wanted two different kinds of headings in your documents. You would create a style class for each one by putting the following text in the style sheet.  h1.silly {font: 36pt Comic Sans;}  h1.serious {font: 36pt Arial;}  To choose between the two style classes in an HTML page, you would use the class attribute, as follows:  Silly text  Serious text

 In some situations, you might want to specify styles that will be used in only one Web page.  You can then enclose a style sheet between and tags and include it in the beginning of an HTML document, between the and tags.  No tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too.)  If you want to specify a style for only a small part of a page, you can go one step further and a style attribute within a,, or tag.

 and are dummy tags that do nothing in and of themselves except specify a range of text to apply any style attributes that you add.  The only difference between and is that forces a line break, while doesn’t.  Here’s how a sample style attribute might look:  This text is green, but this text is red. Back to green again, but… …now that green is over, and we’re back to the default color for this page.

 For example, the following HTML would position the first image on the page exactly 50 pixels to the left and 40 pixels down from the top-left corner of the browser window.  It would then indent the text exactly 60 pixels from the left edge of the browser window.   This is a pretty picture.

 The following line of HTML shows how to position an image with the top-left corner exactly 50 pixels from the left and 40 pixels down from the top edge of the browser window.   Along with left: and top: positioning, you can also optionally include width: and height: for text blocks.

TagAttributeFunction … Allows an internal style sheet to be included within a document. Used between and. Links to an external sheet (or other document type). Used in the section of the document. href=“…”The address of the style sheet. type=“…”The Internet content type. (Always “text/css”for a style sheets.) “rel=“…”The link type. (Always “stylesheet”for a style sheets.) … Does nothing at all, except provide a place to put style or other attributes. style=“…”Includes inline style specifications. (Can be used in,,, and most other HTML tags.)