PAGE LAYOUT WITH CSS
[Pages:48]PAGE LAYOUT WITH CSS
Overview
2
? Styling Page Sections ? Introduction to Layout ? Floating Elements ? Sizing & Positioning
3 Styling Page Sections
Why do we need page sections?
4
? Style individual elements, groups of elements, sections of text or of the page
? Create complex page layouts
Sections of a page
5
Coding Horror! Coding Horror!
See our special deal on Droids!
We'll beat any advertised price!
HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
We'll beat any advertised price!
output
? Tag used to indicate a logical section or area of a page
? Has no appearance by default, but you can apply styles to it
Inline Sections
6
Coding Horror! Coding Horror! See our spectacular deal on Droids! We'll beat any advertised price!
HTML
Coding Horror! Coding Horror!
See our spectacular deal on Droids!
We'll beat any advertised price!
output
? has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span
CSS context selectors
7
selector1 selector2 {
properties
}
CSS
? applies the given properties to selector2 only if it is inside a
selector1 on the page
selector1 > selector2 {
properties
}
CSS
? applies the given properties to selector2 only if it is directly inside a selector1 on the page
Context selector example
8
Eat at Greasy's Burger...
The greasiest burgers in town!
Yummy and greasy at the same time!
HTML
li strong { text-decoration: underline; }
CSS
Eat at Greasy's Burger...
? The greasiest burgers in town!
? Yummy and greasy at the same time!
output
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- html github pages
- introduction to the hyper text markup language html
- formatting guide ju li
- beginner s html cheat sheet websitesetup
- html cheat sheet
- page layout with css
- cascading style sheets css
- html css bootstrap javascript and jquery
- programming languages for web applications cascading style
- creating a web page using html xhtml and css the basics
Related searches
- in text citation with no page number
- tom sawyer quotes with page numbers
- citations with page numbers
- online dictionary with page numbers
- stair layout with landing
- change page layout in edge
- how to cite with page numbers
- mla citation with no page number
- in text citation apa with page number
- apa citations with page numbers
- product page layout template
- html5 page layout examples