Css introduction
1 like1,067 views
This document discusses Cascading Style Sheets (CSS) and how to use CSS to style HTML elements. It covers CSS syntax, comments, ID and class selectors, and the three methods of inserting CSS - external style sheets, internal style sheets, and inline styles. It also discusses cascading order, grouping selectors, nesting selectors, and provides a reference link for further CSS information.
Css introduction
- 2. Cascading Style Sheets = CSS CSS for Web Designer by Niciuzza, nicha.in.th
- 3. CSS Syntax CSS for Web Designer by Niciuzza, nicha.in.th
- 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. 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. 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. Three way to insert CSS CSS for Web Designer by Niciuzza, nicha.in.th External Style Sheet1. Internal Style Sheet2. Inline Style3.
- 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. 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. 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. 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. 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. 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. References CSS for Web Designer by Niciuzza, nicha.in.th ● http://www.w3schools.com/css/