Styling and theming Build campaigns in style. What we'll look at... How a web document is structured...
-
Upload
cecily-smith -
Category
Documents
-
view
212 -
download
0
Transcript of Styling and theming Build campaigns in style. What we'll look at... How a web document is structured...
![Page 1: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/1.jpg)
Styling and theming
Build campaigns in style
![Page 2: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/2.jpg)
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...
![Page 3: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/3.jpg)
Elements of the web
StructureHyper Text Markup Language
PresentationCascading Style Sheets
BehaviourJavascript / jQuery
![Page 4: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/4.jpg)
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>
![Page 5: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/5.jpg)
Document structure
<!DOCTYPE html><html> <head> </head> <body> <h1>I'm a headline</h1> <p>I am a paragraph of text</p> </body></html>
![Page 6: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/6.jpg)
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; }
![Page 7: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/7.jpg)
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”.
![Page 8: 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.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7d5503460f94b808d9/html5/thumbnails/8.jpg)
Let's add some style!