1 / 20

CSS Fundamentals: Syntax, Rules, Implementation, Properties

Learn about Cascading Style Sheets (CSS) syntax, rules, implementation, and properties. Understand different ways to apply CSS, including inline, internal, and external styles. Explore defined selectors, nesting, grouping, shorthand for colors, anchor pseudo-classes, margins, paddings, and borders. Enhance your web design skills with practical examples and tips.

marionrwilliams
Télécharger la présentation

CSS Fundamentals: Syntax, Rules, Implementation, Properties

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. Cascading Style Sheets WELCOME to the CSS session

  2. Cascading Style Sheets Who Am I? Affan Javed Co-op Fall 2004 Web Quality Assurance Assistance WebOps – Library University of Waterloo CSS: • Syntax • Rules • Implementation • Properties • Tips

  3. Cascading Style Sheets Applying CSS: There are three different ways to apply css to a web page. Inline Styles: Styles that are used as attributes within a tag. e.g. <p style="font-size: 90%;"> Internal (Embedded) Styles: Styles that are written within the <head> tag of a web page. External Styles: Styles that are contained in a file external to the web page, specified by a path.

  4. Cascading Style Sheets Syntax: selector { property: value;} selector: Default selectors: h1, p, a, img, … Defined selectors: content, footer, …

  5. Cascading Style Sheets Defined selectors: 2 types of defined selectors. • class class is used to identify more than one element. A class selector is a name preceded by a full stop(.) e.g. .indent • id id is used to identify only one element. An id selector is a name preceded by a hash character(#) e.g. #main

  6. Cascading Style Sheets Nesting: Nesting is a method in which you can specify properties to selectors within other selectors. e.g. the simple html document is itself an example of nesting because <head> & <body> tags are nested within <html> tag. If I want font size to be smaller in paragraphs only in the main area I would write it as: #main p {font-size: 90%;}

  7. Cascading Style Sheets Grouping: Grouping is a process in which the same properties are applied to a number of selectors separated by commas. e.g. p { padding: 2px;} h1 { padding: 2px;} .top { padding: 2px;} can be written as p, h1, .top { padding: 2px;}

  8. Cascading Style Sheets Comments: /* [comment #1] */ p { color: red; /* [comment #2] */ font: Arial 90%; } Source Formatting: Macromedia Dreamweaver

  9. Cascading Style Sheets Defined Regions: 2 commonly used defined regions: • div A block element. [starts on a new line with top & bottom spacing] • span An inline element. [starts in same line with no spacing]

  10. Cascading Style Sheets

  11. Cascading Style Sheets Shorthand for color: CSS provides 16,777,216 (256^3) colours. Only 16 colours are pre-defined: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Different ways: red = rgb(255,0,0) = rgb(100%,0%,0%) = #FF0000 = #F00 The shorthand is to write 6-digit colour in 3- digit version. e.g. #FF6655 = #F65

  12. Cascading Style Sheets

  13. Cascading Style Sheets Anchor pseudo-class: Unvisited link: a:link {color: #FF0000} Visited link: a:visited {color: #00FF00} Mouse over link: a:hover {color: #FF00FF} Selected link: a:active {color: #0000FF}

  14. Cascading Style Sheets

  15. Cascading Style Sheets margin & padding: Note: margins, paddings & borders are not included in the width and height of a region. e.g. a region 200 x 200 px is declared with a padding of 2px on each side. Thus, the total region would be 204 x 204 px. Different ways of declaring margin and padding: (top right bottom left) • padding: 10px; means the padding will be 10px on all four sides • padding: 10px 2px; means top and bottom padding will be 10px & left and right padding will be 2px

  16. Cascading Style Sheets margin & padding: • padding: 10px 2px 15px; means top padding will be 10px, left and right padding will be 2px & bottom padding will be 15px • padding: 10px 2px 15px 20px; means top padding will be 10px, right padding will be 2px, bottom padding will be 15px & left padding will be 20px

  17. Cascading Style Sheets border: Shorthand Property: border-width border-style border-color;

  18. Cascading Style Sheets

  19. Cascading Style Sheets http://www.lib.uwaterloo.ca/staff/co-op/tutorial/ Questions?

  20. Cascading Style Sheets THANKS for attending the session

More Related