C ascading S tyle S heets

Cascading Style Sheets by Pavlovic Nenad

Presentation Contents • What is CSS? • Why CSS? • Types of Style Sheets • Style Sheets Syntax • Box Formatting Model • Inheritance & Cascade • Simple Examples • Classes, Pseudo Classes & IDs • Advanced page look using CSS • Groups of elements (DIV & SPAN) • Z – index • @import and @media roles

CSS – what is it? • Think of style sheets as any kind of design element: including type face, background, text, links colors, margin controls and placement of objects on a page. • Also, we can say that CSS is a set of style definitions; styles that describe each HTML element.

Why CSS? • Using the CSS we can control all pages in our site with changing a single file (CSS file). • HTML should be used only as a formatting language, responsible for the basic layout of a page. • CSS is used for design of pages.

Types of Style Sheets • Style sheets can be delivered to an HTML by a variety of methods: • Inline (add a style to an element): <P style=“font: 13pt verdana”>Text</P> • Embedded (controls a whole page): <HEAD> <STYLE> P { font: 13pt verdana; } </STYLE> </HEAD>

Linked (applies a style on an entire page): <HEAD> <LINK rel=“stylesheet” href=“./path/file_name.css” type=“txt/css”> </HEAD>

SELECTOR | PROPERTY | VALUE BODY { color: yellow; } Style Sheet Syntax • Whatever method we use to deliver style to HTML (inline, embedded or linked), the syntax will going to be similar in all cases. • CSS syntax contains of three parts:

Selectors are usually standard HTML elements (H1, P, BODY, TABLE, etc.). • Properties are names of attributes that are used to describe an object (color, text, font-face, font-size, etc.). • Values defines properties (color: yellow, font-face: arial, etc.).

4th 3rd 2nd 1st Element Padding Border Margin Box Formatting Model • Padding: distance between element and border. • Margin: space outside the border.

Inheritance & Cascade • Cascade: If we have multiple styles in an individual HTML page, browser will follow cascade (order) to interpret style information. e.g. Assume that we have 3 style types in our page, browser will first interpret linked style, then embedded and inline at last. • Inheritance: If we state a specific text color in a paragraph tag, all tags within that paragraph will inherit specified color. example

Simple Examples • Background • Fonts • Paragraphs • Headings • Tables • etc..

Classes, Pseudo Classes and IDs • Classes are the instances of style definitions. • If we want to brake down our style rules into small very precise peaces, we will use classes. • Assume that we defined style for one element and then we create its class, everything that is nor redefined in a class is inherited from the higher level class or element. P.highlight { background-color: yellow; color: red; } example

The second type of classes are pseudo-classes. • Pseudo-classes are predefined classes that already mean something to the browser. They can’t be defined by user, but user can apply values to them! A:link { color: blue; } A:visited { color: red; }

List of pseudo classes: • :first-child • :link (A) • :visited (A) • :hover (A) • :active (A) • :focus (A) • :lang • :first-line (P) (example) • :first-letter (P) (example) • :before (example) • :after

Pseudo-classes can be used in combination with classes like: A.special:link { color: white; text-decoration : none; } A.special:visited { color: #FFF000; text-decoration : none; }

IDs • IDs are like classes, except they are not necessarily associated with elements (tags). • IDs are defined as follows: #important { font-weight : bold; color : Yellow; } • To use apply ID to an element we should type: <P id=“important”>…</P>example

Advanced page look • CSS gives us a much more flexibility in layout designing. • The advantage is that we can place “objects” (words, paragraphs, pictures, lines, etc.) exactly where we want on the page (positioning and Z-index). • Also, we can group elements and then control them as a group. For this purpose is used DIV tag. • On the same way we can control parts of text which is “bounded” with SPAN tag.

Groups of elements (DIV & SPAN) • DIV provides a means for grouping elements and assigning attributes to the group. • It is nested within the BODY! • SPAN encloses text within generic inline element that you can define with style sheet. • It is nested within any BLOCK element. Examples…

Z = 100 Z=70 Z = 50 Z-index • Z-index enables us to position elements in the third dimension (depth). • It orders the elements with the lower index on the top of elements with higher index. example

@media • @media sMediaType { sRules } sMediaType: • String that specifies one of the following media types: screen: Output is intended for computer screens. • printOutput is intended for printed material and for documents viewed in PrintPreview mode. • all Output is intended for all devices. sRules: • String that specifies one or more rules in a styleSheet object. // For computer screens, the font size is 12pt. @media screen { BODY {font-size:12pt;} } // When printed, the font size is 8pt. @media print { BODY {font-size:8pt;} }

@import • @import [url] ( sUrl ); sUrl: • String that specifies the URL that references a cascading style sheet. <STYLE TYPE="text/css"> @import url("URL"); P {color:blue} </STYLE>

Thank you for joining the presentation Thanks a lot to Chrysafis Theodoros for a help.Presentation content will be placed on the AcademiX web page:www.city.academic.gr/academixFor any further question you can contact me at: pavlovic@city.academic.gr

C ascading S tyle S heets