cascading style sheets css by pavlovic nenad by. 2cascading style sheets presentation contents what...
Post on 12-Jan-2016
226 Views
Preview:
TRANSCRIPT
CCascading ascading SStyle tyle SSheetsheetsCSSCSS
by by
Pavlovic NenadPavlovic Nenad
by by
Pavlovic NenadPavlovic Nenad
22Cascading Style SheetsCascading Style Sheets
Presentation ContentsPresentation Contents
What are CSS? What are CSS? History of CSSHistory of CSS Why CSS?Why CSS? Types of Style SheetsTypes of Style Sheets Style Sheets SyntaxStyle Sheets Syntax Cascading ModelCascading Model Box Formatting ModelBox Formatting Model CSS SyntaxCSS Syntax Inheritance Inheritance Classes, Pseudo Classes & IDsClasses, Pseudo Classes & IDs Groups of elements (DIV & SPAN)Groups of elements (DIV & SPAN) BenefitsBenefits DisadvantagesDisadvantages ConclusionConclusion
33Cascading Style SheetsCascading Style Sheets
What are CSS?What are CSS?
Cascading Style Sheets are formatting Cascading Style Sheets are formatting information that is applied to HTML.information that is applied to HTML.
Cascading Style Sheets enable a Web Cascading Style Sheets enable a Web site's presentation (design) to be separated site's presentation (design) to be separated from its content and structure. from its content and structure.
Using the CSS every existing HTML tag Using the CSS every existing HTML tag (element) can be formatted as we desire.(element) can be formatted as we desire.
44Cascading Style SheetsCascading Style Sheets
HistoryHistory
First version of CSS (CSS1) is forged by W3C First version of CSS (CSS1) is forged by W3C (World Wide Web Consortium) in 1996.(World Wide Web Consortium) in 1996.
It was partially supported by Browsers.It was partially supported by Browsers.
In 1998 CSS2 have been released. In 1998 CSS2 have been released.
Fully supported by Browsers. Fully supported by Browsers.
55Cascading Style SheetsCascading Style Sheets
Types of Style SheetsTypes of Style Sheets
Style sheets can be delivered to an HTML in Style sheets can be delivered to an HTML in three ways:three ways:
InlineInline (add a style to an element):(add a style to an element):
<P style=“font: 13pt verdana”>Text</P><P style=“font: 13pt verdana”>Text</P>
EmbeddedEmbedded (add a style to specific page):(add a style to specific page):<HEAD><HEAD>
<STYLE><STYLE>
P { font: 13pt verdana; }P { font: 13pt verdana; }
</STYLE></STYLE>
</HEAD></HEAD>
LinkedLinked (add an external style definition):(add an external style definition):<HEAD><HEAD>
<LINK rel=“stylesheet” href=“./path/file_name.css” <LINK rel=“stylesheet” href=“./path/file_name.css” type=“txt/css”>type=“txt/css”>
</HEAD></HEAD>
66Cascading Style SheetsCascading Style Sheets
Cascading ModelCascading Model
Global styles defined in theirown document: GLOBAL.CSS
Page-specific (also knownas local) styles defined
within an document(in the HEAD), using the
STYLE element.
Element-specific styles aredefined within the elementdefinition using the STYLE
attribute.
Title
HTML page
PAGE.HTML
77Cascading Style SheetsCascading Style Sheets
Box Formatting ModelBox Formatting Model
Element
Padding
Border
Margin
4th
1st
2nd
3rd
88Cascading Style SheetsCascading Style Sheets
Style Sheet SyntaxStyle Sheet Syntax
Whatever method we use to deliver style to Whatever method we use to deliver style to HTML (inline, embedded or linked), the syntax will HTML (inline, embedded or linked), the syntax will going to be similar in all cases.going to be similar in all cases.
CSS syntax contains of three parts:CSS syntax contains of three parts:
SELECTOR | SELECTOR | PROPERTYPROPERTY | | VALUEVALUE
BODYBODY { { colorcolor: : yellowyellow; }; }
99Cascading Style SheetsCascading Style Sheets
SelectorsSelectors are usually standard HTML are usually standard HTML elements (H1, P, BODY, TABLE, etc.).elements (H1, P, BODY, TABLE, etc.).
PropertiesProperties are names of attributes that are are names of attributes that are used to describe an object (color, text, font-used to describe an object (color, text, font-face, font-size, etc.).face, font-size, etc.).
ValuesValues are “describing” properties(yellow, are “describing” properties(yellow, bold, fixed, Arial, etc.).bold, fixed, Arial, etc.).
1010Cascading Style SheetsCascading Style Sheets
Classes, Pseudo Classes, Pseudo ClassesClasses and IDs and IDs
ClassesClasses are the instances of style definitions. are the instances of style definitions.
If we want to brake down our style rules into If we want to brake down our style rules into small very precise peaces, we will use classes.small very precise peaces, we will use classes.
Everything that is not redefined in a class is Everything that is not redefined in a class is inherited from the higher level class or element. inherited from the higher level class or element.
P.highlight {
background-color: yellow;
color: red;
}
P.highlight {
background-color: yellow;
color: red;
}
1111Cascading Style SheetsCascading Style Sheets
Pseudo-classes Pseudo-classes are predefined classes are predefined classes that already mean something to the browser. that already mean something to the browser.
They can’t be defined by user, but user They can’t be defined by user, but user can apply values to them!can apply values to them!
A:link A:link A:visited A:visited
{{ {{ color: blue;color: blue; color: red; color: red;}} }}
1212Cascading Style SheetsCascading Style Sheets
List of pseudo classes:List of pseudo classes::first-child:first-child
:link (A):link (A)
:visited (A):visited (A)
:hover (A):hover (A)
:active (A):active (A)
:focus (A):focus (A)
:lang :lang
:first-line (P):first-line (P)
:first-letter (P) :first-letter (P)
:before:before
:after:after
1313Cascading Style SheetsCascading Style Sheets
IDsIDs are groups of style definitions that can are groups of style definitions that can be applied to any HTML element (tag).be applied to any HTML element (tag).
If ID is applied to an element that is If ID is applied to an element that is already defined in the style sheet, the already defined in the style sheet, the definition will be overridden.definition will be overridden.
IDs are defined as follows:IDs are defined as follows:#important {#important {
font-weight : bold;font-weight : bold;
color : Yellow;color : Yellow;
}}
1414Cascading Style SheetsCascading Style Sheets
Advanced page lookAdvanced page look
CSS gives us much more flexibility in layout CSS gives us much more flexibility in layout designing.designing.
The advantage is that we can place “objects” The advantage is that we can place “objects” (words, paragraphs, pictures, lines, etc.) exactly (words, paragraphs, pictures, lines, etc.) exactly where we want on the page (positioning and Z-where we want on the page (positioning and Z-index). index).
Also, we can group elements and then control Also, we can group elements and then control them as a group. For this purpose DIV tag is used.them as a group. For this purpose DIV tag is used.
On the same way we can control parts of text On the same way we can control parts of text which is “bounded” with SPAN tag.which is “bounded” with SPAN tag.
1515Cascading Style SheetsCascading Style Sheets
Groups of elements Groups of elements (DIV & SPAN)(DIV & SPAN)
DIVDIV provides means for grouping provides means for grouping elements and assigning attributes to the elements and assigning attributes to the group. It is nested within the BODY!group. It is nested within the BODY!
SPANSPAN encloses text within generic inline encloses text within generic inline element that you can define with style sheet. element that you can define with style sheet. It is nested within any BLOCK element.It is nested within any BLOCK element.
1616Cascading Style SheetsCascading Style Sheets
Z-indexZ-index
Z-indexZ-index enables us to position elements enables us to position elements in the third dimension (depth).in the third dimension (depth).
It orders the elements with the lower index It orders the elements with the lower index on the top of elements with higher index.on the top of elements with higher index.
Z = 100
Z = 50
Z=70
1717Cascading Style SheetsCascading Style Sheets
Benefits of Using CSSBenefits of Using CSS
Separation of the document from the Separation of the document from the presentation.presentation.
Easier coding and maintenance. Easier coding and maintenance. Site control.Site control.
Consistency (Uniformity). Consistency (Uniformity). All pages in the site looks the same.All pages in the site looks the same.
Rich design and layout.Rich design and layout. Avoidance of tag misuse.Avoidance of tag misuse.
Solves speech synthesizer problemsSolves speech synthesizer problems..
1818Cascading Style SheetsCascading Style Sheets
Benefits of Using CSS (2)Benefits of Using CSS (2)
Avoidance of images misuse.Avoidance of images misuse.Increases download time ( a lot! ).Increases download time ( a lot! ).
Text on images is not searchable!!!Text on images is not searchable!!!
CSS allow user to override authors style.CSS allow user to override authors style.Personalization of the page.Personalization of the page.
Auto generated content.Auto generated content.First letter, numbered lists, before and after First letter, numbered lists, before and after elements, etc…elements, etc…
1919Cascading Style SheetsCascading Style Sheets
Benefits of Using CSS (3)Benefits of Using CSS (3)
Aural style.Aural style.Define how the text synthesizer will read the Define how the text synthesizer will read the content. content.
Accessibility.Accessibility.PC browsers, mobiles, PDAs, tty terminals, PC browsers, mobiles, PDAs, tty terminals, printers, TVs, users with disabilities, etc…printers, TVs, users with disabilities, etc…
No browser specific requirements, such as No browser specific requirements, such as plug-ins.plug-ins.
2020Cascading Style SheetsCascading Style Sheets
Compatibility IssueCompatibility Issue
CSS1 was partially supported by browsers CSS1 was partially supported by browsers Internet Explorer 3, Internet Explorer 4, and Internet Explorer 3, Internet Explorer 4, and Netscape Navigator 4.7.Netscape Navigator 4.7.
CSS2 is fully supported by all new versions of CSS2 is fully supported by all new versions of popular Web browsers like: Internet Explorer 6, popular Web browsers like: Internet Explorer 6, Netscape 6, Opera 5, and Micro Browsers for Netscape 6, Opera 5, and Micro Browsers for Mobiles.Mobiles.
If browser does not support CSS it will display If browser does not support CSS it will display page in HTML formatted form, ignoring the page in HTML formatted form, ignoring the styles. styles.
2121Cascading Style SheetsCascading Style Sheets
DisadvantagesDisadvantages
The only disadvantage that can be The only disadvantage that can be assigned to CSS is non-compatibility with assigned to CSS is non-compatibility with all internet browsers.all internet browsers.
Surveys says that today 85% of users are Surveys says that today 85% of users are able to see pages that uses CSS, while able to see pages that uses CSS, while the others are not.the others are not.
2222Cascading Style SheetsCascading Style Sheets
ConclusionConclusion
As you can see, CSS can be useful for As you can see, CSS can be useful for everyone, starting from Web designers to everyone, starting from Web designers to the ordinary users. the ordinary users.
The fact is that today’s Web Sites can not The fact is that today’s Web Sites can not be imagined without CSS.be imagined without CSS.
2323Cascading Style SheetsCascading Style Sheets
Thank you for participating in Thank you for participating in the presentation the presentation
For any further questions, you may contact me at e-mail: For any further questions, you may contact me at e-mail:
pavlovic@city.academic.grpavlovic@city.academic.gr
top related