Presentation is loading. Please wait.

Presentation is loading. Please wait.

XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)

Published byClementine Jenkins Modified over 9 years ago

Similar presentations

Presentation on theme: "XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)"— Presentation transcript:

1 XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)

2 Definition of a webpage Xhtml page structure Elements id and class attributes Style Sheets Cascading Style Sheets Inline, internal and external style sheets Style rules Overview

3 What is a Web Page? A web page is a simple text file could be written in Notepad we use JPadPro The text is structured using markup (xhtml) markup simply means adding annotati on xhtml markup comprises elements there is a set of elements that we can use The elements represent common features for structure and appearance These include paragraphs, images, headings The page’s appearance is set in a CSS Cascading Style Sheet XML) HyperText Markup Language

4 What is a Web Page? Browsers (Internet Explorer, Firefox, Crome) interpret the xhtml markup with the CSS in order to determine how to display the content The xhtml has a strict syntax / grammar The xhtml must be correct The xhtml can be validated CSS has a strict syntax / grammar The CSS must be correct The CSS can be validated

5 What is a Web Page Text with coded messages telling a browser what to display. Text is coded using start and an end tag The tags and content is called an element A start tag looks like An end tag looks like An element looks like text goes here

6 xhtml page structure html, head and body elements <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en"> Title JPadPro creates a web page with this basic structure so you do not need to remember or type it in add your page content with it’s markup here

7 Basic Structure of a Web Page "> Title This is a division element which is usually a large section of your page..... an element looks like: text goes here the content is between the 2 tags is a start tag is an end tag a tag comprises a < (less than symbol) the tag name in lower case a > (greater than symbol) more page content with it’s markup goes here

8 Common Elements divisions / layers headings paragraphs lists hyperlinks media - images, videos, sound tables forms

9 Elements Logical elements add a logical structure to the text in the page Physical elements affect the appearance of the text

10 Logical Elements include Headings text goes here Paragraphs this is a paragraph – related text as in English Divisions This is a div – a chunk of other elements Spans a small piece of special text

11 Logical Elements include Images Hyperlinks Tables Forms multimedia objects NOT frames

12 Physical Elements Bold Strong Italic Headings are also physical – h1,h2 … h6 changes the size of the text

13 divs and paragraphs (elements) s are elements for marking up larger chunks (compare with book, chapter) s can contain aragraphs, eadings and other s aragraphs are elements for marking up a smaller chunk of connected content – as in English. aragraphs can contain s

14 h1)eadings and spans (elements) eadings are for marking up headings at six levels h1 (largest) to h6 (smallest) s are for marking up small chunks of particular significance eadings and s cannot contain larger chunks - div, paragraphs etc.

15 id and class (attributes) A page may contain many divs and paragraphs so we use attributes to name these id is an attribute used to uniquely identify elements class is an attribute used to identify a group of similar elements

16 divs and paragraphs (elements) id and class (attributes) Anne Other has taught mathematics and computing..... Since 1975 Anne has....

17 Adding XHTML Comments Comments – do not get displayed Anne Other has taught mathematics and computing..... Since 1975 Anne has....

18 Designing page structure Single page Simply use logic to identify the blocks use id and class as needed Multiple pages – a web site Plan shape of each page give each page an identical structure even if not every page has content in each element make id and class consistent on all pages

19 Cascading Style Sheets

20 Style Sheets Styles are used to define the appearance and layout of the page Appearance = color, font, borders etc Layout = positioning, visual structure Styles are associated with elements Styles are defined in Style Rules Style rules have a format: {property:value}

21 Cascading Style Seets CSS CSS are file used to contain style rules Cascading because styles cascade down Browser default are browsers style the same? External CSS (over-ride browser styles) Internal CSS (over-ride browser styles) (over-ride external CSS styles) In-line style (over-ride browser styles) (over-ride external CSS styles) (over-ride internal CSS styles)

22 In-line style rules use ONLY for a one-off style change style element is in the xhtml page original element one-off heading styled element one-off heading style change The style is linked to ONE element in this case a single element note 2 sets of quotes single ‘ to contain the font family name double " to contain the attribute value

23 Stylesheets (internal and external) Affect groups of elements When using internal and external stylesheets we associate an element with a style rule (property:value) Notation element {property:value}

24 Style rules Affecting a single property {property:value} e.g {text-align: right} {letter-spacing: 0.5cm} {font-family: "Comic Sans MS”} Quotes needed here because of the spaces in the font family name note the use of the colon to separate property from value

25 Style rule Affecting a multiple properties {property:value ;property:value; property:value} e.g {color:red;background-color:white} {font-size: 110%; text-align: right; text-transform: capitalize} Note the use of the semi-colon to separate each property setting pair Note that when setting the colour of text it is also necessary to set the background colour Note when setting multiple properties this one-per-line layout is easier to read

26 Styling elements element {property:value} e.g h1 {font-family: "Comic Sans MS"} This will affect ALL elements element {property:value; property:value} e.g body {color:red; background-color:white} This will affect the whole body of the page the style rule for the element the element we want to style

27 Internal stylesheet Use when styles apply to one page only this page h1 {font-family:"Comic Sans MS"} headings on this page

28 External Stylesheet Use when styles apply to many pages Define styles in separate css file save as file named:my_styles.css Contents: h1 {font-family:"Comic Sans MS"} add link in xhtml page to css file see next slide

29 External stylesheet – the web page use when styles apply to many pages this page <link rel = "stylesheet" type = "text/css“ href = "../css/my_styles.css" /> heading on all pages look like this

30 Why use external stylesheets? Content is separate from appearance. One developer does content, one appearance A stylesheet can affect all pages on a site The site has a common coherent appearance A Stylesheet can be validated In-line styles cannot be validated Multiple external stylesheets can be used One for colour, font, text One for layout – positioning

31 Why use internal stylesheet and inline styles? Allows style changes to be made for one page. An individual developer can customise one page OR can customise an element, class, id Can be used to try out styles quickly test via in-line copy into an internal stylesheet transfer to an external stylesheet

32 Colo(u)r Always set BOTH color – text background-color – background element {color:your-text-color; background-color:your-background-color}

33 Adding color – names and codes Color namescyan, blue, red etc (limited number) rgbvalues (0-255) or percentages Color codes #rrggbb red green blue h1 {color:cyan; background-color:blue} h1 {color:rgb(0,255,255);background-color:rgb(0%,0%,100%)} h1 {color:#00FFFF; background-color:#0000FF}

34 Help to choose colors http://www.december.com/html/spec/colorspottable.html http://web.forret.com/tools/color_palette.asp http://ficml.org/jemimap/style/color/wheel.html http://www.w3schools.com/css/css_colors.asp http://www.wellstyled.com/tools/colorscheme2/index-en.html

35 Changing Fonts  font-family cursive, sans-serif, serif  font-family Arial, “Times New Roman ", “Comic Sans MS "  font-size 10pt, 20%, 1.5em, large, smaller  font-style italic, normal  font-weight bold, bolder.. 100,500, normal  font-variantsmall-caps, normal  font: normal, cursive, small-caps,1.5em Fonts that work in all browsers http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

36 Examples /* for all text */ body {color:#FF99CC; background-color:#660099; font-family:"Comic Sans MS"} /* for a class = date */.date {color:#FFCCFF; background-color:#660099} /* for an id = heading */ #heading {color:#660099; background-color:#CC99FF; font-size:18pt}

37 Text text-decorationunderline, text-alignleft, right, center text-transformcapitalize, lower-case Setting more than one element to the same style Setting h1 and h2 to have the same font h1,h2 {font-family: Arial} Note the comma to separate the 2 elements

38 Style in named divs We have used the id attribute to uniquely identify elements This code sets the colours of the element with id = " main " (a div) #main {color: red; background-color: white} Note the # symbol references an id

39 Styles for classes We have used the class attribute to identify related elements This code sets the colours of the element with class = "name " (a div).name {font-style: italic} Note the. (full stop) symbol references a class

Download ppt "XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)"

Similar presentations

Introduction to HTML & CSS

Introduction to HTML & CSS
Intro To Cascading Style Sheets By Mario Yannakakis.

Intro To Cascading Style Sheets By Mario Yannakakis.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
Cascading Style Sheets

Cascading Style Sheets
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.

Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Cascading Style Sheets

Cascading Style Sheets
Today CSS HTML A project.

Today CSS HTML A project.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.

HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.

XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.

Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
1 Getting Started with CSS. 2 CSS Cascading Style Sheets XHTML provides structure for our documents (web pages) CSS provides Style or Presentation for.

1 Getting Started with CSS. 2 CSS Cascading Style Sheets XHTML provides structure for our documents (web pages) CSS provides Style or Presentation for.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.

More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.
Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.

Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.
© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles.

© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.

Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.

Similar presentations

Ads by Google