Styling and theming Build campaigns in style

What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need And plenty of examples...

Elements of the web Structure Hyper Text Markup Language Presentation Cascading Style Sheets Behaviour Javascript / jQuery

Structure - what is HTML Hyper Text Markup Language - Allows you to provide links between pages and content - A markup language consists of markup tags. Tags group and describe page content. Semantic markup tags add meaning to your content (example: A Top Level Headline, or emphasized text

Document structure I'm a headline I am a paragraph of text

Presentation – CSS The web browser software has default styles that determine how each element looks; your own nicer looking styles must be added. Styles are written by stating a selector together with a declaration. A declaration is a property: value pair, for example h1 { color: blue; } Here, the selector is h1 – this is the HTML element we work with. The declaration is { color: blue; }

The Tools The web browser is the most important tool in your kit... Not all browsers are created equal, but: - Firefox has the plugin “Firebug”, which makes it easy to “inspect” - Chrome can also “test” your styling on “mobile”.

Let's add some style!