Separates content (HTML etc.) and how to display it (CSS)
Avoid duplication - make maintainance easier - use same content with different styles for different purposes
In general with HTML, you use the markup language to describe the information content of the document, not its style. You use CSS to specify its style, not its content. style1.css
CSS avoids using <b> or background color etc. from HTML
so that all info is at one place doc1.html changing color via style1.css - red, blue, green, yellow, orange, violet, purple - more about colors
3 - How CSS works
DOM combines HTML and CSS for the browser
Understand Markup Language, tag elements, container, string, DOM as tree - elements as nodes, parent child
Install DOM Inspector on Firefox - learn right hand panel - analyze STRONG > shows CSS location and name :-)
Add X-Ray Goggles to Chrome Toolbar
4 - Cascading (hintereinanderschalten) and inheritance (Vererbung)
different places
and intract in clomplex ways - may become difficult to debug
3 main places:
browser's default styles for markup languages - reading user's style-spedification - styles which are linked to the document by author
The linked files can be
specified in three places: an external file (style sheet) - definition at the beginning of the document (use only for that document) - on specific element in body of document (least maintainable method, but good use for testing)
Author's document style > modifies user's style > modifies browser's default style - we will work only with document's style, we are the author :-)
Example: the appearence of this document is controlled by: partly the browser, settings (changeable in preferences etc.), style sheet or style definitions of the document
In doc1.html <strong> comes from browser's default - color red comes from
style1.css - <strong> inherits from <p>, and <p> from <body> Priorities of styles in the cascade: first author's styles - second reader's stylesheet (preferences) - third browser's defaults
Keyword !important overrides author's style > read more at Assigning property values, Cascading, and Inheritance
style1.css add: p {color: blue; text-decoration: underline;} - Challenge: Underline only red letters
5 - Selectors
Create rules like:
strong {
color: red;
}
strong is selector - selects which elements in DOM rule applies to - part inside curly brackets is declaration -
keyword color is property - red is value - semicolon after property-value pair separates from other pairs in same declaration - strong is a type selector or tag selector
We can use attribute values in selectors. Two specific attributes are class and id.
Use class attribute to assign element to named class - choose free name for class. Multiple elements can have same class value. In stylesheet type full stop (period) . before class name when using in selector.
Use id attribute in element to assign id to the element. choose free name, must be unique in document. In stylesheet type number sign (hash) # before ID when using in selector.
Example http: <p class="key" id="principal">
Example css: .key { color: green;}
#principal { font-weight: bolder;}
If more than one rule applies to an element, then css gives priority to more specific selector, first id, then class, then tag
You can also combine selectors, making a more specific selector - p.key selects only
<p> elements that have class name key.
You are not restricted to class and id, can specify other attributes using square brackets - [type='button'] selects elements with type attribute value button.
Stylesheet gives priority to rule which is later in stylesheet if they have conflicting rules and are equally specific.
In problem cases make one more specific, if you can't try to drag rule nearer to end of stylesheet, has more priority.
Pseudo-classes selectors
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.
Example: selector:pseudo-class { property: value; }
List of pseudo-classes
:link :visited :active :hover :focus
:first-child :nth-child :nth-last-child :nth-of-type :first-of-type
:last-of-type :empty :target :checked :enabled
:disabled
doc1b - style1b control classes .carrot .spinach and id #first
changing css rules order has no effect - change text color via #second or p
doc1c - style1c view effect > Go to our Home page.
Using selectors based on relationships and pseude-classes - read example
6 - Readable CSS
Make css more readable - add white space - /* comments */ - group selectors together
Own choice - shared projects may have own rules - indentions or tabs - see examples
Comment out rules etc. for testing purposes via comment delimiters /* */
Specify group of selectors separating with commas - example: h1, h2, h3 {color: navy;}
7 - Text styles
8 - Color
9 - Content
10 - Lists
11 - Boxes
12 - Layout
13 - Tables
14 - Media
Part II
CSS Workshop
Our CSS Workshop soon will start here:
First Notes
• First learn the basics of HTML at our HTML Workshop
• About CSS
• First style1.css - editor - /* Comment */ - links - background color - font {style; size; color} - h1-h6 - combined text1.html - index.html - paths - open in browser
• Fonts - italic bold etc. - sizes - symbols
• Colors
• 3 css places: stylesheet - head - body element - prefer stylesheet
• 3 display priorities: author's document style > modifies user's style > modifies browser's default style - keyword !important overrides author's style
• DOM
• Rules - selectors - declarations in curly brackets/braces, including properties and values - strong { color: red; }
• .class - #id - groups separated by commas - or specify other attributes using square brackets - [type='button']
• All properties used in declarations
• All selector types - universal * - element type - class - id - attribute - grouping - combinators - pseudo-classes - pseudo-elements
• All At-Rules • Later rules get priority in a stylesheet - make rules more specific
• Readable CSS
1. style folder - style.css - background-color from style.css
Other methods: in-line method - attribute style >>> body style="background-color: #FF0000;" - Or head style tag etc. - more about this coming soon
2. <h5> color
"This is <h5> in green color:#0f0 from style.css :-)
3. <h4> text color & text background
h4 text blue 0000ff - background yellow ffff00 :-))
4. <p> text color
This is <h6> with color red, color:#f00
And this is the default html text color :-) with the in-line method - attribute style
HTML Element - Wikipedia - Presentation and behavior are separate functions, which can be added as desired, ideally through links to external documents such as stylesheets, graphics files, and scripts. Select an appropriate stylesheet to present a document by displaying on a monitor, printing on paper, or to determine speech characteristics in an aural user agent.
Historically, user agents did not always support these features. In the 1990s, as a stop-gap, presentational elements were added to HTML, at the cost of creating problems for interoperability and user accessibility. This is now regarded as outmoded and has been superseded by stylesheet-based design; most presentational elements are now deprecated.