XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)
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
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
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
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
xhtml page structure html, head and body elements <html xmlns = " 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
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
Common Elements divisions / layers headings paragraphs lists hyperlinks media - images, videos, sound tables forms
Elements Logical elements add a logical structure to the text in the page Physical elements affect the appearance of the text
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
Logical Elements include Images Hyperlinks Tables Forms multimedia objects NOT frames
Physical Elements Bold Strong Italic Headings are also physical – h1,h2 … h6 changes the size of the text
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
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.
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
divs and paragraphs (elements) id and class (attributes) Anne Other has taught mathematics and computing..... Since 1975 Anne has....
Adding XHTML Comments Comments – do not get displayed Anne Other has taught mathematics and computing..... Since 1975 Anne has....
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
Cascading Style Sheets
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}
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)
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
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}
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
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
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
Internal stylesheet Use when styles apply to one page only this page h1 {font-family:"Comic Sans MS"} headings on this page
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
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
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
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
Colo(u)r Always set BOTH color – text background-color – background element {color:your-text-color; background-color:your-background-color}
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}
Help to choose colors
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
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}
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
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
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