Embed Size (px)
Citation preview
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
StructureHyper Text Markup Language
PresentationCascading Style Sheets
BehaviourJavascript / jQuery
Structure - what is HTMLHyper 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: <h1>A Top Level Headline</h1>, or <em>emphasized text</em>
Document structure
<!DOCTYPE html><html> <head> </head> <body> <h1>I'm a headline</h1> <p>I am a paragraph of text</p> </body></html>
Presentation – CSSThe 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 ToolsThe 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!
