PA 70c – Giordon Stark

PA 70c – Giordon Stark CSS: Styles and Syntax

Table of Contents • Review of Last Time • Introduction to CSS • History of CSS • What is CSS • Theory of CSS • Terminology • Selectors and Rules • Inline Style Sheets versus Internal/External Style Sheets • The “CSS” Recipe • Block Level and Inline Elements • Let’s learn some CSS! • Background, Text, Font, Lists, Links, Tables • Practice Sessions • Recreation and Adaptation: Getting rid of formatting tags

A Review of Last Time Because not everyone has perfect memory recall.

History of HTML • Tim Berners-Lee: 1989-1991 • Proposed an “internet-based hypertext system” • Developed a markup known as “HTML Tags” • Mosaic (browser) • Relatively simply structure based on SGMLguid, widely used at CERN at the time • Later implemented Document Type Definition to distinguish between XML, SGML, and HTML using a set of predefined delcarations

What is HTML • Stands for HyperTextMarkup Language • Not a programming language, a markup language • A set of markup tags • Markup Tags are often called HTML Tags • HTML tells the browser how to display the page

What makes a good layout? • What other benefits are associated with good layouts? • Speed (at which a page loads) • Interactivity with user • Accessibility • Usability • Simplicity • Intelligent Design • Valid Code, Semantically Correct Code, and using CSS will give you a good start • http://www.joomlashack.com/tutorials/159-usability-accessibility-web-standards-and-seo

What’s next? • We have the foundation to tell browsers • What our page contains • What data blocks are involved in our document structure • What our Document Object Model is • In other words: we have a blank canvas with pencil marks • What do we need? • The paint

Introduction to CSS Why do we need CSS? What is its purpose? What is CSS?

History of CSS • http://virtuelvis.com/archives/2005/01/css-history • http://www.w3.org/Style/LieBos2e/history/ • Most of the major movements with style sheet languages occurred around 1994, though date is not very concrete. • 9 different types of CSS were proposed! • As of 1998, the W3C maintains the “text/css” Internet Media Type (MIME Type) • MIME Types can be thought of as a declaration of the content type that follows • The history is fairly interesting in the recent years • http://articles.sitepoint.com/article/the-problem-with-css-is

History of CSS • The IE5 Box Model • http://reference.sitepoint.com/css/ie5boxmodel • The current Box Model:

The Box Model Problem • The DTD tells the browser to run in “strict” (or “standards”) mode and not “quirks” mode • http://www.w3.org/QA/2002/04/valid-dtd-list.html • Declaring doctypes is the current “solution” to what I call the Box Model problem (or “Browsers War Era”) • http://www.quirksmode.org/css/quirksmode.html • W3C: “The total width of an element should always be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin.” http://w3schools.com/css/css_boxmodel.asp

The CSS “Recipe” • Examples of doc types: • HTML 4.01 Strict/Traditional/Frameset • XHTML 1.0 Strict/Tradition/Frameset • MathML 2.0 • For the purpose of this class, we’ll declare the HTML5 doctypeat the top of all pages we make: <!DOCTYPE html5>

What is CSS Stands for Cascading Style Sheets Not a programming language, a makeup language CSS tells the browser how to style the page Separates content from layout – this makes it easier to maintain multiple styles for a page

CSS Advantages Restyle a website from one place in your code Re-use the style on any new website you create Redefine HTML Tags Develop more advanced layouts that would otherwise be impossible or inefficient with just HTML markup Disadvantages: 5% of browsers still do not recognize CSS, about 20% of browsers are using depreciated box models

Why is CSS Important? • HTML was never intended to contain tags for formatting elements • In the words of W3C: • “When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.”

Theory of CSS What is a selector? How is CSS structured? How do you include CSS Files?

Terminology • Rule • Contains the selector and one or more declarations • Selector • A group of styles – creates the link between the element and rules to apply • 3 types: HTML Tag Selector, Class Selector, ID Selector • Declaration • A property and value pair, uses the format “property:value;” • W3C:

Terminology • Comments • Use the format /* comment */ • Can span multiple lines • Tag Selector • References all HTML elements by its tag name • No prefix • Class Selector • References all HTML elements by the value of its class attribute • Prefix the period (.) symbol • ID Selector • References all HTML elements by the value of its id attribute • Prefix the pound (#) symbol

The CSS “Recipe” Following a cookbook to give us delicious eye-candy (web pages)

The CSS “Recipe” • Internal CSS <style type="text/css"> /* CSS here */ </style> • Inline CSS (use sparingly, if at all!) <tag1 style=“” /> • External CSS • File Type: .css • No necessary ‘wrappers’ • <link rel="stylesheet" type="text/css" href="mystyle.css" />

Internal and External CSS What does a CSS Rule look like? [sel1], [sel2], … { property:value; . . . }

Selectors • Tag Selectors – Multiple Elements hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} • Class Selectors – Multiple Elements .headline {font-family:arial; font-size:14px; color:red} • HTML: <b class="headline">stuff</b> <i class="headline">other stuff</i> • ID Selectors – Singular Element #layer1 {position:absolute; left:100;top:100; z-Index:0} • HTML: <div id="layer1">stuff</div>

Selectors • Assigning multiple selectors to the same rule: .headline, #menu {font-family:arial; font-size:14px; color:red} • HTML: <b class="headline">stuff</b> <a id=“menu”>Some Link</a> • “Nested” (or grouped) Selectors div.headline {font-family:arial; font-size:14px; color:red} • HTML: <div class="headline">stuff</div> <b class=“headline”>other stuff</b>

Selectors • Further Example of Nested Selector div.headline #menu {font-family:arial; font-size:14px; color:red} • HTML: <div class="headline"><a id=“menu”>Menu Link</a></div> <div><a id=“menu”>Another Menu Link</a></div> • Grouping/Nesting helps minimize coding which leads to pages that load faster.

Selectors • As an example of efficiency: .headlines {font-family:arial; color:black; background:yellow; font-size:14pt; }.sublines {font-family:arial; color:black; background:yellow; font-size:12pt; }.infotext {font-family:arial; color:black; background:yellow; font-size:10pt; } • We can agree that this doesn’t seem very efficient and repetitive

Selectors • We can fix this by grouping! .headlines, .sublines, .infotext {font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;} • This takes up less ‘space’ and is easier to read

Summary of Selectors As a review, try this on for size, what does this select? i b, .headlines, b .sublines {font-size:16px;}

Summary of Selectors • As a review, try this on for size, what does this select? i b, .headlines, b .sublines {font-size:16px;} • Bold elements enclosed by Italic tags • <i><b>…</b></i>

Summary of Selectors • As a review, try this on for size, what does this select? i b, .headlines, b .sublines {font-size:16px;} • Bold elements enclosed by Italic tags • <i><b>…</b></i> • All elements with the ‘headlines’ class • <a class=“headlines”>…</a> • <div class=“headlines”>…</div>

Summary of Selectors • As a review, try this on for size, what does this select? i b, .headlines, b .sublines {font-size:16px;} • Bold elements enclosed by Italic tags • <i><b>…</b></i> • All elements with the ‘headlines’ class • <a class=“headlines”>…</a> • <div class=“headlines”>…</div> • All elements with the ‘headlines’ class enclosed by bold tags • <b><a class=“headlines”>…</a></b> • Note: b.sublines would reference bold elements with the ‘sublines’ class

Inline CSS • Don’t do it! It needs to be emphasized that this is a very, very inefficient method and you should never have a valid reason to use inline styles… otherwise, your logic sucks. They also encounter more problems than the other methods (example from Tizag): <p style="background: url("yellow_rock.gif");">This is broken</p> <p style="background: url(yellow_rock.gif);">This is workin'</p>

Multiple Style Sheets + Cascading • Styles are specified • inside an HTML element • inside the head section of an HTML page • in an external CSS file • When you have multiple style sheets for one page, including both internal, external, and inline; CSS cascades all the rules into one singular rule. • The hierarchy is (from highest priority to lowest) • Inline Style • Internal Style Sheet • External Style Sheet • Browser Default • An example: http://w3schools.com/css/css_howto.asp

HTML Elements The Blocks and the Inlines

Inline Elements versus Block Elements • Block level elements include • Heading • Division • Paragraph • Blockquote • Ordered and Unordered Lists • Inline elements include • Span • Anchor • Bold, Italic, Underline, etcetera.

The Clean Slates • Have you ever thought that it would make sense to have a ‘blank slate’ html tag that had absolutely zero styles? • For Block Level elements: division tag. • <div></div> • For Inline elements: span tag. • <span></span>

Block Level and Inline Elements • Block Level elements display text on its own line (line breaks before and after) – my definition of ‘layout’ elements • Rules • Block Level elements can contain other block-level elements and inline elements • Inline elements cannot contain block-level elements • Bad Example <div> <a href=“#”><h1><span>Heading</span></h1></a> </div> • Fixed Example <div> <h1><a href=“#”><span>Heading</span></a></h1> </div>

Block Level and Inline Elements • In CSS • Inline elements are used for changing • Colors (background and text) • Font styles (font weight, text decoration, font family, etc..) • Block level elements are used for changing • Positioning declarations (locational) • Dimensional declarations (width and height) • Padding and Margins • Major Differences • Block elements take 100% of available width (of their parent element) • Takes whatever height it needs to fill its content

Let’s Learn Some CSS Drink from the fountain of knowledge!

CSS - Backgrounds • Relevant Properties • background-color • {color-name, color-rgb, color-hex, transparent,inherit} • name - a color name, like "red" • RGB - an RGB value, like "rgb(255,0,0)" • Hex - a hex value, like "#ff00000 • background-image • {url(URL), none, inherit} • background-repeat • {repeat-x, repeat-y, no-repeat, inherit} • background-attachment • {scroll, fixed, inherit} • background-position • {x y} • Can be declared using pixels, percentage of total page width, or a pair of {left, top, center, bottom, right} • In-Class Exercise 1: Solid Color • In-Class Exercise 2: Tiled Image (Gradient)

CSS - Text • Relevant Properties • color • {color-name, color-rgb, color-hex, transparent,inherit} • direction • {ltr, rtl} • text-align • {left, right, center, justify} • text-decoration • {none, underline, overline, line-through, blink} • text-transform • {none, capitalize, uppercase, lowercase} • text-indent • {length} • Length can be set in terms of pixels, or percentage • vertical-align (use sparingly) • {baseline, sub, super, top, text-top, middle, bottom, text-bottom, length} • So Many Different Values! Link for explanation of differences

CSS - Font • Relevant Properties • font-family • {family} • Web-Safe List: Link • font-style • {normal, italic} • font-size • Default is 16 pixels = 1 em, Conversion(pixels/16 = em) • Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. • Set it in pixels = absolute size, set it in em = relative size • http://www.bigbaer.com/css_tutorials/css_font_size.htm • font-weight • {100, 200, 300, 400, 500, 600, 700, 800, 900}

CSS - Links • Relevant Selectors • a:link • a normal, unvisited link • a:visited • a link the user has visited • a:hover • a link when the user mouses over it • a:active • a link the moment it is clicked

CSS - Lists • Relevant Properties • list-style-type • Varies based on whether we use ordered or unordered lists • list-style-image • Use a custom image as item marker • For an enumeration of the various values plus a fix for the list-style image, see the following link • http://w3schools.com/css/css_list.asp

CSS - Tables • Relevant Properties • border • {size style color} • http://w3schools.com/css/pr_border.asp • border-collapse • {collapse} • Tables often have “double borders” since a table data cell has a different border than a table header/footer. This ‘fixes’ it. • width and height • text-align and vertical-align • padding • {top, right, bottom, left} • This is set clockwise (padding-top, padding-right, padding-bottom, padding-left). • color and background-color • Note, there is no “cellspacing” property.

Summary • For a quick reference to other properties and their values, just use w3schools website: • Categorized (in particular, look at pseudo-elements) • http://www.w3schools.com/cssref/default.asp • For a list of supported units • http://www.w3schools.com/cssref/css_units.asp • For a (short) list of colors • http://www.w3schools.com/cssref/css_colors.asp • For a list of selectors • http://www.w3schools.com/cssref/css_selectors.asp • When in doubt, Google is your friend.

Practice Session #1 Why is Firebug so awesome? How DO it Do It Voodoo?

Practice Session #2 Making formatting tags useless!

The HTML Form • We showed you this last week for those who came to the homework help on Tuesday • In its basic entirety, we’ve provided the bones and skin of the HTML form – along with an inclusion of an external stylesheet • Your mission: • Using external stylesheets (loaded within the header of the page) – design a form that looks drastically different from its basic layout • You can use any of the CSS properties to your liking that deal with styles such as background, border, margin, padding, font, text, list-style

The HTML Form • Your mission: • Using external stylesheets (loaded within the header of the page) – design a form that looks drastically different from its basic layout • You can use any of the CSS properties to your liking that deal with styles such as background, border, margin, padding, font, text, list-style • What do? • First – think of a general color scheme you’d like for everything and Google ‘color hex codes’ for specific values • Then, decide your spacing (margins and borders), widths • Then your borders, font styles • And finally, your actions such as <selector>:hover/::selection/:focus

PA 70c – Giordon Stark