~~SLIDESHOW~~ ====== Introduction to CSS ====== ===== Introduction to CSS ====== * [[#CSS Building Blocks]] * [[#Working With Stylesheets]] * [[#Defining Selectors]] ===== CSS Building Blocks ===== ===== Working With Stylesheets ===== ===== Defining Selectors ===== * [[#Constructing a style rule]] * [[#Constructing selectors]] * [[#A Catalogue of style selectors]] ===== Constructing a style rule ===== Single property: h1 { color: red; } Multiple properties: h1 { color: red; background: yellow; } Selector Selector: name of an element h1 Declaration Declaration: ends in semicolon h1 { decaration; } Property Property: e.g. color Value Value: separated from property by a colon: color: red ===== Constructing selectors ===== A selector can define up to five different criteria for choosing the elements that should be formatted: The type or name of an element The context in which the element is found The class or id of an element The pseudo-class of an element or the pseudo-element itself Whether an element has certain attributes and values. A selector can include any combination of these criteria. In addition you can apply the same declaration to a group of selectors. ===== Another Example ===== To illustrate the various style selectors, and how the work, we apply the simple style declaration color: red, to various selections of an example document. ---- Antoni Gaudí - Introduction

Antoni Gaudí

Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.

Barcelona celebrated the 150th anniversary of Gaudí's birth in 2002.

La Casa Milà

Gaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there.

La Sagrada Família

The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the most visited building in Barcelona.

It is important to note that only the style declaration is changing! ===== A Catalogue of style selectors ===== ===== Selecting elements by name ===== This selector will choose all of the h2 elements in the document: h2 { color: red; } Result ===== Selecting elements by id ===== This selector will choose the div element with an id equal to "gaudi": div#gaudi { color: red; } Result ===== Selecting elements by class This selector will choose all of the div elements which have a class attribute equal to "works": div.works { color: red; } Result ===== Selecting the descendants of an element ===== This space between div#gaudi and p means that this selector will find any p element that is a descendent of the gaudi div, regardless of its generation. This is an ancestor selector: div#gaudi p { color: red; } Result ===== Selecting elements by parent ===== This descendent selector will only choose those p elements that are children of the gaudi div. In order to qualify, they may not be contained within any other element: div#gaudi > p { color: red; } Result Explanation ===== Selecting the first child element ===== This selector chooses only the p element that is the first child of the gaudi div: div#gaudi p:first-child { color: red; } Result ===== Selecting sibling elements ===== This selector chooses only those p elements which directly follow a sibling p element: div#gaudi p+p { color: red; } Result Pseudo-elements: first line of an element This selector will choose the first line of each p element: p:first-line { color: red; } Result ===== Pseudo-elements: first letter of an element This selector will choose the first letter of each p element: p:first-letter { color: red; } Result ===== Pseudo-elements: based on state ===== You can't specify in code what state a link (a element) will have, it is controlled by you visitors. You can however give visual feedback based on the state by use of the following pseudo-elements: a:link { color: red; } a:visited { color: yellow; } a:focus { color: olive; } a:hover { color: green; } a:active { color: blue; } Result Explanation ===== Selecting elements based on attributes ===== This selector will choose the div elements which have a class attribute equal to works: div[class='works'] { color: red; } Result Note this selector is equivalent to div.works. ===== Groups of elements ===== You can select any number of individual selectors, as long as you separate each with a comma: h1, h2 { color: red; } Result ===== Combining selectors ===== You can also combine selectors each you need to be particularly precise: div.works p em:first-letter { color: red } Result Explanation This selector chooses the first letter of any em element that is within any p elements that are part of a div that is of class works. It doesn't seem to work!