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.

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

1. Wikipedia: Cascading Style Sheets

Multimedia

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

Student Presentations

1. YouTube: Using CSS to Design a Website
2. YouTube: CSS Simplified
3. YouTube: CSS External Style Sheets

Activities

1. Complete one or more of the following tutorials:
   • TutorialsPoint: CSS
   • Codecademy: Introduction to CSS
   • W3Schools: CSS Tutorial
   • Mozilla: CSS Basics
   • LearnLayout: Learn CSS Layout
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

• 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:

<element style="property: value;">content</element>

• Internal CSS has the format:

<head>
  <style>
    selector {property: value;}
  </style>
</head>

• External CSS is specified using a link element:

<head>
  <link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>

• External CSS files have the format:

selector {property: value;}

which may also be written as:

selector {
  property: value;
}

or

selector 
{
  property: value;
}

• Whitespace between properties and selectors is ignored.
• Comments may be placed wherever white space is allowed within a style sheet.

/* Comment */

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

References

← HTML

Internet Fundamentals

Graphics and Multimedia →