Css introduction

846 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
846
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css introduction

  1. 1. CSS Introduction by Niciuzza, nicha.in.th
  2. 2. Cascading Style Sheets = CSS CSS for Web Designer by Niciuzza, nicha.in.th
  3. 3. CSS Syntax CSS for Web Designer by Niciuzza, nicha.in.th
  4. 4. CSS Comments CSS for Web Designer by Niciuzza, nicha.in.th A CSS comment begins with "/*", and ends with "*/" /*This is a comment*/ p{ text-align:center; /*This is another comment*/ color:black; font-family:arial; }
  5. 5. CSS ID CSS for Web Designer by Niciuzza, nicha.in.th ● The id selector is used to specify a style for a single, unique element. ● The id selector uses the id attribute of the HTML element, and is defined with a "#". ● The style rule below will be applied to the element with id="para1" #para1{ text-align:center; color:red; } <div id=”para1”></div> style.css index.htm
  6. 6. CSS CLASS CSS for Web Designer by Niciuzza, nicha.in.th ● The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector can used on several elements. ● The class selector uses the HTML class attribute, and is defined with a "." ● Call the class in HTML element with class="center" .center{ text-align:center; } <p class=”center”></p> style.css index.htm
  7. 7. Three way to insert CSS CSS for Web Designer by Niciuzza, nicha.in.th External Style Sheet1. Internal Style Sheet2. Inline Style3.
  8. 8. External Style Sheet CSS for Web Designer by Niciuzza, nicha.in.th hr {color:sienna;} p {margin-left:20px;} body { background-image:url ("images/back40.gif"); } <head> <link rel="stylesheet" type="text/css" href="style. css"> </head> <body> … </body> style.css index.htm
  9. 9. Internal Style Sheet CSS for Web Designer by Niciuzza, nicha.in.th <head> <style> hr {color:sienna;} p {margin-left:20px;} body{ background-image:url("images/back40.gif"); } </style> </head> index.htm
  10. 10. Inline Style CSS for Web Designer by Niciuzza, nicha.in.th <p style="color:sienna;margin-left:20px"> This is a paragraph. </p> index.htm
  11. 11. Cascaded Order CSS for Web Designer by Niciuzza, nicha.in.th Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element) LOW PRIORITY HIGH PRIORITY
  12. 12. Grouping Selectors CSS for Web Designer by Niciuzza, nicha.in.th h1{ color:green; } h2{ color:green; } p{ color:green; } h1, h2, p{ color:green; }
  13. 13. Nesting Selectors CSS for Web Designer by Niciuzza, nicha.in.th <p>This paragraph has blue text, and is center aligned.</p> <div class="marked"> <p>This paragraph has not blue text.</p> </div> <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p> p{ color:blue; text-align:center; } .marked{ background-color:red; } .marked p{ color:white; }
  14. 14. References CSS for Web Designer by Niciuzza, nicha.in.th ● http://www.w3schools.com/css/

×