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.
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.[3]
CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.[4]
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]
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]
