Cascading Style Sheets Creating a Uniform Site

Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate the need to type the same code attributes over and over.  There are three types: Inline Embedded Linked (external)

Inline  Not Recommended  These are just placed in a regular html file to define your attributes using the style attribute, as follows style=“n”  For example, to change the text for a single paragraph to a red, italicized font, you would change the tag to read  Notice the syntax between the quotes. Each element you want to change is separated with a semi-colon.

Embedded  Told you we’d use the head section later  Use in the head section  For example: p {color: navy; font-weight: bold; font size: 12pt;}  Notice that the element itself is no longer in brackets. The attributes are, but the bracket has changed. Find these brackets { } on your keyboard.  This would format your paragraphs for navy in color, bold and 12 point in size for your ENTIRE page.

Creating an embedded style sheet  Let’s say you have three different types of paragraphs you might want to display. You can do this with an embedded style sheet by classifying each paragraph. (You can also do this with a linked or external style sheet.)  Put the style code in a previously created website that has paragraphs and try it out.  You will also need to define paragraphs throughout your webpage as normal, thick and thicker. p.normal {font-weight: normal} p.thick {font-weight: bold; color: green;} p.thicker {font-weight: 900}  This is a paragraph

External or Linked SS  An external style sheet is used to control multiple pages in your website.  For example, if you want all your paragraphs to be navy, bold, 12 point, on every page of your website, you would use an external style sheet.  An external style sheet is a separate document.  You refer all your pages to that page using the link element.  The page will be a PLAIN TEXT FILE not an HTML file.

Creating an External Style Sheet  You will create the style sheet in notepad and save it as a plain text file. (mystyle.css)  Key the following in the document. body {background color=”silver} h3 {color=”white”; font size=”24pt;} p {color=”green”; font family=”arial”; border style=”double”; border color=”red”}  This creates the style sheet you will link to.  All H3s in HTML pages will be white and 24pt.  All paragraphs will be green arial with a double red border.

Now, create the HTML page CSS Sample Page This is going to be a headline. Paste a paragraph of text here. This is another headline This is another paragraph of text. This is the third headline. Paste a third paragraph here.  Save the file as styleexample.html and view in your browser to see if the styles were applied to the paragraph and the heading.

Basic CSS Syntax  Using HTML we could have done it like this:  With CSS the same result can be achieved like this: body {background- color: FF0000;}