Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1

Styles 2  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 Chemistry Class  Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in tag, using a tag Chemistry Class Chemistry Class  External(linked) - styles are stored in a separate text file having the extension.ccc. Then the file is “linked” to in web page

Style sheet precedence 3  Inline styles  Used to change the style within an individual HTML tag Chemistry Class  Overrides Internal and External style sheets  Internal styles  Used to change the style of one web page  Uses the “id” or “class” attributes Chemistry Class Chemistry Class  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

Syntax of a style 4  No matter what format used, it must have a style statement Chemistry Class  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;

Applying an Inline Style 5  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 :

In-line styling when there is no HTML tag 6  create a container which can be used to add an incline style  Finer level of control than using tags  Example My dog has fleas!

Internal Styles 7  Use the tag within the  Controls the style of a single page  Example <!-- h1 { font-family: Garamond; font-size: 32pt; } a { color: blue; text-decoration: none } a { background: #020390; color: #01d3ff; } --> Note use of HTML comment tags

Pseudo-class styles 8  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 9  id attribute  Used to identify ONE element only  Syntax: id="text“  Example: Joe Smith  class attribute  Used to identify a GROUP of elements  Syntax: class="text“  Example: Joe Smith has been the president for four years. His running mate Mary Jones is running for office for the first time.

Classes 10  Using classes is a two-step process 1. Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: …. …. 2. In the tag, you define the class using a dot Example:.redNames { color:red } Whatever the span tag and the paragraph tags contain, becomes red.

ID’s 11  Using ID’s is a two-step process 1. The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: …. 2. In the tag, you define the ID using a hash tag Example: #blueFont { color:blue } Whatever the paragraph tag contains, becomes red.

Web page structure tags and styles 12  Using web page structure tags, can apply styles to entire section  HTML 4  tags content  HTML 5  # style1 { color:red};.style2 {color:blue;} header { color:red}; section {color:blue;} footer {color:green;}

External styles 13  Create a separate file to contain the styles (file extension.css, as in styles.css)  Include in the section, a 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 tag  EXAMPLE:  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}

Fonts 14  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 }

Measurement Units 15 pt, pc, and px are absolute measurements

Color 16  Can use one of the 16 color names, RGB, hex  Colors are captured using red, green and blue light

Placement: Boxing properties are used for placement 17

CSS – how cascading works 18  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 19  HTML tags and CSS properties: Color chart: