New version page

USF CS 110 - Introduction to CSS

Upgrade to remove ads

This preview shows page 1 out of 2 pages.

Save
View Full Document
Premium Document
Do you want full access? Go Premium and unlock all 2 pages.
Access to all documents
Download any document
Ad free experience

Upgrade to remove ads
Unformatted text preview:

Web Development: CSSIntroduction to CSSCSS with DreamweaverDefining the style for a single page:Creating a CSS file that can be applied to any web page:CS 110 Fall 2007Web Development: CSSIntroduction to CSSCSS -- Cascading Style SheetsProvides ability to easily change display parameters for an entire page or site, e.g., Change all headers in the entire site to a different font.Separates content from how its presented.An example of code reuse.CSS Try it SamplesTry the font and background samplesSample CSS style specification: <style type="text/css">body {background-color: blue }h1 {background-color: green}h2 {background-color: transparent}p {background-color: rgb(0,250,255)}p {font-family:"Courier New", Courier, monospace}</style>Format is basically:formatTag {attribute: value} CSS with Dreamweaver Defining the style for a single page: Within Dreamweaver, open a web page such as the home page you've created. Make sure it has a couple of headings in it (to do this, select some text, then choose Text | Paragraph Format | Heading 1 (or 2) Select the 'Split' tab so you can see both the WYSIWYG designer view and the HTML code view.In the code view, locate the <head> tag. There's probably a <title> specification within it.CS 110 Fall 2007Add the following <style> block as text between the <head> and </head> tags: <style type="text/css">body {background-color: blue }h1 {background-color: green}h2 {background-color: transparent}p {background-color: rgb(0,250,255)}</style>Does your page look different? Play around with setting the colors in the style tag to different values. Note that if you retype the colon (:) after 'background_color', the system will allow you to choose a color from a palette. You can also set plenty of style attributes other than background-color. Creating a CSS file that can be applied to any web page: Create a CSS file in Dreamweaver by selecting File | New | CSS.Paste the following text into the file(its the above style information without the style tags):body {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color: rgb(250,0,255)} Save this new CSS file (e.g., "mystyle.css") into your web directory W:/username. Open or select your web page again. Attach the styles defined in your CSS file by selecting Text | CSS Styles | Attach Style Sheet, and choosing the file you created.Note that the CSS file you created can now be applied to any web pages you create, and when you modify the CSS file, all pages will automatically be updated. Try the following:Create another page and enter some text and headings.Attach the same style sheet to it.Open a browser and look at your two pages. They should have the same "style".Go back to Dreamweaver and modify your CSS file (change a color or something). Then refresh your pages in the browser and see how they


View Full Document
Download Introduction to CSS
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Introduction to CSS and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Introduction to CSS 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?