addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwchatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgoogleimageimagesinstagramlinklocation-pinmagnifying-glassmailminusmoremuplabelShape 3 + Rectangle 1outlookpersonplusprice-ribbonImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruseryahoo

Metro Detroit WordPress Meetup Message Board › May 2012 Meeting Notes and Resources

May 2012 Meeting Notes and Resources

Deborah E.
user 11526574
Canton, MI
Post #: 15
Thanks to everyone who came out yesterday to the meeting. And special thanks to Reiko McKendry and Steve Barman for their presentations.

Download Steve's CSS presentation from SlideShare.

Notes from the meeting:

Introduction to Cascading Style Sheets (CSS)
Style sheet: a set of instructions that tell the browser how to draw an element.

To create or edit a stylesheet, use a text editor. Don't use Microsoft Word or other word processing programs, since they can add special hidden characters. Here are several options for text editors:

Windows:
Notepad
Notepad ++
Sublime Text

Mac:
TextEdit
TextWrangler

Recommended Browsers for Troubleshooting/Debugging

  • Firefox (install Firebug and optionally Web Developer Toolbar)
  • Chrome

Parent/Child Relationship and Inheritance

  • A document (page) has a hierarchy, which helps you to understand inheritance.
  • Applying style to an element that contains other elements means the style will be inherited by the style inside.
  • The element with the style applied is often referred to as the parent, the elements inside are referred to as the children.
  • Child elements inherit all the properties of their parent element.

Example: If you apply a style to the parent <div> in the markup below with the rule:

#main { color: blue;}

the h1 and p children elements will also have blue text.

<body>
<html>
<div id="main">
<h1>My Page Heading</h1>
<p class="news">Here is my news article.</p>
</div>
</html>
</body>

IDs and Classes

  • Elements can be given extra meaning by using an ID or class name.
  • The ID and class names give additional structure to your page and provide hooks for your styles.
  • An ID is used to identify an individual element on a page and can only be used once. An ID is always prefixed with a "#".
  • A class name can be used multiple times on a page. Classes are useful for naming similar types of content or similar items.

Rules
Instructions in a style sheet are statements; what you will work with most often is the statement called a rule.

A rule consists of two parts:

  • selector
  • declaration

The syntax for a rule is a selector name and a set of property/value pairs. The set of property value pairs are surrounded by curly braces.
Example:
p {
color: red;
}

Selectors
There are several types of selectors, but two common selectors are type and descendent selectors.

A type selector targets a specific element, like a paragraph, heading, or list item. Examples include:
<p>
<h1>
<li>

A descendant selector targets descendents of a specific element or group of elements. Examples include:

li a
#main p

Declarations

  • The declaration is comprised of one or more property value pairs.
  • There are many properties which can have different values.

Style Sheets, the Cascade, and Specificity

All rules are contained in the file called the cascading style sheet.

When two or more rules apply to the same element, CSS uses a process called the cascade to resolve which rule takes precedence.

The cascade assigns importance to each rule. Specificity is as follows, in order of most specific value to least specific:

1. Style attribute (inline styling)
2. ID
3. Class, pseudo-class, attribute
4. Elements

An example of how specificity is applied for the rule <li style="color: red;"> is

1, 0, 0, 0

the inline style attribute is the 1 value

For a good description of specificity, see CSS Tricks article by Chris Coyier

Viewing existing styles on a page can be done using tools in Chrome or Firefox. In Chrome, you can use the Inspector; in Firefox, you can use Firebug. Each tool allows you to view and edit existing styles on a page.

Resources

Powered by mvnForum

Our Sponsors

  • A2 Hosting

    (Snacks/Drinks) Use "DETWPMEETUP" to save 55% on fast, reliable hosting.

  • Grand Circus

    A Venue Space

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy