CSS (Cascading Style Sheets)

It was developed by Håkon Wium Lie and Bert Bos. It is a language used to specify the presentation aspects (eg. layout and formating) of structurally marked up documents. It is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.

CSS Versions:

HTML/XHTML Style Sheets

• Author Style

  This refers to the maker of the website who embeds all the styles of a website in CSS files or inline into the html.

  • External Style Sheets
  • Embedded Styles
  • Inline Styles
• User Style

This refers to you or the end-user viewing a website. You can override the author's styles by defining your own styles or CSS. Typically this is done if you need to have larger font sizes, varying colors, etc. for accessibility reasons.

• User Agent Style

This style sheet refers to your browser such as Internet Explorer,Chrome,Firefox or any other browser. It has its own default style sheet and has the lowest priority.

Declarations

• Normal

These are styles that are defined normally. They are processed in a top down methodology. So if you had a background-color:#00ff00; followed by background-color:#000000; for the same element, the black background will have precedence.

• Important

This overrides normal styles which allows more emphasis to a css value. So in the same example, if the style was defined as: background-color:#00ff00 !important; background-color:#000000;, the background color of the element will be yellow even though black was defined afterwards.

CSS Statements (At-Rules)

*conditional group rule - may be considered to be something like property values that can be categorized based on common syntax.

Simple Selector

• Type Selector
  • This selects elements of the document by node names.

  Sample Code:

  Syntax

  
  	element { style properties }
  					

  CSS Code

  
  	span {
  	background-color: DodgerBlue;
  	color: #ffffff;
  	}
  					

  HTML Code

  
      <span>Here's a span with some text.</span>
      <p>Here's a p with some text.</p>
      <span>Here's a span with more text.</span>
                      

• Universal Selector
  • This uses an asterisk (*) to refer to any type of a particular element.The universal selector matches any element type.

  Sample Code:

  
  	* {
  	margin: 0;
  	padding: 0;	
  	}
  					 

• Attribute Selector
  • selects elements based on attributes or its values.
  • [attr]
    • represents an element having attr as attribute name.
  • [attr=value]
    • represent an elements having "value" as the value of attr.
  • [attr|=value]
    • represent an elements with attr attribute having value equal to or begins with "value" followed by "-" (U+002D) for language subcode matches.
  • [attr~=value]
    • represent an element with attr attribute having set of words separated by whitespaces at which one of such words is "value" as its value.
  • [attr^=value]
    • represents an element with attribute attr having a value that begins with "value".
  • [attr$=value]
    • represents an element with attribute attr having a value that ends with "value".
  • [attr*=value]
    • represents an element with attribute attr having a value that contains "value".
  • [attr operator value i]
    • adding "I" or "i" (for characters within the ASCII range) causes case-insensitive comparison of attribute values.

  Sample Code:

  
  	a[target] {
  	background-color: #F5F5F5;
  	}	
  					 

• Class Selector
  • This selects elements that match based on class attribute.

  Sample Code:

  
  	.intro { 
  	background-color: #FFFFFF;
  	}	
  					 

• ID Selector
  • This selects elements that match based on id attribute.

  Sample Code:

  
  	#firstname { 
  	background-color: #F0F8FF;
  	}	
  					 

• Pseudo Selector
  • Dynamic Pseudo Class
    • link pseudo
      • :link - selects hyperlink elements that have href attribute.
      • :visited - links already visited are selected.
  • User Action Pseudo Class
    • :hover - selected as mouse hovers an element.
    • :active - selects elements usually links as they are activated.
    • :focus - select as an element is focused by keyboard.
  • Target Pseudo-class
    • :target^CSS3 - used with ID and matches if #value in the current URL matches ID.
  • Language Pseudo-class
    • :lang() - elements having lang attribute or are within some other elements that may have included the lang attribute are selected.
  • UI Elements States Pseudo-class
    • :enable - inputs in default state enabled at are selected.
    • :disabled - inputs having disabled attribute are selected.
    • :checked - selects checked checkboxes.
    • :indeterminate - selects radio buttons that are neither chosen or unchosen.
  • Structural Pseudo Class
    • :root^CSS3 - selects elements at root document.
    • :firstchild - selects first element within its parent.
    • :last-child^CSS3 - selects last element within its parent.
    • :only-child^CSS3 - selects only element of its parent.
    • :nth-child()^CSS3 - selects nth element within its parent.
    • :first-of-type^CSS3 - selects first element of its type.
    • :last-of-type - selects last element of its type.
    • :only-of-type - selects element if it is the only element of its type.
    • :nth-of-type() - similar to nth-child but refers to nth element of a particular type.
    • :nth-last-of-type() - similar to nth-of-type() but counts from the bottom.
    • :empty - selects elements with no text.
    • :not() - selects elements that do not match what is specified in the parenthesis.

  Syntax

  
  	selector:pseudo-class {
  	property:value;
  	}
  					

  CSS Code

  
  	/* unvisited link */
  	a:link {
  	color: #FF0000;
  	}
  
  	/* visited link */
  	a:visited {
  	color: #00FF00;
  	}
  
  	/* mouse over link */
  	a:hover {
  	color: #FF00FF;
  	}
  
  	/* selected link */
  	a:active {
  	color: #0000FF;
  	}
  		

• Combinators
  • Descendant Combinators (whitespace)
    • These are nodes that are children or children of children and so on of specified element are selected.
  • Child Combinators (>)
    • These are nodes that are children of element specified are selected.
  • Sibling Combinators
  • Adjacent Sibling Combinators (+)
    • These are nodes that immediately follows element specified are selected.
  • General Sibling Combinators (~)
    • These are nodes that follows element specified are selected.

  Sample Codes:

  
  	div > p {
  	background-color: #00FF7F;
  	}	
  					 

  
  	div + p {
  	background-color: #FFFFF0;
  	}	
  					 

  
  	div ~ p {
  	background-color: #000000;
  	}	
  					 

• Pseudo-elements
  • ::first-letter^CSS3, :first-letter
    • This selects first letter of text in an element.

    
    	p::first-letter {
    	color: #ff0000;
    	font-size: xx-large;
    	}
    		

  • ::first-line^CSS3, :first-line
    • This selects first line of text in an element,

    
    	p::first-line {
    	color: #ff0000;
    	font-variant: small-caps;
    	}
    		

  • ::before^(CSS3), :before
    • This may be used to add contents before a particular element.

    
    	h1::before {
    	content: url(smiley.gif);
    	}
    		

  • ::after^CSS3, :after
    • This may be used to add contents before a particular element.

    
    	h1::after {
    	content: url(smiley.gif);
    	}
    		

  Sample Code:

  Syntax

  
  	selector::pseudo-element {
  	property:value;
  	}
  		

CSS Declarations

• properties
  • shorthand properties
  • vendor-specific extensions
• values
  • keywords
  • numbers(integers and reals in decimal notation)
  • dimensions
    • length, angle, duration, frequency, resolution
    • length units:
      • font-relative: em, ex, cn, rem
      • viewport-percentage: vw, vh, vmin, vmax
      • absolute length: cm, mm, q, in, pt, pc, px
    • angle units: deg, grad, rad, turn
    • duration units: s, ms
    • frequency units: h2, kh2
    • resolution units: dpi, dpcm, dppx
  • percentage
  • URLs and URIs
  • colors
  • strings
  • counters
  • functions: calc(), attr(), counter(), counters()

CSS Frameworks

There are a lot of css frameworks avaiable today and one of the most prominent of them all is Twitter Bootstrap. In using such frameworks you don't have to do any kind of programming/coding to have a default look and feel for your site.

Since this site uses Bootstrap we can demostrate it using the examples below

Tables

Here is an example of how tables can be styled by just using the class table(class="table")

Buttons

Bootstrap has its buttons class built in

Images

Here we can see the three img- class available for us: rounded | circle | thumbnail

class="img-rounded img-responsive"

class="img-circle img-responsive"

class="img-thumbnail img-responsive"

Text Colors

class="text-danger"

class="text-info"

class="text-success"

CSS Preprocessors

CSS is designed to be a simple language. It’s intuitive to learn CSS and write it on small websites, but on larger, more complex websites, writing CSS can become very tedious. That’s where preprocessors come in. Developers wanted more options when writing their style sheets, so they created CSS preprocessors to add programming functionality.

References

• (n.d.). Retrieved April 23, 2017, from https://www.w3.org/TR/REC-CSS1/
• Cascading Style Sheets, level 2CSS2 Specification. (n.d.). Retrieved April 23, 2017, from https://www.w3.org/TR/REC-CSS2/
• CSS3. (n.d.). Retrieved April 23, 2017, from https://developer.mozilla.org/en/docs/Web/CSS/CSS3
• Cascading Style Sheets. (2017, April 19). Retrieved April 23, 2017, from https://en.wikipedia.org/wiki/Cascading_Style_Sheets
• User vs Author vs User Agent style sheets. (n.d.). Retrieved April 23, 2017, from http://praveen-vemulapalli.blogspot.com/2013/01/user-vs-author-vs-user-agent-style.html
• CSS Preprocessors and Frameworks. (n.d.). Retrieved April 23, 2017, from https://www.codeschool.com/beginners-guide-to-web-development/css-preprocessors-and-frameworks
• Syntactically Awesome Style Sheets. (n.d.). Retrieved April 23, 2017, from http://sass-lang.com/
• Giraudel, H. (2014, April 28). What's the Difference Between Sass and SCSS? Retrieved April 23, 2017, from https://www.sitepoint.com/whats-difference-sass-scss/
• Bader, J. (2007, December 31). Bert Bos. Retrieved April 23, 2017, from https://www.flickr.com/photos/jpbader/2150861734
• Main Page. (n.d.). Retrieved April 23, 2017, from https://commons.wikimedia.org/wiki/File:H%C3%A5kon_Wium_Lie.jpg
(n.d.). Retrieved April 23, 2017, from https://www.w3schools.com/css/
• Type selectors. (n.d.). Retrieved April 23, 2017, from https://developer.mozilla.org/en/docs/Web/CSS/Type_selectors
Roberts, A. (2004, February 01). Universal Selector (CSS Selector) — SitePoint. Retrieved April 23, 2017, from https://www.sitepoint.com/web-foundations/universal-selector-css-selector/