Internet Fundamentals/CSS
Jump to navigation
Jump to search
![CSS](http://178.128.105.246/cars-http-upload.wikimedia.org/wikipedia/commons/thumb/4/49/Crystal_Clear_app_stylesheet.svg/180px-Crystal_Clear_app_stylesheet.svg.png)
CSS
![CSS](http://178.128.105.246/cars-http-upload.wikimedia.org/wikipedia/commons/thumb/4/49/Crystal_Clear_app_stylesheet.svg/180px-Crystal_Clear_app_stylesheet.svg.png)
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 | edit source]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 | edit source]Multimedia
[edit | edit source]Student Presentations
[edit | edit source]Activities
[edit | edit source]- Complete one or more of the following tutorials:
- 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
, andfont-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
, andfont-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
, andfont-family
, as well asfloat
,width
,margin
,padding
, and / orborder
. - Use the W3C: CSS Validator to validate your external style sheet. Make any necessary corrections to pass the validation test.
Lesson Summary
[edit | edit source]- 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]
- Comments may be placed wherever white space is allowed within a style sheet.[19]
/* Comment */
Key Terms
[edit | edit source]- class
- An identifier that can annotate multiple elements in a document.[20]
- declaration
- Consists of a property, a colon (:), and a value, separated by a trailing semi-colon (;).[21]
- Font-Family
- The font-family property sets the font of an HTML element’s text.[22]
- id
- A unique identifier within the document.[23]
- 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.[24]
- inherit
- Copies the value of the property in effect for the element’s parent.[25]
- 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.[26]
- 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.[27]
- 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.[28]
- property
- Consists of a name specified in the CSS standard.[29]
- rule
- Consists of one or more selectors, and a declaration block.[30]
- selector
- declares which part of the markup a style applies to by matching tags and attributes in the markup itself.[31]
- 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).[32]
- value
- Consists of a keyword or numerical value.[33]
Assessments
[edit | edit source]- Flashcards: Quizlet: CSS
- Quiz: Quizlet: CSS
See Also
[edit | edit source]- CSS
- Web Foundations
- W3C: Styles
- Wordpress: Inline vs Internal vs External CSS
- Saylor: HTML and CSS for Beginners
References
[edit | edit source]- ↑ Wikipedia: Cascading Style Sheets
- ↑ Training.gov.au: ICTWEB409 - Develop cascading style sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Mozilla: CSS Comments
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets