102-05:
CSS: Cascading Style Sheets
Rule-based language that can change the stylistic display of a document via organization, sizing, color, and animation.
User Agent
- Browser or other program that interprets data to render (such as organization, color, or sizing) to a viewer based on display elements beyond the source material (such as HTML)
- User agent styles are how a particular user agent (like one browser vs. another) interpret the same source material
CSS Syntax
Selectors
- An element tag followed by braced declarations (instructions or characteristics, paired as properties and values)
- Example:
sample-element{
color:purple;
}
Would set all <sample-element>
-tagged content to be colored purple
- Snytax: property : value
- Selections can define a style set to be used whenever an attribute is given to HTML content within that document
- Selectors may operate based on element type or class, or by an attribute specified for a particular element
How CSS Is Read
- External: HTML entries refer to a separate linked style sheet ( .css file). This file has no HTML, only selectors with un-bracketed element tags.
- Internal: CSS style values written within the page’s HTML (within <head> section, using
- Inline: CSS style values written on an individual element basis, with
style
set as an attribute with the properties & values in unspaced lists, like:
<p style="color:purple;text-align:right">Sample text</p>
Specifications
- Standardized and further developed by CSS Working Group (with an eye toward backward compatibility)
Conflicts & Priorities
- The most recent style definition is used (allows for per-line exception to page style, or internal exception to referred external)
- Browsers have default style configurations that are used in the absence of defined styles
Colors in CSS
- The value following the
color
property can be set by a name value or any of several numeric definitions (like RGB or HEX values) like:
<p style="color:#937EFF">Purple Text Here</p>