Computer Applications II

 A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site) as opposed to changing every single page of the site individually.  It is the ‘skeleton’ of a web page that contains the minimum tags required to define and create a basic page.

 Used to define layout elements of a web page, much like a template. This allows the designer to define several attributes in a single place that are to be shared on pages throughout a site.  Less code to actually be typed, keeping sheets shorter and neater.  Appearance of site is more consistent.  Pages load faster and site accessibility is improved.  Editing and updating is faster and more efficient.

 Cascading Style Sheet (CSS) -- allows web page designers to attach style sheets containing specific information regarding the appearance of web pages, much like a template.  Internal style sheet – used for individual pages containing large amounts of text. The tag is placed inside the section of the HTML code. Attributes and tag properties are then listed inside curly braces { }.  External style sheet – used for numerous web pages that will make up a web site, requiring pages to have a consistent appearance. This is a separate text file, linked to web pages. An HTML tag is indicated, followed by tag properties in the same format as the internal style sheet. This page is then saved in a text-only format with a.css extension. The link can then be placed within the section of all pages to which the style attributes will apply.

 Browser Default  External Default  Internal Style Sheet (in the head section)  Inline Style (inside an HTML element)

 Three parts of syntax: ◦ Selector – HTML tag you wish to define ◦ Property – attribute you wish to change ◦ Value – each property can take a value  Example: ◦ Selector {property:value} ◦ body {color:black}

 If value is more than one word ◦ Put quotes around the value ◦ p {font-family:”sans serif”}  If more than one property is specified ◦ You must separate each property with a semicolon ◦ p {text-align:center;color:red}  Grouping selectors ◦ Separate each selector with a comma ◦ h1,h2,h3,h4,h5,h6 {color:green}

 Class Selector ◦ The class selector allows you to define different styles for the same type of HTML element ◦ p.right {text-align:right} ◦ p.center {text-align:center} ◦ This paragraph will be right- aligned ◦ This paragraph will be center- aligned  CSS Comments ◦ Comments are used to explain the HTML code-helps when code is edited later. Comments are ignored by browsers. ◦ /*This is a comment*/

 External ◦ Ideal when style is applied to many pages. Each page must link to the style sheet. CSS file does not contain HTML tags.  hr {color:sienna}  p {margin-left:20px}  body {background-image:url(“images/back40.gif”)}  Internal ◦ Used when a single document has a unique style.   hr {color:sienna}  p {margin-left:20px}  body {background-image:url(“images/back40.gif”)} 

 Inline Styles ◦ Use sparingly. Loses many of the advantages of style sheets.  This is a paragraph  Multiple Lines ◦ If multiple properties are set for the same selector in different style sheets-values will be inherited from the more specific sheet  External:  h3 {color:red;text-align:left;font-size:8pt}  Internal  h3 {text-align:right;font-size:20pt}  Properties for the h3 will be: color:red; text-align:right; font-size: 20pt

 Set by Name – specify a color name ◦ body {color:blue}  Set by RGB – specify an RGB value ◦ h2 {color:rgb(255,0,0)}  Set by HEX – specify a hex value ◦ h1 {color:#00ff00}

 Used to set horizontal alignment of text  Examples: ◦ h1 {text-align:center} ◦ p.date {text-align:right} ◦ p.main {text-align:justify}

 Used to set or remove decorations from text. Used primarily to remove underlines from links for design purposes  Examples: ◦ a {text-decoration:none} ◦ h2 {text-decoration:line-through}

 Used to specify uppercase and lowercase letters in text  Examples: ◦ p.uppercase {text-transform:uppercase} ◦ p.lowercase {text-transform:lowercase} ◦ p.capitalize {text-transform:capitalize}

 Used to specify indentation of first line of text  Examples: ◦ p {text-indent:50px}

 Family – Serif ◦ Have small lines at the ends on some characters ◦ Times New Roman, Georgia  Family – Sans Serif ◦ Fonts that do not have lines at the end of characters ◦ Arial, Verdana  Family – Monospaced ◦ All characters have the same width ◦ Courier New, Lucida Console  Setting Font Family ◦ Set with the font-family property. If font family is more than one word, use quotation marks. Specify several font names in case browser does not support first font ◦ p {font-family:”Times New Roman”,Georgia,Serif}

 Normal ◦ Text is shown normally ◦ p.normal {font-style:normal}  Italic ◦ Text is shown in italics (most common use of font- style property) ◦ p.italic {font-style:italic}  Oblique ◦ Text is leaning-similar to italic, but less ◦ p.oblique {font-style:oblique}

 Headings – Do not use font size adjustments to make paragraphs look like headings or headings look like paragraphs. Always use proper HTML tags, like -.  Absolute – Sets text to a specified size ◦ Does not allow a user to change text size in all browsers ◦ Useful when the physical size of the output is known  Relative – Sets the size relative to surrounding elements ◦ Allows a user to change the text size in browsers

 Set using Pixels ◦ Gives full control over the text size ◦ h1 {font-size:40px}  Set using EM ◦ Recommended by the W3C. 1em is equal to the current font size (default text size for browsers is 16px, so default of 1em is 16px) ◦ h1 {font-size:2.5em} /*40px/16=2.5em*/  Set using Combination of Percentage and EM ◦ Works in all browsers. Set a default font-size in % for body element ◦ body {font-size:100%} ◦ h1 {font-size:2.5em}