Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets by Pavlovic Nenad by
2
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
3
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.
4
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.
5
Types of Style Sheets Style sheets can be delivered to an HTML by a variety of methods: Inline (add a style to an element): Text Text Embedded (controls a whole page): <HEAD><STYLE> P { font: 13pt verdana; } </STYLE></HEAD>
6
Linked (applies a style on an entire page): <HEAD> </HEAD>
7
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: SELECTOR | PROPERTY | VALUE BODY { color: yellow; } BODY { color: yellow; }
8
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.).
9
Box Formatting Model Padding: distance between element and border. Margin: space outside the border. Element Padding Border Margin 4 th 1 st 2 nd 3 rd
10
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
11
Simple Examples Background Fonts Paragraphs Headings Tables etc..
12
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
13
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; }
14
List of pseudo classes: :first-child :link (A) :visited (A) :hover (A) :active (A) :focus (A) :lang :first-line (P) (example) (example) :first-letter (P) (example) (example) :before (example) (example) :after
15
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; }
16
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: … example … example example
17
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.
18
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… Examples… Examples…
19
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 Z = 100 Z = 50 Z=70
20
@media @media sMediaType { sRules } sMediaType: 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;} }
21
@import @import [url] ( sUrl ) ; sUrl: sUrl: String that specifies the URL that references a cascading style sheet. @import url("URL"); P {color:blue} </STYLE>
![@import [url] ( sUrl ) ; sUrl: sUrl: String that specifies the URL that references a cascading style sheet.](http://images.slideplayer.com./24/7400027/slides/slide_21.jpg "@import url( URL ); P {color:blue} </STYLE>.")
22
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/academix For any further question you can contact me at: pavlovic@city.academic.gr
Similar presentations
