# Internet Fundamentals/CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. This lesson introduces CSS.

## Objectives and Skills

Objectives and skills for this lesson include:
* Understand how to link cascading style sheets.
* Create and use simple CSS pages.
* Format, style and lay out the elements on a web page
** Obtain user requirements
** Style the elements of a web page using CSS
** Apply CSS to multiple pages in a website
** Position the document elements using CSS
* Test and validate the web pages
** Test the website in various browsers
** Validate CSS against industry standards
** Report the test results to the appropriate person

## Readings

* Wikipedia: Cascading Style Sheets

## Multimedia

* YouTube: What is CSS?
* YouTube: Learn CSS in 12 Minutes

## Student Presentations

* YouTube: Using CSS to Design a Website
* YouTube: CSS Simplified
* YouTube: CSS External Style Sheets

## Activities

* Complete one or more of the following tutorials:
** TutorialsPoint: CSS
** Codecademy: Introduction to CSS
** W3Schools: CSS Tutorial
** Mozilla: CSS Basics
** LearnLayout: Learn CSS Layout
* Create and use inline CSS.
** Review W3Schools: HTML CSS.
** Use inline CSS to format one or more elements of your web page. Consider including color, background-color, text-align, font-size, and font-family.
** Use the W3C: Validator to validate your web page. Make any necessary corrections to pass the validation test.
* Create and use internal CSS.
** Review W3Schools: HTML CSS.
** Use internal CSS to format one or more elements of your web page. Consider including color, background-color, text-align, font-size, and font-family.
** Use the W3C: Validator to validate your web page. Make any necessary corrections to pass the validation test.
* Create and use external CSS.
** Review W3Schools: HTML CSS.
** Use external CSS to position and format one or more elements of your web page. Consider including color, background-color, text-align, font-size, and font-family, as well as float, width, margin, padding, and / or border.
** Use the W3C: CSS Validator to validate your external style sheet. Make any necessary corrections to pass the validation test.

## Lesson Summary

* Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
* CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.
* CSS benefits include:
** Improve content accessibility
** Provide more flexibility and control in the specification of presentation characteristics
** Enable multiple HTML pages to share common formatting
** Reduce complexity and repetition in the structural content
** Present the same markup page in different styles for different rendering methods
** Display the web page differently depending on the screen size or viewing device
* The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
* The CSS specifications are maintained by the World Wide Web Consortium (W3C).
* A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
* Selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.
* Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters and underscores. A class may apply to any number of instances of any elements. An ID may only be applied to a single element.
* A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
* Values may be keywords or numerical values.
* CSS may be specified inline, internal, or external.
* Inline CSS has the format:
* Internal CSS has the format:
* External CSS is specified using a link element:
* External CSS files have the format:
   which may also be written as:
   or
* Whitespace between properties and selectors is ignored.
* Comments may be placed wherever white space is allowed within a style sheet.

## Key Terms
### class

    An identifier that can annotate multiple elements in a document.

### declaration

    Consists of a property, a colon (:), and a value, separated by a trailing semi-colon (;).

### Font-Family

    The font-family property sets the font of an HTML element’s text.

### id

    A unique identifier within the document.

### ID Selectors

    ID selectors are used to select only a single item on a page. Like the term (“identification”) indicates, ID selectors will ONLY select the first element with a matching ID.

### inherit

    Copies the value of the property in effect for the element’s parent.

### initial

    Represents the initial (or default) value for the property, over-riding any values set earlier in the cascade; initial values are defined on each property’s definition; it is not supported in Internet Explorer.

### margin

    The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. Here, the div with id ‘box’ will get 10px of margin above and below it, and 5px of margin to the left and right.

### padding

    The padding is the spacing between the content and the border (edge of the element.). We can adjust this value with CSS to move the border closer to or farther from the content. Here, the div with id ‘box’ will get 10px of padding all around it.

### property

    Consists of a name specified in the CSS standard.

### rule

    Consists of one or more selectors, and a declaration block.

### selector

    declares which part of the markup a style applies to by matching tags and attributes in the markup itself.

### unset

    is equivalent to inherit if the property is normally inherited, or initial otherwise; it is not currently supported in most browsers (although Firefox implements it).

### value

    Consists of a keyword or numerical value.

## Assessments

* Flashcards: Quizlet: CSS
* Quiz: Quizlet: CSS

## See Also

* CSS
* Web Foundations
* W3C: Styles
* Wordpress: Inline vs Internal vs External CSS
* Saylor: HTML and CSS for Beginners