Internet Fundamentals/CSS

From Wikiversity
Jump to: navigation, search
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.[1] This lesson introduces CSS.

Objectives and Skills[edit]

Objectives and skills for this lesson include:[2]

  • 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[edit]

  1. Wikipedia: Cascading Style Sheets

Multimedia[edit]

  1. YouTube: What is CSS?
  2. YouTube: Learn CSS in 12 Minutes

Student Presentations[edit]

  1. YouTube: CSS Demonstration
  2. YouTube: Using CSS to Design a Website
  3. YouTube: Three Types of CSS
  4. YouTube: HTML and CSS for Beginners

Activities[edit]

  1. Complete one or more of the following tutorials:
  2. 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.
  3. 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.
  4. 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[edit]

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[3]
  • CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.[4]
  • CSS benefits include:[5]
    • 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.[6]
  • The CSS specifications are maintained by the World Wide Web Consortium (W3C).[7]
  • A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.[8]
  • Selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself.[9]
  • 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.[10]
  • 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.[11]
  • Values may be keywords or numerical values.[12]
  • CSS may be specified inline, internal, or external.[13]
  • Inline CSS has the format:[14]
<element style="property: value;">content</element>
  • Internal CSS has the format:[15]
<head>
  <style>
    selector {property: value;}
  </style>
</head>
  • External CSS is specified using a link element:[16]
<head>
  <link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
  • External CSS files have the format:[17]
selector {property: value;}

which may also be written as:

selector {
  property: value;
}

or

selector 
{
  property: value;
}
  • Whitespace between properties and selectors is ignored.[18]

Key Terms[edit]

class
An identifier that can annotate multiple elements in a document.[19]
declaration
Consists of a property, a colon (:), and a value, separated by a trailing semi-colon (;).[20]
id
A unique identifier within the document.[21]
property
Consists of a name specified in the CSS standard.[22]
rule
Consists of one or more selectors, and a declaration block.[23]
selector
Declares which part of the markup a style applies to by matching tags and attributes in the markup itself.[24]
value
Consists of a keyword or numerical value.[25]

Assessments[edit]

See Also[edit]

References[edit]