cascading style sheets by pavlovic nenad by. presentation contents what is css? why css? types of...
TRANSCRIPT
CCascading ascading SStyle tyle SSheetsheets
by by
Pavlovic NenadPavlovic Nenad
by by
Pavlovic NenadPavlovic Nenad
Presentation ContentsPresentation Contents What is CSS?What is CSS? Why CSS?Why CSS? Types of Style SheetsTypes of Style Sheets Style Sheets SyntaxStyle Sheets Syntax Box Formatting ModelBox Formatting Model Inheritance & CascadeInheritance & Cascade Simple ExamplesSimple Examples Classes, Pseudo Classes & IDsClasses, Pseudo Classes & IDs Advanced page look using CSS Advanced page look using CSS Groups of elements (DIV & SPAN)Groups of elements (DIV & SPAN) Z – indexZ – index @import and @media roles@import and @media roles
CSS – what is it?CSS – what is it?
Think of style sheets as any kind of Think of style sheets as any kind of design element: including type face, design element: including type face, background, text, links colors, margin background, text, links colors, margin controls and placement of objects on a controls and placement of objects on a page.page. Also, we can say that CSS is a set of Also, we can say that CSS is a set of style definitions; styles that describe each style definitions; styles that describe each HTML element.HTML element.
Why CSS?Why CSS? Using the CSS we can control all pages in our Using the CSS we can control all pages in our site with changing a single file (CSS file).site with changing a single file (CSS file). HTML should be used only as a formatting HTML should be used only as a formatting language, responsible for the basic layout of a language, responsible for the basic layout of a page.page. CSS is used for design of pages.CSS is used for design of pages.
Types of Style SheetsTypes of Style Sheets
Style sheets can be delivered to an HTML Style sheets can be delivered to an HTML by a variety of methods:by a variety of methods: Inline Inline (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> Embedded Embedded (controls a whole page):(controls a whole page):
<HEAD><HEAD>
<STYLE><STYLE>P { font: 13pt verdana; }P { font: 13pt verdana; }
</STYLE></STYLE></HEAD></HEAD>
Linked Linked (applies a style on an entire page):(applies a style on an entire page):
<HEAD><HEAD>
<LINK rel=“stylesheet”<LINK rel=“stylesheet”href=“./path/file_name.css” href=“./path/file_name.css”
type=“txt/css”>type=“txt/css”>
</HEAD></HEAD>
Style Sheet SyntaxStyle Sheet Syntax
Whatever method we use to deliver style Whatever method we use to deliver style to HTML (inline, embedded or linked), the to HTML (inline, embedded or linked), the syntax will going to be similar in all cases.syntax will 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; }; }
Selectors are usually standard HTML Selectors are usually standard HTML elements (H1, P, BODY, TABLE, etc.).elements (H1, P, BODY, TABLE, etc.). Properties are names of attributes that Properties are names of attributes that are used to describe an object (color, text, are used to describe an object (color, text, font-face, font-size, etc.).font-face, font-size, etc.). Values defines properties (color: yellow, Values defines properties (color: yellow, font-face: arial, etc.).font-face: arial, etc.).
Box Formatting ModelBox Formatting Model
Padding: distance between element and border.Padding: distance between element and border. Margin: space outside the border.Margin: space outside the border.
Element
Padding
Border
Margin
4th
1st
2nd
3rd
Inheritance & CascadeInheritance & Cascade
CascadeCascade: If we have multiple styles in an : If we have multiple styles in an individual HTML page, browser will follow individual HTML page, browser will follow cascade (order) to interpret style cascade (order) to interpret style information.information.e.g. Assume that we have 3 style types in e.g. Assume that we have 3 style types in our page, browser will first interpret linked our page, browser will first interpret linked style, then embedded and inline at last.style, then embedded and inline at last.
Inheritance: Inheritance: If we state a specific text If we state a specific text color in a paragraph tag, all tags within color in a paragraph tag, all tags within that paragraph will inherit specified color.that paragraph will inherit specified color.
example
Simple ExamplesSimple Examples
BackgroundBackground FontsFonts ParagraphsParagraphs HeadingsHeadings TablesTables etc..etc..
Classes, Pseudo Classes, Pseudo ClassesClasses and IDs and IDs
Classes are the instances of style definitions. Classes 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. Assume that we defined style for one Assume that we defined style for one element and then we create its class, everything element and then we create its class, everything that is nor redefined in a class is inherited from that is nor redefined in a class is inherited from the higher level class or element. the higher level class or element.
P.highlight {
background-color: yellow;
color: red;
} example
The second type of classes are The second type of classes are pseudo-pseudo-classesclasses.. Pseudo-classes are predefined classes Pseudo-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 can They can’t be defined by user, but user can apply values to them!apply values to them!
A:link {A:link {
color: blue;color: blue;
}}
A:visited {A:visited {
color: red;color: red;
}}
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) (example)(example)
:first-letter (P) :first-letter (P) (example)(example)
:before :before (example)(example)
:after:after
Pseudo-classes can be used in Pseudo-classes can be used in combination with classes like:combination with classes like:
A.special:link {A.special:link {
color: white;color: white;
text-decoration : none;text-decoration : none;
}}
A.special:visited {A.special:visited {
color: #FFF000;color: #FFF000;
text-decoration : none;text-decoration : none;
}}
IDsIDs IDs are like classes, except they are not IDs are like classes, except they are not necessarily associated with elements (tags).necessarily associated with elements (tags). IDs are defined as follows:IDs are defined as follows:
#important {#important {
font-weight : bold;font-weight : bold;color : Yellow;color : Yellow;
}}
To use apply ID to an element we should To use apply ID to an element we should type:type:
<P id=“important”>…</P><P id=“important”>…</P> exampleexample
Advanced page lookAdvanced page look CSS gives us a much more flexibility in layout CSS gives us a 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 is used DIV tag.them as a group. For this purpose is used DIV tag. 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.
Groups of elements Groups of elements (DIV & SPAN)(DIV & SPAN) DIV provides a means for grouping DIV provides a means for grouping elements and assigning attributes to the elements and assigning attributes to the group.group. It is nested within the BODY!It is nested within the BODY! SPAN encloses text within generic inline SPAN 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.
Examples…Examples…
Z-indexZ-index
Z-index enables us to position elements in Z-index enables us to position elements in the third dimension (depth).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.
exampleexample
Z = 100
Z = 50
Z=70
@media@media @@mediamedia sMediaType { sRules } sMediaType { sRules } sMediaType:sMediaType:
StringString that specifies one of the following media types: screen: that specifies one of the following media types: screen: Output is intended for computer screens.Output is intended for computer screens.
printOutputprintOutput is intended for printed material and for documents is intended for printed material and for documents viewed in PrintPreview mode.viewed in PrintPreview mode.
all all Output is intended for all devices. Output is intended for all devices.
sRules:sRules: StringString that specifies one or more rules in a that specifies one or more rules in a styleSheetstyleSheet object. object.
// For computer screens, the font size is 12pt. // For computer screens, the font size is 12pt.
@media screen { BODY {font-size:12pt;} }@media screen { BODY {font-size:12pt;} }
// When printed, the font size is 8pt. // When printed, the font size is 8pt.
@media print { BODY {font-size:8pt;} } @media print { BODY {font-size:8pt;} }
@import@import @@importimport [url] ( sUrl ) [url] ( sUrl );; sUrl:sUrl:
String that specifies the URL that references a String that specifies the URL that references a cascading style sheet. cascading style sheet.
<STYLE TYPE="text/css"> <STYLE TYPE="text/css">
@import url("URL"); @import url("URL");
P {color:blue} P {color:blue}
</STYLE></STYLE>
Thank you for joining the Thank you for joining the presentation presentation
Thanks a lot to Thanks a lot to Chrysafis TheodorosChrysafis Theodoros for for a help.a help.
Presentation content will be placed on the AcademiX web page:Presentation content will be placed on the AcademiX web page:www.city.academic.gr/academixwww.city.academic.gr/academix
For any further question you can contact me at: For any further question you can contact me at: [email protected]@city.academic.gr