Styling and theming
Download
Report
Transcript Styling and theming
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:
<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 – 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!