COM621 – Interactive Web Development

COM621 – Interactive Web Development Lecture 2 - Cascading Style Sheets

Web Styling • We have seen how XHTML can be used to create content for a website, however we have not concerned ourselves with presentation. • Most of the XHTML tags contain attributes that can define presentation style, however, using them have a few downsides:

XHTML element Styling Downsides • When styling using attributes for HTML tags, they need to be explicitly stated in each instance of the element in the page. • When we need to change the look of the page, we would have to go through the source code line by line changing every instance of every attribute. • As the amount of content increases, maintenance becomes more difficult. • Attributes applied to XHTML elements allow only limited scope to adjust how they are displayed.

Style Sheets • The concept of a style sheet did not originate on the web; it has been used extensively in computing for years now • The most familiar application of style sheets off the web is the formatting styles used in word processors.

Cascading Style Sheets • The term CASCADING STYLE SHEET (CSS) refers to a specific way in which browsers determine which styles apply to specific parts of the page. • This method is called “The Cascade” and it’s from the cascade that CSS takes its name. • CSS language was designed to be used primarily with HTML; therefore it is ideally suited for use in web design. • The language is simple and flexible enough to encompass all common web presentation effects.

CSS in HTML • There are 3 ways in which styling rules can appear in an HTML document: • Linked, • Embedded or • Inline. • The rules for each method are generally the same, but the way HTML and CSS work together depends on the method used.

Stylesheet Sample • Stylesheets are text files saved with a .css extension or sections of text embedded into web pages depending on your styling choice

Linked Stylesheets • In order to assign a stylesheet to an HTML page, the <link /> tag • The link tag has 3 attributes that should be filled: • href=“linkurl” – The URL of the resource (stylesheet file) • rel=“linktype” – The forward link type (in CSS this is “stylesheet”) • type=“contenttype” – The internet content type (“text/css” for css) • Example: <link href="Pract2.css" rel="stylesheet" type="text/css" />

Embedded Stylesheets • Embedded style sheets are useful when the rules apply only to the specific page in which they are located but not to the rest of the site. • The <style></style> tag is used with only one required attribute: type which is set to “text/css” • The <style> tag needs to be located inside the HEAD of the HTML document (nested)

Example:Linked + Embedded Linked Stylesheet <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Styling with CSS</title> <link href="Pract2.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> Embedded Stylesheet Note the comments inside the <style> tag. This has to be done in order for the page to be XHTML validated

Inline Stylesheets • Inline stylesheets make use of the style attribute of most HTML tags • The attribute contains the “declaration” part of a CSS rule but not the “selector” (more on the following slides) • Example <p style="font-size:24px;">This is how a paragraph looks with different font size</p>

CSS Rules • The building blocks of any stylesheet are the CSS rules that compose it. • Each rule is a single statement that identifies what should be styled and how those styles should be applied. • Stylesheetsare then composed of a list of rules, which the browser uses to determine what a page should look like.

CSS Rules • A CSS rule consist of 2 sections: The selector(s) and the declaration(s). A declaration is made up of a property and a value for that property, i.e. • selector { property1: value; property2: value; } • Note: CSS ignores extra spaces, so you can write your rules any way you want, i.e. the following will be the same rule as the previous one: selector { property1: value; property2: value; }

CSS Rules • The “selector” part of the rule tells which section of the document the rule covers. • The simplest type of selector is a type selector that indicates a specific markup element, such as the <p> tag in HTML. You write a type selector by just giving the name of the element without the <> brackets: • p { property: value;} • This rule will select the styling of all <p> tags.

CSS Rules • The next part of the rule is the declaration. • Declarations are enclosed in {} braces. • Within the braces, the property name is given first, followed by a colon, and then a property value. • several properties can be assigned to a selector by separating them using semi-colons. • The entire rule is concluded by the ending brace. body { background-color:yellow; color:#C30; }

CSS Rules • Rules can also be combined if they have the same declaration and different selectors. • Selector are combined by putting them in a list separated by commas: • ul,ol,dl {background-color:#91FE0C}

CSS Comments • Just like many other languages, CSS allows you to put comments in your stylesheet; to do that , you need to enclose the comment inside the characters /* and */ as follows: • /* place your comment here */ • Comments can appear anywhere in the stylesheet, even inside a rule.

Classess and IDs • In addition to setting styles based on HTML elements, CSS allows for rules based on two optional attributes in HTML: class and id. • Each of these can serve as the selector part of a CSS rule and can be set on any visible HTML tag. • Using the class and id selectors will really bring into life the <div> and <span> tags in HTML. These two tags can be made to have nearly any effect and presentation.

HTMLClass Attribute • The class attribute is used to define a related group of HTML elements on a page. They may have the same function or role, but in a CSS context, it means they have the same style rules applied to them. • To create a class, you simply have to give it a name. A class name can be nearly anything, but it has to be 1 word. (avoid using underlines, periods, and other non-alphanumerical characters when naming classes). • Also note that a given HTML element can be part of 1 or more classes.

HTMLClass Attribute • Example: In this HTML we are defining 4 classes named: p1,q2,r3 and j4 <body> <div class="p1"> <h2 class="q2">Class Times</h2> <p class="r3"> Classes are timetabled every Friday from <span class="q2 j4">9.15</span> to <span class="q2 j4">2.05</span> in MG122</p> </div> </body> In this example we can say that: <div> is part of the p1 class <h2> and <span> are part of the q2 class <p> is part of the r3 class <span> is also part of the j4 class

CSS Class Selector • After the classes have been defined in HTML, they can be used as a class selector in CSS • Class selectors are indicated by a period (.) before the name of the class: <style type="text/css"> <!-- .p1 {background-color:silver;} .q2 {color:blue;} .r3 {font-family:"Comic Sans MS", cursive;}

CSS Class Selector • Element selectors can be combined with class selectors; the result selects only those elements that are member of that particular class (leaving the other similar elements alone). • This is done by putting the name of the element just in front of the period and then the class name: All span elements with class q2 span.q2 {font-size:large;} p.r3 {color:green;} All p elements with class r3

CSS Class Selector • Several Classes can be combined together with a rule to select only elements that have those classes listed by separating them with periods (.): .q2.j4 {font-family:Verdana, Geneva, sans-serif;} --> </style> Applies to <span> that is part of both q2 and j4 class

Full EmbeddedStyle and Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Lecture2Classes</title> <style type="text/css">  </style> </head> <body> <div class="p1"> <h2 class="q2">Class Times</h2> <p class="r3"> Classes are timetabled every Friday from <span class="q2 j4">9.15</span> to <span class="q2 j4">2.05</span> in MG122</p> </div> </body> </html>

Browser Display .p1 {background-color:silver;} .q2 {color:blue;} .r3 {font-family:"Comic Sans MS", cursive;} span.q2 {font-size:large;} p.r3 {color:green;} .q2.j4 {font-family:Verdana, Geneva, sans-serif;}

HTMLID Attribute • The HTML attribute “id” is similar to the “class” attribute – it can be set on nearly any tag and can be used as a CSS selector – but it is much more restricted. • Only 1 tag on a page can have a given id; • It must be unique within the page and is used to identify just that element. • An id’s attribute value has to begin with a letter and can be followed by letters, numbers, periods, underlines, hyphens, or colons; however if it is being used as a selector in CSS, it is safest to stick to just letters and numbers. • Note: Case matters, so be consistent in the case of your id attributes. <p id="bigf"> This whole paragraph need to have a big font</p>

CSSid Selector • In CSS, an “id” selector is indicated by a # (hash) before the value of the id. i.e. <style type="text/css">  </style>

SelectorsUniversal • In addition to type, class and id selectors, CSS also defines a universal selector. The universal selector applies to all tags and content within a page and is represented by an asterisk (*). <style type="text/css">  </style>

SelectorsDescendant • One of the most useful ways to group selectors together is to use a descendant selector. • A descendant, in HTML and XML, is an element that is completely contained within another element’s content.

Movie Review Example <html> <head> <title>Babe: Best Movie EVER</title> <style type="text/css"> /* add style rules here */ </style> </head> <body> <div class="header"> <h1>Movie Review: <cite>Babe</cite></h1> <p>A Mini-Review by Joe H. Moviefan</p> </div> <div class="opinion"> <h2>The Best Movie <em>EVER</em></h2> <p>The movie <cite>Babe</cite> was the best family movie ever produced! This great movie featured talking animals, a cantankerous old man, and subtle-yet-Oscar-winning special effects -- who could ask for more? The clever writing and humorous touches make this all-ages movie great for children while still very enjoyable by adults. What a great movie!</p> </div> <div class="footer"> <p>What did you think? Mail me at <a href="mailto:joe@example.com">Joe H. Moviefan.com!</a> </p> </div> </body> </html> <h2> is a descendant of the <div> <cite>is a descendatnof the <h1>and <cite> is also descendant of the <div> (its contained within the two) All of them are also descendants of the <body>

SelectorsDescendants • Descendant selectors define rules based on where a given tag appears within the page by combining together simple selectors, separated by spaces. • p cite {color:white; background-color: black;} • This rule changes the color of all <cite> tags contained within paragraphs. • The order in which the tags are listed in the style rule is important, the outside tag must be written first. Also note that the <cite> inside <h1> is not styled by this rule, only the <cite> inside the <p> element.

SelectorsDescendants • It is also important to keep in mind that a descendant selector means any descendant, not just an immediate child. This enables you to make rules that apply to any descendant element, no matter how deeply it’s nested. • You can also combine section styles (set via class and <div>) with element-based type selectors, as well; for example the following code changes the font face and colours of <p> tags within the header section, but leaves the rest of the header alone, as well as the other paragraph tags that aren’t contained by something with the .header class: • .header p {font-family:verdana, sans-serill; color:white; background-color:black;}

Pseudo Classes • A pseudo-class selector is a selector based on a set of predefined qualities that an HTML element can possess. These qualities function in practice similar to a class attribute on the element. • No actual class attribute exist in the markup that correspond to these pseudo-classes; instead, they represent some aspect of the element to which they are applied, or even the state of the browser’s user interface relative to that element.

Pseudo Classes • The pseudo-classes in CSS are:

Pseudo Classes • Pseudo classes can’t stand alone in a style rule, as classes can, but most commonly they are used with elements as a tupe selector: • :link {color:red;} • a:link{color:red;} • Both of these rules are valid, the former applies to any element that happens to be a link, whereas the latter rule covers only <a> tags. • Note that in HTML only the <a> elements are links, so the rules mean the same thing

Pseudo Classes • Pseudo classes can be combined with real classes or even other pseudo-classes putting them together with no spaces between, just the . and : indicators • Example: • <a href=“search.html” class=“nav”>Search the site</a> • <a href=“http://maps.google.comclass=“offsite”>Google Maps</a> • CSS: • a:link.nav {color:cyan;} • a.offset:link {color:green;}

Pseudo Elements • CSS defines four pseudo-elements - virtual elements created from their content in the document in relationship to a base element.

Pseudo Elements:first-line & :first-letter • :first-line and :first-letter select portions of another element, and these portions operate as if they were separate inline elements; • However, only certain properties can be applied to these pseudo elements:

Pseudo Elements:first-line & :first-letter

Example <html> <head> <title>Fortune of Reversal</title> <link type="text/css" rel="stylesheet" href="story-5.6.css"> </head> <body> <h1 id="storytitle">Fortune of Reversal</h1> <div class="storybody"> <p>They dined on heaping platters of Szechuan chicken, of spicy beef, of shrimp and vegetables in some exotic dish without a name. Bits of food were passed from chopsticks to chopsticks, violating all known laws of Chinese cuisine etiquette. The tea flowed hot and fast that night, until the meal finally concluded itself.</p> <p>"Thank you for dining here tonight," said the badgeless, anonymous waitress. She placed a small tray containing the check and two wrapped fortune cookies on the edge of the table, and hefted the empty plates one by one, forming a stack on the crook of her elbow.</p> <p>"Absolutely delicious," declared Oliver as he pulled a card from his wallet and flicked it onto the bill. He picked up the two cookies, an afterthought. "Fortune cookie, my love?" he asked Amanda.</p> </div> </body> </html>

Example - CSS #storytitle { font-family: Verdana; } .storybody p { font-family: Arial; } .storybodyp:first-line {background-color:silver;} .storybodyp:first-letter { font-size:xx-large; color:white; background-color:black; font-family:Verdana; }

ExampleBrowser

CSS Box Model • The content of a web page is the information encoded within the HTML page, found between the opening and closing tags of the HTML markup. • These tags define the structure of the content, a framework that gives meaning to the content; however, the presentation of the content is not defined by the HTML; instead, it is determined by CSS rules. • The browser has default rules for <p> and <strong> tags, which say that a <p> tag is shown visually as a paragraph on lines of its own, with leading and trailing space, and that the <strong> is shown as bold text within that paragraph. • Both tags are shown as display boxes, which is how CSS browsers deal with HTML. Each HTML element corresponds to a box, although not all elements are shown on the screen. A display box is a rectangular shape on the screen that can contain text content, images, form controls, or other display boxes.

CSS Box Model • The exact method by which HTML elements are shown as CSS display boxes is called the visual formatting method. It tells the browser how they should show HTML content on the screen. • The visual formatting model, markup elements are classified into two basic types: block and inline. The type of each HTML element is set by the HTML specification (for example <p> tags are block elements while <em> tags are inline elements). The type of a specific element can be changed with CSS, however, this often won’t be necessary; also, certain properties can be set only for block or inline elements.

CSS Box Model • Block: A block element is one that is intended to be displayed as a distinct block of content, starting and ending with a new line. (examples of block elements are: <p>, <div>, <blockquote>, <table>, <br />, <ol>, and the <h1> to <h6> tags. • Inline:Aninline element doesn’t begin and end lines; instead, it is contained within the flow of the text. Examples of inline tags include <em>, <span>,<b>,<img>,<input>, and <a>. • Inline elements flow one after another in a line, with no line breaks, horizontally across the page until the end of the available space is used up; then they just continue where they left off on the next line down.

CSS Box Model • The way to change a type of an element is by using the display property. This property can take several values, however, for now we are only interested in the values: block and inline. Setting the display property of an element changes the type of that element to the specified type.

The Box ModelDocuments as trees • Every web page is actually a tree of tags and content. These type of trees are the same kind of data structures used in computer science. • A tree is a way of representing information in a hierarchy of elements. • The top element, called the root will be the <html> tag • The <html> tag has two children: <head> and <body>; each of these children have children on their own. • Each part of the tree is called a node. A node is either an element or some text.

The Box ModelDocuments as trees <html> <head> <title>Trees</title> </head> <body> <h1>Trees, by <i>Joyce Kilmer</i></h1> <p> I think that I shall never see <br /> A poem as lovely as a tree. </p> </body> </html>

The Box ModelDocuments as Trees

Documents as Boxes • After an HTML document has been defined as a data tree, it can then be visually interpreted as a series of boxes • This is probably the easier way for web developers to think of a page • You can think of these boxes as containers that hold other boxes or that hold text values

COM621 – Interactive Web Development