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
Unlocking...