CIS 133 mashup Javascript, jQuery and XML Introducing CSS CIS 133 mashup Javascript, jQuery and XML
Styles A style is a rule that defines the appearance of an element on a web page Cascading Style Sheet (CSS) is a series of rules Can alter appearance of page by changing characteristics such as font family, font size, margins, and link specifications Three ways to incorporate styles in a web page: Inline – add style as attribute in a tag - only changes that tag <h1 style=“text-align: center”>Chemistry Class</h1> Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in <head> tag, using a <style> tag <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> External(linked) - styles are stored in a separate text file having the extension .ccc. Then the file is “linked” to in web page
Syntax of a style font-family: Garamond; font-color: navy; No matter what format used, it must have a style statement <h1 style=“text-align: center”>Chemistry Class</h1> A style has a selector and an declaration Selector: identifies the page element(s) Declaration: identifies how the page element(s) should appear, and is comprised of two parts, The property to apply The value for the property Example: font-family: Garamond; font-color: navy;
Property Groups Most commonly used property groups are for inline elements, affecting text appearance (typeface, size, color, italics, bold, underline, upper/lower case) using properties like text-decoration, fonts, and boxes Block elements using properties like boxes affecting height, width, borders (colors, width) background color and images, as well as position in the browser window
Fonts Comprised of font families 5 generic Serif Sans-serif Monospace Cursive Fantasy Example of common font styling selectors: body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: blue }
Common declarations font (font-style font-variant font-weight font-size/line height font-family) font-variant used for small-caps font-family (two types): family-name - The name of a font-family, like "times", "courier", "arial", etc. generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace
Measurement Units pt, pc, and px are absolute measurements
Color Can use one of the 16 color names, RGB, hex Colors are captured using red, green and blue light
Common declarations Underlining Text-decoration:underline; Background colors and images Borders (border-width, border-style, and border-color)
Aural style sheets Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information. Aural presentation can be used: by blind people to help users learning to read to help users who have reading problems for home entertainment in the car by print-impaired communities The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).
Box Model Every element on a page is a rectangular box includes a height and width, and may consist of different margins, padding, and borders
Positioning position: positioning method used for an element (static, relative, absolute or fixed) Used with top and left properties For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its containing element. For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position. Same for left and right
Aligning Uses the float property take elements and float them right or left, positioning them directly next to or opposite each other Whenever an element is floated, it breaks the normal flow of a page and other elements will wrap around the floated one as necessary
Placement: Boxing properties are used for placement
Style sheet precedence Inline styles Used to change the style within an individual HTML tag <h1 style=“text-align: center”>Chemistry Class</h1> Overrides Internal and External style sheets Internal styles Used to change the style of one web page Uses the “id” or “class” attributes <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> Overrides External style sheets External styles Used to change the style of multiple pages in a web site All three can be co-mingled in a web page
Applying an Inline Style Defines style of an INDIVIDUAL tag Helpful when one section of a page needs to look different To use inline style Include the style attribute within the tag The style attribute is assigned to the declaration (property and value) The declaration is in quotes There can be more than one set of properties and values, each separated by a semi-colon EXAMPLES : <hr style=“height: 8px; background-color: #384738; width: 50%” /> <p style=“font-family: Arial, Helvetica; color: blue; text-decoration: none”>
In-line styling when there is no HTML tag <span></span> create a container which can be used to add an incline style Finer level of control than using <div></div> tags Example <span style=“color:red”> My dog has fleas! </span> My dog has <span style=“color:#020390”> fleas!</span>
Internal Styles Use the <style></style> tag within the <head></head> Controls the style of a single page Example <style type=“text/css”> <!-- h1 { font-family: Garamond; font-size: 32pt; } a { color: blue; text-decoration: none background: #020390; color: #01d3ff; --> </style> Note use of HTML comment tags
Pseudo-class styles Have more control over tags that have a “state” Attached to selector with a colon, to specify the state to use Format: selector:pseudo-class { style definition } Anchor tags (links), have 4 states Link – an unvisited link Visited – a link that has been visited Active – a link that gains focus (has been clicked) Hover –when the mouse is over it a:hover { background: #020390; color: #01d3ff; }
Working with IDs and Classes id attribute Used to identify ONE element only Syntax: id="text“ Example: <p id=“JoesName”> Joe Smith </p> class attribute Used to identify a GROUP of elements Syntax: class="text“ <span class=“redNames”> Joe Smith</span> has been the president for four years. His running mate <span class=“redNames”>Mary Jones</span> is running for office for the first time.
Classes Using classes is a two-step process Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: <span class=“redNames”>…. <p class=“redNames”>…. In the <style> tag, you define the class using a dot Example: <style type=“text/css”> .redNames { color:red } </style> Whatever the span tag and the paragraph tags contain, becomes red.
ID’s Using ID’s is a two-step process The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: <p id=“blueFont”>…. In the <style> tag, you define the ID using a hash tag Example: <style type=“text/css”> #blueFont { color:blue } </style> Whatever the paragraph tag contains, becomes red.
Web page structure tags and styles Using web page structure tags, can apply styles to entire section HTML 4 <DIV></DIV> tags <div id=“style1”> content </div> <div class=“style2”> content </div> HTML 5 <header></header> <section></section> <footer></footer> <style> # style1 { color:red}; .style2 {color:blue;} </style> <style> header{ color:red}; section {color:blue;} footer {color:green;} </style>
External styles EXAMPLE: Create a separate file to contain the styles (file extension .css, as in styles.css) Include in the <head> </head> section, a <link /> tag, which points to the external text file The external text file will ONLY have the styles defined – no other tags – just styles It will not even have the <style></style> tag EXAMPLE: <link rel=“stylesheet” type=“text/css” href=“styles.css” /> Then, INSIDE the text file named styles.css, only the selector, class, id’s and associated declarations appear, as in: a { color: blue; text-decoration: none } #blueFont {color:blue}
CSS – how cascading works More than one style sheet can be applied to a single page Need rules to determine style precedence Inline, embedded, external Highest to lowest specificity
Reference websites HTML tags and CSS properties: http://htmldog.com/reference http://www.w3schools.com/cssref/default.asp Color chart: http://www.computerhope.com/htmcolor.htm
Review What are the three types of styles? What is the precedence of each? What does the “id” attribute do in terms of a style? What does the “class” attribute do in terms of a style? When using the style tag, where does it go? What are the HTML 5 and tags that divide a page? What are the parts of a declaration? What are some of the measurement units? What are the two ways to represent color?