CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
NSWI142 – Web Applications Lecture 3 – CSS (Part 1) Martin Nečaský, Ph.D. Web Applications (NSWI142 ), Lecture 31.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Using CSS (Cascading Style Sheets) Effie Nadiv Edited by permission from author by Amir Kirsh.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
1/18 ITApplications XML Module Session 5: Extensible Stylesheet Language (XSL)
CSS: Beyond the Code Karen Perone Rodman Public Library
1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
Cascading style sheets CSS
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Tutorial 4 Creating Special Effects with CSS
4.01 Cascading Style Sheets
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Week 4.  Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,
Tutorial 4 Creating Special Effects with CSS
CSS Positioning Creating Special Effects with CSS CS202 Working with Cascading Style Sheets (Chapter 4) CS202 1.
Cascading Style Sheets by Pavlovic Nenad by. Presentation Contents  What is CSS?  Why CSS?  Types of Style Sheets  Style Sheets Syntax  Box Formatting.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.
Advanced Cascading Style Sheets (CSS) Lecture # July 2013.
Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition.
>> More on CSS Selectors. Pre-requisite Open the file called sample.txt Copy the all the text from the file Open your browser and go to codepen.io Paste.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.
Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
CSS: Cascading Style Sheets Part II. Style Syntax.
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
CH 12 CSS Style Sheets 1. Objective What is CSS? Selecting elements Different rules for different media Importing style sheets 2.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Working with Cascading Style Sheets
>> The “Box” Model
IS 360 Declaring CSS Styles
Chapter 3 Style Sheets: CSS
Web Systems & Technologies
Software Engineering for Internet Applications
>> Dynamic CSS Selectors
IS 360 Understanding CSS Selectors
The Internet 10/6/11 Cascading Style Sheets
Cascading Style Sheets
Tutorial 4 Creating Special Effects with CSS
Chapter 6 Introducing Cascading Style Sheets
The Internet 10/20/11 CSS Layout
CS3220 Web and Internet Programming More CSS
Presentation transcript:

CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics, Charles University in Prague, Czech Republic

CSS Statements

Syntax  CSS style sheet consists of statements of two kinds  rule set selector { property-name-1: property-value-1; … property-name-N: property-value-N; }  {…}

Sample Rule Set div { padding: 10px; background-color: lightblue; border: 2px solid blue; }

Sample "print-basic.css" print { div { padding: 10px; background-color: lightblue; border: 2px solid blue; }

Namespace At-Rule  namespaces may be declared  externally in document which uses style sheet e.g. XML document using well-know XML namespace mechanisms  internally in the style svg "

CSS MEDIA queries

Media Queries  W3C Candidate Recommendation 27 July 2010  allows styling single web page for different devices, e.g.  printer  tablet/phone (landscape, portrait)  low resolution laptop  …

Media Queries  where you can use media query?  media at-rule CSS statements inside at-rule are applied only to specified media  media attribute of link element in HTML CSS statements in linked CSS file are applied only to specified media  import at-rule imported CSS statements are applied only to specified media

Media Queries and ( ) and … and ( )

Media Queries and ( ) and … and ( )  media – stands for media type  screen  print  braile  projection  tv  …  all

Media Queries and ( ) and … and ( )  feature-name: value  allowed features:  width value – length width of display area of output device  height value – length height of display area of output device  orientation value – landscape or portrait orientation of display area of output devide  …  most of them (e.g. width, height ) may be supplemented with min- and max- prefix (to avoid )

Media Queries /* iPad landscape all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) { /* statements */ } css_12.html

CSS Selectors

Selectors  selector is chain of one or more sequences of simple selectors separated by combinators S0 C1 S1 … Cn Sn  where  S0, …, Sn are sequences of simple selectors  C1, …, Cn are combinators (whitespace, >, +, ~ )  “algorithm”: if (n==0) then return each element selected by Sn else return each element selected by Sn which is in the relationship specified by Cn to an element selected by S0 C1 S1 … C(n-1) S(n-1)

Selectors  sequence of simple selectors is chain of simple selectors that are not separated by combinator S0S1…Sn  where S0, …, Sn are simple selectors  “algorithm”:  if (n==0) return each element selected by Sn  else return each element selected by S0…S(n-1) which is also selected by Sn  simple selector is one of the following:  type selector, universal selector, attribute selector, class selector, ID selector, pseudo-class and pseudo-element

Selectors – Few Examples  two simple selectors separated by + combinator div + div  three simple selectors separated by > combinator ol#topMenu > li.menuItem[label$="navigation"] > a  two simple selectors separated by whitespace combinator tr:last-child td:not(:first-child):not(:last-child)

Combinators  whitespace combinator: A B  specifies descendant relationship  selects all elements selected by B which are descendants of any element selected by A  > combinator: A > B  specifies child relationship  selects all elements selected by B which are child of any element selected by A  + combinator: A + B  specifies adjacent sibling relationship  selects all elements selected by B which have same parent as and immediately follow any element selected by A  ~ combinator: A ~ B  specifies sibling relationship  selects all elements selected by B which have same parent as and follow (not necessarily immediately) any element selected by A

Type Simple Selector E { … }  elements with name E in document tree Do you know the concept of XML namespaces?

Type Simple Selector and Namespaces ns|E { … }  elements with name E from namespace with declared prefix ns *|E { … }  elements with name E from any namespace or without namespace |E { … }  only elements without namespace E { … } ↔ *|E if no default namespace ↔ dns|E if default namespace has prefix dns

Type Simple Selector and Namespaces  see css_03.xml

Universal Simple Selector * { … }  all elements in document tree

Universal Simple Selector and Namespaces ns|* { … }  all elements from namespace with declared prefix ns *|* { … }  all elements |* { … }  all elements without namespace * { … } ↔ *|* if no default namespace ↔ dns|* if default namespace has prefix dns

Universal Simple Selector  see css_04.xml  see css_04,5.xml

Attribute Simple Selector [att] { … }  all elements with att attribute (whatever value) [att=val] { … }  all elements with att attribute with value val [att~=val] { … }  all elements with att attribute with value being a sequence of (white space separated) words containing word val

Attribute Simple Selector [att^=val] { … }  all elements with att attribute with value starting with val  nothing if val is empty [att$=val] { … }  all elements with att attribute with value ending with val  nothing if is empty val [att*=val] { … }  all elements with att attribute with value containing one or more occurrences of val  nothing if val is empty [att|=val] { … }  all elements with att attribute with value val or with value starting with val followed by ‘ - ’ (intended primarily, but not only, to matching language codes)

Attribute Simple Selector  see css_05.html

Attribute Simple Selector and Namespaces [ns|att] { … }  all elements with att attribute from namespace with declared prefix ns [*|att] { … }  all elements with attribute att from any namespace or without namespace [|att] { … }  all elements with attribute att without namespace  XML notes:  default namespace does not apply to attributes  attribute gains namespace of its element

Class and ID Simple Selector.val { … } ↔ [class~=val]  all elements having class attribute with value being a sequence of (white space separated) words containing word val #val { … } ↔ [idattr=val]  all elements having ID-attribute with value val  ID-attribute ( idattr ) may be given explicitly (e.g. by DTD or XSD) or implicitly (e.g. HTML ID attribute)

Class and ID Selector  see css_06.html

Pseudo-Classes :pseudo-class  all XML elements which belong to pseudo- class with name pseudo-class  dynamic pseudo-classes  classify elements on characteristics which cannot be deduced from document tree  structural pseudo-classes  classify elements on their structural relationships which are not covered by other kinds of simple selectors

Dynamic Link Pseudo-Classes :link  links that have not yet been visited :visited  links that have been already visited

Dynamic User Action Pseudo-Classes :hover  elements being designated with pointing device by user :active  elements being activated by user :focus  elements having focus

Dynamic User Action Pseudo-Classes  see css_07.html

Dynamic Target Pseudo-Class :target  link target elements  applied when link is “activated” by user TEXT TEXT TEXT

Power of Pseudo-Classes Can you make “switching panels” with CSS? css_08.html Can you make “switching panels” with CSS? css_08.html

Structural Pseudo-Classes :nth-child(an+b)  all elements whose position in the list of all elements with the same parent can be counted with an+b  where a and b are fixed integers (positive, negative, 0 ) given by CSS developer  n means ‘iteration variable’ (0,1,2,…)  first element within its parent has position 1, non-element nodes (text nodes) are not counted  special values odd and even  examples: :nth-child(2n+0) – positions 2, 4, 6, …, i.e. even elements :nth-child(2n+1) – positions 1, 3, 5, …, i.e. odd elements :nth-child(8n+1) – positions 1, 9, 17, … :nth-child(even) = :nth-child(2n+0) :nth-child(odd) = :nth-child(2n+1)

Structural Pseudo-Classes :nth-child(an+b)  b may be 0 : :nth-child(3n+0) – positions 3, 6, 9, … :nth-child(3n) – shortcut for :nth-child(3n+0)  b may be negative: :nth-child(5n-1) – positions 4, 8, 12, …  a may be 0 : :nth-child(0n+5) – each fifth element within its parent :nth-child(5) – shortcut for :nth-child(0n+5)  a may be negative:  only positive positions which can be counted by an+b target elements :nth-child(-n+3) – positions 1,2,3

Structural Pseudo-Classes :nth-last-child(an+b)  all elements whose position FROM THE END in the list of all elements with the same parent can be counted with an+b  examples: :nth-last-child(-n+2) – last two elements in each parent

Structural Pseudo-Classes Can you make the following “chess-board” with CSS :nth- child, :nth-last-child ?

Structural Pseudo-Classes  see css_09.html

Structural Pseudo-Classes :nth-of-type(an+b), :nth-last-of-type(an+b)  variants of previous which consider only elements with the same type as the object element :first-child = :nth-child(1) :last-child = :nth-last-child(1) :first-of-type = :nth-of-type(1) :last-of-type = :nth-last-of-type(1) :only-child = :first-child:last-child  but lower specificity :only-of-type = :first-of-type:last-of-type  but lower specificity :empty  elements without children  only child elements, text, CDATA and entity references count

Negation Pseudo-Class :not(PS)  all elements which do not correspond to pseudo-class PS

Negation Pseudo-Class Can you make the following “chess-board” (only the boundary rows and columns are white)?

Negation Pseudo-Class  see css_10.html

Pseudo-Elements :first-letter :first-line

Pseudo-Elements :before :after  intended for generated content  generated content is content which does not come from document tree  e.g. numbered list or numbering chapters  generated content is specified by content property with value:  string  uri  counter  attr(X)  … and special values for generating quotes

Pseudo-Elements  see css_11.html

CSS Cascading

Cascading  every element in document tree must have value for every property that applies to target media type  three different sources of style sheets:  author web developer who creates style sheets and associates them with documents  user user agent may allow users to specify their own style information (e.g. “everything bigger”)  user agent default style sheets of user agent which allow displaying non-styled elements (e.g. default HTML or default XML)

Cascading  cascade assigns weight to each property in each style sheet statement (1 is lowest weight): 1.user agent properties 2.user properties 3.author properties 4.author important properties 5.user important properties  if element in document tree may have more values for the same property the one with highest weight is applied  important properties are those followed by !important keyword

Cascading  if element in document tree may have more values for the same property with the same cascading weight select the one with the highest specificity  specificity of property declaration in statement is counted on the base of the following three values:  A = 1 if declaration is in style att, 0 otherwise  B = number of ID selectors in statement selector  C = number of class selectors, attribute selectors and pseudo-classes in statement selector  D = number of type selectors and pseudo-elements in statement selector  (universal selector is ignored)  specificity = ABCD

Cascading td (B=0, C=0, D=1  specificity 0001) td:hover (B=0, C=1, D=1  specificity 0011) td:nth-child(-n+2) (B=0, C=1, D=1  specificity 0011) tr:nth-child(2n) td:nth-child(2n+1) (B=0, C=2, D=2  specificity 0022) /* almost winner */ tr:nth-child(2n) td:nth-child(2n+1) { background-color: black; } /* looser */ td:nth-child(-n+2) { background-color: orange; } /* beats all */ td:hover { background-color: pink !important; }

Inheritance  if element does not have property value it may inherit it from its parent in document tree  Not all properties are inherited  in general  text related properties are inherited (e.g. color, font )  box related properties are not inherited (e.g. border, float )  keyword inherit  property is inherited (even if it is not inherited by default) *{ border: inherit; }

Thanks for your attention