CSS Workshop

Before you start with this CSS Workshop learn our HTML Workshop

Home - Web Design
HTML Workshop
CSS Workshop
JavaScript Workshop
Graphics Workshop
Web History
CSS Module - css_module.css
Web ☯ Zen
Plain Text


Learn CSS at MDN (Mozilla Developer Network)
CSS Workshop
Testing Area

Learn CSS at MDN (Mozilla Developer Network)

1 - What is CSS


2 - Why use CSS?

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.
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

Complete list of CSS Selectors work spec at W3C - read more at MDN

Selectors based on relationships

Learn selectors A E - A > E - E:fist-child - B + E - you can combine them - using * (asterisk) means "any element"
Example data-table-1

Learn to avoid class and id - see Tables

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
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
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-RulesLater rules get priority in a stylesheet - make rules more specific
Readable CSS

• Content
• Lists
• Boxes
• Layout
• Tables
• Media

To Do

- Box for codes - copy button - scroll
- CSS HTML double-box + display

*    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *    *

Notes 2

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

5. Background image - default=repeat horiz. & vert. - or background repeat: repeat-x (horizontal) - repeat-y (vertically) - no-repeat (coming soon)

To select all paragraphs that are children of the tag, you would write: body > p { background-color : #00f; }

Testing Area

CSS reference - MDN
CSS/Training - w3.org
w3schools.com - Source Code & Result
Code Box

Many thanxx to quackit.com

* * * * * * * * * * * *

Thanxx to geekpedia.com

Fullscreen Black
Fullscreen - htmlgoodies.com
Google Chrome Fullscreen - Windows: F 11
210_oceanscape - csszengarden_210
189_mozart - mozart_stylesheet - csszengarden_189
111_gruener_entwurf - csszengarden_111

Sea of Memes - Don't Hit Me


Notes 3

How Dreamweaver Templates Work - ezinearticles.com
doc3.html - style3.css
The Cascade - sitepoint.com

HTML Element - Wikipedia - Presentation and behavior are separate functions, which can be added as desired, ideally through links to external documents such as stylesheetsgraphics 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.

Visit our sites


Website Creations

Version 0.1
Last update 2.3.2013 - Leipzig, Germany, 0:25 am
Session 1 - 2.3.2013 - Leipzig, Germany, 0:00-1:00=1:00 - total time 1:00

Website counter
Copyright © 2013 by IDL Productions