Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cascading Style Sheets CSS
Introduction to CSS <ul><li>CSS stands for Cascading Style Sheets  </li></ul><ul><li>A style language that defines layout ...
The benefits of CSS <ul><li>control layout of many documents from one single style sheet;  </li></ul><ul><li>more precise ...
CSS Basic Syntax selector  { property :  value }  the HTML element/tag you wish to define  the attribute you wish to chang...
CSS Example Codes <ul><li>body {color: black}  </li></ul><ul><li>p {text-align:center;color:red} </li></ul><ul><li>p  </li...
Applying CSS to an HTML Document <ul><li>Inline Styles – you only use a style to the single instance of an HTML tag </li><...
Inline Style <ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li><title>Example</title>  </li></ul><ul><li></head>...
Internal Style <ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li><title>Example</title>  </li></ul><ul><li><styl...
External Style <ul><li>style.css </li></ul><ul><li>body  </li></ul><ul><li>{  </li></ul><ul><li>background-color: #FF0000;...
Upcoming SlideShare
Loading in …5
×

CSS

CSS

  • Be the first to comment

CSS

  1. 1. Cascading Style Sheets CSS
  2. 2. Introduction to CSS <ul><li>CSS stands for Cascading Style Sheets </li></ul><ul><li>A style language that defines layout of HTML documents </li></ul><ul><li>CSS is supported by all browsers today </li></ul>
  3. 3. The benefits of CSS <ul><li>control layout of many documents from one single style sheet; </li></ul><ul><li>more precise control of layout; </li></ul><ul><li>apply different layout to different media-types (screen, print, etc.); </li></ul><ul><li>numerous advanced and sophisticated techniques. </li></ul>
  4. 4. CSS Basic Syntax selector { property : value } the HTML element/tag you wish to define the attribute you wish to change the value of the property
  5. 5. CSS Example Codes <ul><li>body {color: black} </li></ul><ul><li>p {text-align:center;color:red} </li></ul><ul><li>p </li></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>text-align: center; </li></ul></ul><ul><ul><li>color: black; </li></ul></ul><ul><ul><li>font-family: arial </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>h1,h2,h3,h4,h5,h6 { color: green } </li></ul><ul><li>p.right {text-align: right} </li></ul>
  6. 6. Applying CSS to an HTML Document <ul><li>Inline Styles – you only use a style to the single instance of an HTML tag </li></ul><ul><li>Internal Style - you define internal styles in the head section by using the <style> tag </li></ul><ul><li>External Style - you can change the look of an entire Web site by changing one file </li></ul>
  7. 7. Inline Style <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Example</title> </li></ul><ul><li></head> </li></ul><ul><li><body style=&quot;background-color: #FF0000;&quot;> <p>This is a red page</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. Internal Style <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Example</title> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>body {background-color: #FF0000;} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>This is a red page</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  9. 9. External Style <ul><li>style.css </li></ul><ul><li>body </li></ul><ul><li>{ </li></ul><ul><li>background-color: #FF0000; </li></ul><ul><li>} </li></ul>HTML Document <html> <head> <title>My document</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head> <body> <h1>My first stylesheet</h1> </body> </html>

    Be the first to comment

    Login to see the comments

  • maxymiliano

    Mar. 3, 2008
  • OnlyBlue

    Mar. 31, 2008
  • staley412

    Jun. 14, 2008

CSS

Views

Total views

4,681

On Slideshare

0

From embeds

0

Number of embeds

1,147

Actions

Downloads

247

Shares

0

Comments

0

Likes

3

×