#WCTO @JamesAStrang

Welcome.

#WCTO @JamesAStrang

How to dominate a theme.By James Strang

Why are you here for?

• Get a basic understanding of HTML and CSS

• Learn how to use your browser tools

• Alter visual elements of your website

Just Kidding…..

#WCTO @JamesAStrang

Hello World

CSS Basics• HTML can be defined using CSS by ID, CLASS, TAG, or inline

style.

• CSS uses {curly brackets}

• CSS code is a supplement to HTML, not a replacement.

Syntax of CSS - Inline

#WCTO @JamesAStrang

Hello World

Syntax of CSS – in stylesheetinput[type="submit"] {

border: 1px solid #ccc;

border-color: #ccc #ccc #bbb #ccc;

background: #e6e6e6;

color: #262626;

cursor: pointer; /* Improves usability and consistency of cursor style */

-webkit-appearance: button; /* Corrects style of 'input' types in iOS */

font-size: 12px;

font-size: 1.4rem;

line-height: 1;

padding: 5px 2%;

}

Selectors• Tag (h1, h2, div, a, img, body...)

-Affects all elements of a tag

• ID ( #elementid )-Used for unique items on a page

• Class ( .elementclass )-Affects all elements that have been assigned the class

• Inline CSS (<element style="style_definitions">)-Written into HTML, takes top priority. Can be added in the HTML tab

Grouping Selectors• Comma “,” allows multiple selectors for 1 declaration. “h1, h2, h3

{color: blue;}”

• Space “ ” searches first for all instances of second “.postbody img {border: 1px;}

• Right Chevron “>” searches for direct children “td > a {font-variant: small-caps;}”

• More information about selectors: http://www.w3schools.com/cssref/css_selectors.asp

#WCTO @JamesAStrang

display: none;Your secret weapon.

“Inspecting” your site

How to add Custom CSS to your website:• Jetpack Custom CSS

• Plugin (Simple Custom CSS)

• Child Theme

• Editing your theme files… (Not recommended)

Simple Custom CSS

#WCTO @JamesAStrang

Let’s get practicalReal code examples.

Resources• Great list of CSS properties with examples

http://www.w3schools.com/cssref/default.asp

• Enter any CSS or URL to have it explained to youhttp://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

• Great resource for anything code related on your websitehttp://www.w3schools.com/

• WordPress Forums where people like me are able to help you.https://wordpress.org/support/

#WCTO @JamesAStrang