CSCI 121 - Lecture 19 - CSS Continued...

Topics Covered

• Advanced Selectors
• There are many other selectors besides element, id and class and most have very special uses.
• Some commonly used advanced selectors are:

• Selector	Example	Description
  .class	.intro	Select all elements with the class="intro"
  #id	#firstname	Selects the element with id="firstname"
  *	*	Selects all elements
  element	P	Select all the <p> elements
  element,element	div,p	Selects all <div> elements and all <p> elements
  element element	div p	Selects all <p> elements inside <div> elements
  element>element	div > p	Selects all <p> elements where the parent is a <div> element
  element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
  element~element	p ~ ul	Selects every <ul> element that are preceded by a <p> element
  [attribute]	[target]	Selects all elements with a target attribute
  [attribute=value]	[target=_blank]	Selects all elements with target="_blank"
  [attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
  [attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"
  [attribute^=value]	a[href^="https"]	Selects every element whose href attribute value begins with "https"
  [attribute$=value]	a[href$=".pdf"]	Selects every element whose href attribute value ends with ".pdf"
  [attribute*=value]	a[href*="w3schools"]	Selects every element whose href attribute value contains the substring "w3schools"
  :active	a:active	Selects the active link
  ::after	p::after	Insert something after the content of each <p> element
  ::before	p::before	Insert something before the content of each <p> element
  :checked	input:checked	Selects every checked <input> element
  :disabled	input:disabled	Selects every disabled <input> element
  :empty	p:empty	Selects every <p> element that has no children (including text nodes)
  :enabled	input:enabled	Selects every enabled <input> element
  :first-child	p:first-child	Selects every <p> element that is the first child of its parent
  ::first-letter	p::first-letter	Selects the first letter of every <p> element
  ::first-line	p::first-line	Selects the first line of every <p> element
  :first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
  :focus	input:focus	Selects the input element which has focus
  :hover	a:hover	Selects links on mouse over
  :in-range	input:in-range	Selects input elements with a value within a specified range
  :invalid	input:invalid	Selects all input elements with an invalid value
  :lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
  :last-child	p:last-child	Selects every <p> element that is the last child of its parent
  :last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
  :link	:link	Selects all unvisited links
  :not(selector)	:not(p)	Selects every element that is not a <p> element
  :nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
  :nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
  :nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
  :nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
  :only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
  :only-child	p:only-child	Selects every <p> element that is the only child of its parent
  :optional	input:optional	Selects input elements with no "required" attribute
  :out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
  :read-only	input:read-only	Selects input elements with the "readonly" attribute specified
  :read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
  :required	input:required	Selects input elements with the "required" attribute specified
  :root	:root	Selects the document's root element
  ::selection	::selection	Selects the portion of an element that is selected by a user
  :target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
  :valid	input:valid	Selects all input elements with a valid value
  :visited	a:visited	Selects all visited links

• A very good interactive tutorial of them all is here: http://www.w3schools.com/cssref/css_selectors.asp
• CSS Properties
• Properties of HTML elements can be set by CSS rule sets.
• Properties are of several different categories: Color, Background and Borders, Basic Box, Flexible Box, Text, Text Decoration, Font, Table, Lists, and several others.
• A very good tutorial of them all is here: http://www.w3schools.com/cssref/default.asp
• External, Internal and Inline Style Sheets
• External Style Sheets
• With an external style sheet, you can change the look of an entire website by changing just one file!
• Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

• <head>                
     <link rel="stylesheet" type="text/css" href="/html/style.css">
  </head>   
                  

• Internal Style Sheets
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

• body {
      background-color: lightblue;
  }
  
  h1 {
      color: white;
      text-align: center;
  }
  
  p {
      font-family: verdana;
      font-size: 20px;
  }     
                  

• Inline Styles
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
• The example below shows how to change the color and the left margin of a <h1> element:

• <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>   
                  

• "Cascading"
• Cascading defines the order of precedence (priority) of which style rule will be applied when there are multiple style definitions for a given element across several style rules and/or style sheets.
• Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
• So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.

*Note: Some materials and examples inspired and from W3Schools.com.