Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings

Cascading Style sheets The focus on HTML is/was structure & content, not presentation. –Web originated as medium for communication among researchers, not artists or advertisers –Very, very difficult to control display across different platforms, different window sizes, different computers. Cascading Style Sheets is attempt to improve presentation –separate structure & content from display –Specify display for multiple instances of tags, multiple pages Evolving technologies: XML, XSL, ?

Styles specify aspects of the formatting of tags in addition or to change current formatting. Aspects can include fonts NOTE: font tag sets specific attributes in fixed order. Can also use font-family, font-size, etc. color and background color position, indenting, action of overlap borders

CSS examples p {background: yellow; font-family: arial; color: red} p.intro {text-indent: 200pt; background: gray; font-family: impact; color: red} …. …

CSS rules can be in… External file. Save as basestyles.css. – Internal: in head section – rules In-line: applies to just one section of HTML – Cascading refers to which rules apply: the one closest to the code ‘wins’.

CSS test H1 {font: times; font-size: 20pt} img {border: groove} P {font-size: 10pt; color: red; text- align: justified} p.intro {font-size: 11pt; background: yellow; text-align: left} Here is text outside any tag. here is a heading 1 Here is an introductory paragraph here is a regular paragraph.

CSS Layout concepts is a new block type tag with no default characteristics to be used as you define it. Tags are ‘in’ parent tags: – … … … … … … The body tag is parent to the h1 and the second p tag. The h1 tag is parent to the first p tag. The div tag is parent to the 3 rd p tag. –Certain style calculations are based on the tag’s parent.

div Can have id or class to identify it for a style Div can also be used to divide portions of the HTML document AD/Preview: Creating Dynamic Web Documents goes more into styles. See also examples from my home page.

CSS layout concepts relative positioning is from where the element would otherwise be. Absolute positioning from the parent. Offsets are the top and left position values. Top is from the top so higher numbers mean further down the page. Default unit is pixels. –IMG {position: absolute; top: 100; left: 0}

Challenge(s) Use styles to specify absolute location of 3 images on page. –give each image its unique id. –specify style for each img id to be in specific location. –can also specify border, padding, margin.

CSS layout concepts Images are surrounded by –padding –border. Can specify which edge (top, left, bottom, right), type (double, ridge, others), thickness (thin, medium, thick or value: 10px) and color. – margin IMG {padding: 30; border: groove red; margin: 40} The rule can be –in head section: applies to all –in parent: applies to all tags in parent –in tag itself

image has transparent background padding border margin

External file Create set of rules (copy and paste what you just did) and save as base.css Find/create HTML file (copy what you just did) CSS test … … Caution: textbook examples in chapter 16 refer to styles defined in chapter 15 using an external style sheet. add additional or overriding rules

Meta tags Go in head section. Various types. One use is for browsers and search engines.

Project 3 requirements At least one use of CSS Put keyword meta tag in the head section of the index.html file. –This may be a frameset file. –You could include keyword & description meta tags for all the pages. Frames, tables, lists, image map, animated gif, mailto, YOUR NAME, biblio/works cited page if you use other sources, JavaScript, form(s)

Homework Postings: –Do searches using 'your' keywords, use at least 2 search sites, comment on results. Work on Project 3 (due May 6) Get Project 1 & Project 2 up on TA's class site. –If you are continuing your project 2, you still need a link from both lists.