~~SLIDESHOW~~
====== Styling and Positioning with Stylesheets ======
**Contact Hour 16**: To be discussed on Tuesday 20th March, 2012.
**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
----
The contents of these notes and all the examples are from Chapters 10 and 11 of Castro and Hyslop,
//HTML5 and CSS3: Visual Quickstart Guide//, 7th Ed., PeachPit Press, 2012.
These notes are incomplete and you are invited to contribute to them by getting an account on this wiki.
===== Styling and Positioning with Stylesheets ======
* [[#Formatting Text with Styles]]
* [[#Layout with Styles]]
===== Formatting Text with Styles =====
* [[#Example 1]]
* [[#Constructing a Style Stylesheet]]
===== Example 1 =====
This is the example we will use.
* Here it is [[http://www.bruceontheloose.com/htmlcss/examples/chapter-10/no-styles.html|without any style applied]].
* Here it is [[http://www.bruceontheloose.com/htmlcss/examples/chapter-10/text-decoration.html|as it will be at the end]].
* The HTML code and final styelsheet are in the notes.
----
The complete set of examples is here http://www.bruceontheloose.com/htmlcss/examples/#chapter-10. In the session, we will use a single stylesheet and use the browser's development tools to see how it evolves towards the final state.
Here is the HTML:
Antoni Gaudí - Introduction
Barcelona's Architect
Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.
Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his careful observations of nature are quite apparent in his work, from the Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its organic, bulbous towers.
La Sagrada Família
The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. His focus on this project was so intense that he shunned all other projects, slept in an apartment at the work site surrounded by plans and drawings, and so completely ignored his dissheveled appearance that when, in 1926, he was struck by a streetcar in front of the church, he was mistaken for an indigent and brought to a hospital for the poor where he died soon thereafter.
The Sagrada Família attracts even the non-religious to its doors in large part due to this tragic story and its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders. But there is something more. In the Sagrada Família, Gaudí again brings nature and architecture together—the soaring spires look something like rising stalagmites in an underground cave—this time in reverance.
Park Guell
The Park Guell always reminds me of Howard Roark in Ayn Rand's The Fountainhead. Gaudí's project in the Park Guell was to build a residential community whose residents would love where they lived. It was never finished.
Perhaps that is for the best, since now we all get to enjoy it. The Park Guell is set on a hill overlooking practically all of Barcelona. Its beautiful and even comfortable serpentine bench is filled with foreigners and locals alike every day of the week. Its mosaic lizard have become synonymous with the city itself.
Here is the final CSS:
@charset "UTF-8";
body {
background: #eef;
color: #909;
font: 100% "Palatino Linotype", Palatino, serif;
}
h1,
h2 {
color: navy;
font: 1.375em "Arial Black", Arial, sans-serif;
letter-spacing: .4em;
text-align: center;
}
h1 {
text-transform: uppercase;
}
h2 {
font-size: 1.15em;
font-variant: small-caps;
}
p {
font-size: .875em;
line-height: 1.6;
text-align: justify;
text-indent: 1.5em;
}
em {
font-weight: bold;
}
/* Links */
a:link {
color: #74269d;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #909;
text-decoration: none;
}
a:hover {
color: #c3f;
font-weight: bold;
text-decoration: underline;
}
/* Table of Contents navigation */
.toc {
background: #ebc6f9;
}
.toc a {
font-size: .75em;
}
===== Constructing a Style Stylesheet =====
Add your own notes!
* [[#Font Families and Shapes]]
* [[#Font Size and Line Height]]
* [[#Colour, Spacing and Indents]]
* [[#White Space and Other Decorations]]
===== Font Families and Shapes =====
* [[#Choosing a Font Family]]
* [[#Specifying Alternate Fonts]]
* [[#Creating Italics]]
* [[#Applying Bold Formatting]]
===== Choosing a Font Family =====
===== Specifying Alternate Fonts =====
===== Creating Italics =====
===== Applying Bold Formatting =====
===== Font Size and Line Height =====
* [[#Setting the Font Size]]
* [[#Setting the Line Height]]
* [[#Setting All Font Values at Once ]]
===== Setting the Font Size =====
===== Setting the Line Height =====
===== Setting All Font Values at Once =====
* This is an advanced technique.
* The order is important and you may find it easier to build font declarations up step by step.
==== Colour, Spacing and Indents =====
* [[#Setting the Colour]]
* [[#Changing the Text's Background]]
* [[#Controlling Spacing]]
* [[#Adding Indents]]
===== Setting the Colour =====
===== Changing the Text's Background =====
===== Controlling Spacing =====
===== Adding Indents =====
===== White Space and Other Decorations =====
* [[#Setting White Space Properties]]
* [[#Aligning Text]]
* [[#Changing the Text Case]]
* [[#Using Small Caps]]
* [[#Decorating Text]]
===== Setting White Space Properties =====
===== Aligning Text =====
===== Changing the Text Case =====
===== Using Small Caps =====
===== Decorating Text =====
===== Layout with Styles =====
* [[#Introducing Layout with Styles|Introduction]]
* [[#Another Example Document]]
* [[#The Box Model]]
* [[#Types of Positioning]]
* [[#Box Formatting]]
* [[#Example 2: Developing a Positioning Style Sheet]]
===== Introducing Layout with Styles =====
* Layout with CSS has advantages over other methods (such as tables and frames)
* Good for liquid layouts (which resize with browser)
* Lots of Advnatages (See notes)
* Disadvantages
* Some older browsers are buggy((Notably IE 6 and IE 7))
* Really old browsers provide no support for layout.
----
Advantages of Layout with Styles
* Can apply layout to all documents and change with one style sheet
* Smaller files: HTML+CSS usually less than HTML with lots of font tags, tables, etc. Plus CSS file can be cached so loaded only once for a whole site.
* HTML code is cleaner and easier to edit.
* Standard so supported in future.
===== Another Example Document =====
The same [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html|HTML5 copy]] is used in all the slides that follow.
* Only the style sheet changes
* Different effects are achieved with style sheets alone.
----
View (edited) source
photobarcelona - Liz Castro's photographs and blog about Barcelona
The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Família neighborhood is an oft-overlooked gem of modernist architecture. Although the building was begun in 1902 under the direction of the architect Lluís Domènec i Montaner, the hospital itself dates from the 14th century. It serves some 34,000 inpatients yearly, along with more than 150,000 emergency room…
Outside it feels like a battle is raging, with firecrackers going off left and right in honor of Sant Joan, but in the cloister of Barcelona's 12th century Cathedral, it's quiet enough to hear the trickle of the water from the fountain. As everywhere else in Barcelona, Saint George is slaying his dragon here. Somehow…
Quiet returns. And the refrigerator was empty, so off I set on my way to the market. The plan was homemade sushi with friends so I made the trip down to the central Barcelona market: the Boquería.
I never get tired of coming here. There are rows and rows of busy stalls with fresh fruit and vegetables, and spices and nuts. And more than a couple of crazy tourists like me taking pictures. I confuse the locals by talking to them in Catalan, but…
===== Structuring your Page =====
* Have a plan
* Use semantic elements, id and class to classify parts of your content.
* Arrange the order of content so that it will reproduce in old browsers and satisfy requirements for Search Engines((Known as Search Engine Optimization or SEO))
===== The Box Model =====
* CSS treats your web page as if every element is enclosed in an invisible [[#Consequences of the Box Model|box]].
* Box //height//, //width//, //padding//, //border// and //margin// can all be set by the style sheet.
**Table heading links to w3schools references on this subject.**
^The CSS Box^[[http://www.w3schools.com/css/css_border.asp|Border]] ^[[http://www.w3schools.com/css/css_margin.asp|Margin]] ^[[http://www.w3schools.com/css/css_padding.asp|Padding]]^
margin
border
padding
content
<-
->
CSS 'width'
===== Consequences of the Box Model =====
* CSS can be used to determine the appearance and position of each element's box.
* Gives considerable control over layout.
* Element's box may be block-level or in-line.
* Default representation can be changed by a style declaration.
* Elements are displayed in the order that the HTML flows from top to bottom
* Line breaks at the beginning and end of every block-level box.
===== Types of Positioning =====
* Leave the box in the flow -- the default (called //static//)
* Remove the box from the flow and specify its exact coordinates with respect either to:
* Its parent element (absolute)
* The browser window (fixed)
* Its default position in the flow (relative)
* If boxes overlap, their relative position (stacking order) can be specified using the so-called ''z-index''.
===== Box Formatting =====
* Once its position is decided the following properties can be set:
* Size (height and width)
* Padding
* Border
* Margins
* Alignment
* Colour
* Some properties, particularly ''em'' and percentage values, are relative to the element's parent.
===== Case Study: Developing a Positioning Style Sheet =====
This is the document as we want it to appear when it is finished
[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page.html|Finished result.]]
===== Document Structure =====
* Open the [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/no-styles.html|no-style version of the document]] and view source, preferably in a web development tool that has code folding.
* Examine the structure.
===== The HTML5 display-role reset =====
* For older browsers, ensures that new elements are set as blocks
* For IE browsers, we also need a JavaScript HTML5 fix (see the HTML5)
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/html5-elements-styling.html|See page]]
----
charset "utf-8";
/* Style new "block-level-like" HTML5 elements so they occupy their own line in older browsers. */
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
===== The CSS Reset =====
* Common technique, ensures that design starts from a blank slate on all browsers
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/reset.html|See result]]
----
/* CSS RESET
------------------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
===== Changing the Background ====
To use a background image:
#container {
background: url(../img/bg-bluebench.jpg) repeat-y;
}
[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/assets/css/background-image.css|See result]]
===== To change the background colour =====
#page { background: #fef6f8 }
a:focus
a:hover
a:active { background: #F3CFB6; }
.logo a:hover { background: transparent; }
.sidebar { background: #f5f8fa; }
[[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/background-shorthand.html|See result]]
===== Setting the Height or Width for the Element =====
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/width-height.html|Width and Height]]
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/max-width.html|Maximum Width]]
===== Setting the Margins around an Element =====
===== Adding Padding around an Element =====
* Padding is extra space around the contents of an element but within the border. You can change the padding's thickness but not its background.
* When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right:
===== Making Elements Float =====
===== Controlling Where Elements Float =====
===== Setting the Border =====
===== Offsetting Elements in the Natural Flow =====
===== Positioning Elements Absolutely =====
===== Positioning Elements in 3d =====
===== Determining How to Treat Overflow =====
===== Aligning Elements Vertically =====
===== Changing the Cursor =====
===== Displaying and Hiding Elements =====
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-img-default.html|Display Image Default]]
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-block.html|Display Image Block]]
* [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/display-none.html|Display Image Node]]
===== Summary ======
* [[#Formatting Text with Styles]]
* [[#Layout with Styles]]
===== Next =====
*