css: styles and syntax pa 70c – giordon stark. table of contents review of last time introduction...
Post on 21-Dec-2015
226 views
TRANSCRIPT
CSS: STYLES AND SYNTAX
PA 70c – Giordon Stark
Table of Contents
Review of Last TimeIntroduction 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
BECAUSE NOT EVERYONE HAS PERFECT MEMORY RECALL.
A Review of Last Time
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 HyperText Markup LanguageNot 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-acc
essibility-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
WHY DO WE NEED CSS?WHAT IS ITS PURPOSE?
WHAT IS CSS?
Introduction to CSS
History of CSS
http://virtuelvis.com/archives/2005/01/css-historyhttp://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 followsThe 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 doctype at the top of all pages we make:<!DOCTYPE html5>
What is CSS
Stands for Cascading Style SheetsNot a programming language, a makeup
languageCSS tells the browser how to style the pageSeparates content from layout – this makes it
easier to maintain multiple styles for a page
CSS Advantages
Restyle a website from one place in your codeRe-use the style on any new website you createRedefine HTML TagsDevelop 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.”
WHAT IS A SELECTOR?HOW IS CSS STRUCTURED?
HOW DO YOU INCLUDE CSS FILES?
Theory of CSS
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
SelectorDeclaration
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
FOLLOWING A COOKBOOK TO GIVE US DELICIOUS EYE -CANDY (WEB PAGES)
The CSS “Recipe”
The CSS “Recipe”
Internal CSS<style type="text/css">
/* CSS here */</style>Inline CSS (use sparingly, if at all!)<tag1 style=“<!--declarations here -->” />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 Elementshr {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) Selectorsdiv.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 Selectordiv.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
THE BLOCKS AND THE INLINES
HTML Elements
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
DRINK FROM THE FOUNTAIN OF KNOWLEDGE!
Let’s Learn Some CSS
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.
WHY IS FIREBUG SO AWESOME?HOW DO IT DO IT VOODOO?
Practice Session #1
MAKING FORMATTING TAGS USELESS!
Practice Session #2
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