Download to read offline
Uploaded byDr. Jasmine Beulah Gnanadurai
CSS - Cascading Style Sheet
This document provides an overview of CSS (Cascading Style Sheets) including what CSS is, how to write CSS style rules, and the different ways to add CSS styles to a webpage. CSS is a styling language that tells browsers how to display elements on a webpage by allowing the setting of properties like color, font, margins etc. Style rules are written with a selector that specifies the HTML element and a declaration with a property and value to set the style. Styles can be added inline within an HTML element, internally within <style> tags in the head, or externally in a separate .css file linked via <link>.
More Related Content
Similar to CSS - Cascading Style Sheet
More from Dr. Jasmine Beulah Gnanadurai
CSS - Cascading Style Sheet
- 1. CSS: Cascading Style Sheet Dr.G.JasmineBeulah Assistant Professor, Kristu Jayanti College, Bengaluru
- 2. Web Workshop: CSS Web: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage
- 3. What is CSS?(1) What is CSS? CSS stands for “Cascading Style Sheets” Cascading: refers to the procedure that determines which style will apply to a certain section, if you have more than one style rule.
- 4. What is CSS?(2) What is CSS? CSS stands for “Cascading Style Sheets” Style: how you want a certain part of your page to look. You can set things like color, margins, font, etc for things like tables, paragraphs, and headings.
- 5. What is CSS?(3) What is CSS? CSS stands for “Cascading Style Sheets” Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage will look.
- 6. What is CSS?(4) What is CSS? So, CSS (all together) is a styling language – a set of rules to tell browsers how your webpage should look.
- 7. What is “Style”? Whatis “Style” “Style” is a command that you set to tell the browser how a certain section of your webpage should look. You can use style on many HTML “elements” (like <p> <h1> <table> etc)
- 8. How to writestyle rules (1) How to write style rules Two parts: (1) selector and (2) declaration. Selector: the HTML element you want to add style to. <p> <h1> <table> etc Declaration: the statement of style for that element. Made up of property and value.
- 9. How to writestyle rules (2) How to write style rules Selector {declaration;} Declaration = {property: value;} Property: what aspect you want to change ex: color, font, margins, etc. Value: the exact setting for that aspect. ex: red, italic, 40px, etc.
- 10. How to writestyle rules (2) How to write style rules selector {property: value;} Essentially means: The thing I want to change {the aspect of that thing I want to change: what I want it to be;}
- 11. How to writestyle rules (3) How to write style rules Selector {property: value;} h1 {color: red;} Means: Speaking of my heading1, I want the text color to be red.
- 12. How to writestyle rules (3) How to write style rules Selector {property: value;} I want the color of the text in my paragraph to be yellow. p {color: yellow;} This is the text in this paragraph.
- 13. How to writestyle rules (4) How to write style rules Selector {property: value;} h1 {color: blue; background-color: green;} Means: Speaking of my heading1, I want the text color to be blue and the background color to be green.
- 14. How to writestyle rules (4) How to write style rules Selector {property: value;} I want the text color of my link to be red and the background color to be yellow. a {color: red; background-color: yellow;} This is my link
- 15. Three types ofstyle Where do I put my style rules? There are three types of style-rule-places that we will cover: - Inlined - Internal Style Sheet - External Style Sheet
- 16. <html> <head><title>My Wonderful Example</title> </head> <body> <p>Whatwas I thinking?</p> </body> </html> a) Inlined example-1 Original html code
- 17. a) Inlined example-2 <body> <pstyle=“text-align: center; font- weight: bold; color: yellow;”>What was I thinking?</p> </body> What was I thinking?
- 18. <head><title>My Wonderful Example</title> <styletype=“text/css”> body { text-align: left; font-family: trebuchet, verdana;} </style> </head> b) Internal-1
- 19. b) Internal-2 <head><title>My WonderfulExample</title> <style type=“text/css”> body { text-align: left; font-family: Trebuchet, verdana; } </style> </head>
- 20. Internal: Statement ofstyle <style type=“text/css”> … </style> this is a style sheet (style type) written (text) in css (CSS) language
- 21. Internal: Brackets &Declaration <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana; } </style> I want the “align text” property to be given the value of “left”
- 22. c) External <html> <head><title>My Way</title> <linkrel="stylesheet" href="http://www2.hawaii.edu/~myway. css" type="text/css“> </head> <body> </body> </html> Link to a separate css page