1 / 22

Web Workshop: CSS

Web Workshop: CSS. Web Workshop: CSS. Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage. What is CSS? (1). What is CSS?. CSS stands for “Cascading Style Sheets”

uttara
Download Presentation

Web Workshop: CSS

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. Web Workshop: CSS Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. What is “Style”? What is “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)

  7. How to write style 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.

  8. How to write style 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.

  9. How to write style 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;}

  10. How to write style rules (3) How to write style rules Selector {property: value;} h1 {color: red;} Means: I want the text color of my heading1 to be red.

  11. How to write style rules (3) How to write style rules Selector {property: value;} I want the color of the text in my paragraph to be yellow. {color: yellow;} p This is the text in this paragraph.

  12. How to write style rules (4) How to write style rules Selector {property: value;} h1 {color: blue; background-color: green;} Means: I want the text color of my heading1 to be blue and the background color to be green.

  13. How to write style 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

  14. Three types of style 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

  15. <html> <head><title>My Wonderful Example</title> </head> <body> <p>What was I thinking?</p> </body> </html> a) Inlined example-1 Original html code

  16. <body> <pstyle=“text-align: center; font- weight: bold; color: yellow;”>What was I thinking?</p> </body> What was I thinking? a) Inlined example-2

  17. b) Internal-1 <head><title>My Wonderful Example</title> <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana;} </style> </head>

  18. b) Internal-2 <head><title>My Wonderful Example</title> <style type=“text/css”> body { text-align: left; font-family: Trebuchet, verdana; } </style> </head>

  19. <style type=“text/css”> … </style> Internal: Statement of style this is a style sheet (style type) written (text) in css (CSS) language

  20. <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana; } </style> Internal:Brackets & Declaration I want the “align text” property to be given the value of “left”

  21. <html> <head><title>My Way</title> <link rel="stylesheet" href="http://www2.hawaii.edu/~myway. css" type="text/css“> </head> <body> </body> </html> c) External Link to a separate css page

  22. The end of Basic CSS On to the exercises!

More Related