1 / 11

Creating Consistent Styles with External CSS | Step-by-Step Guide

Learn how to apply an external style sheet to maintain a unified look across your website. Define styles in a separate file and link them to all pages. Follow detailed instructions for creating, linking, and commenting on style rules. Ideal for beginners.

nolcha
Télécharger la présentation

Creating Consistent Styles with External CSS | Step-by-Step Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Applying Style

  2. Creating an External Style Sheet • Ideal for giving all the pages on your Web site a common look • Define all your styles in an external style sheet and then tell each page on your site to consult the external sheet, thus ensuring will have the same settings • Create a new text document in your text editor of choice • Define as many style rules as desired • Save as .css

  3. Linking External Style Sheets • In the head section of each (X)HTML page in which you wish to use the style sheet • Type href=“url.css”

  4. .html <head> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”/> <title>Internal Style Sheet</title> <link rel=“stylesheet” type=“text/css” href=“base.css” /> </head> <body> <img src=“sunset.jpg” alt=“sunset” width=“200” height=“150” align=“left”/> <p> sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset </p> </body>

  5. base.css img { color:red; border:solid; }

  6. Creating Internal Style Sheet • Let you set the styles at the top of the (X)HTML document to which they should be applied

  7. <head> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”/> <title>Internal Style Sheet</title> <style type=“text/css”> img { color:red; border:solid; } </style> </head> <body> <img src=“sunset.jpg” alt=“sunset” width=“200” height=“150” align=“left”/> <p> sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset </p> </body>

  8. Applying Styles Locally • For small scale • Safe way to begin

  9. <body> <img src=“sunset.jpg” alt=“sunset” width=“200” height=“150” <style=“color:red; border:solid”> align=“left” /> <p> sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset, sunset </p> </body>

  10. Adding comment to Style Rules /*Images will have a solid red border */ img { color:red; border:solid; }

  11. next

More Related