1. Introduction to CSS

2. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External style sheets allow separation of page format and style  It is possible for entire web sites to be redesigned without modifying HTML code by simply changing CSS

3. CSS Syntax  A CSS rule is composed of two basic parts  A selector  One or more declarations  The selector is the element or combination of elements to be styled  Declarations consist of a property and a value Image and content courtesy: http://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/css_syntax.asp

4. CSS Example h1 { color:#f00; text-align: left; }  CSS declarations always end with a semicolon  Declaration groups are surrounded by curly brackets

5. Id and Class selectors  Id Selector  Used to specify a style for a single unique element  The id value of the element is used preceded by the # symbol to make up the selector expression #introduction { color : #000; font-weight: bold; } This is some introduction text

6. Id and Class selectors cont’d  Class selector  Typically used by more than one element  Since it is not unique the class selector can be used to style a group of elements  The class value of an element is used preceded by the. (dot) symbol to make up the selector expression.quote{ text-align : right; font-style:italic; } If debugging is the process of removing bugs then programming is the process of putting them in~ Edsger Dijkstra

7. Examples p.highlight { background-color: #F4E3AA; } #introduction span, p#detail { color:#F00; } #main.detail { font-style: italic; }

8. Ways to include CSS on a page  External Style sheet  Internal Style sheet  Inline Style  Import

9. External Style sheet  External Style sheet  Separate external file containing css  Look and feel of site can be modified by changing only one file  Typically the link to the style sheet is included in the section of an html page

10. Internal Style sheet  Used when CSS is applied to only a single page  Style definitions are placed between the tags on a page  Cannot be reused on other pages hr {color:#888;} p {margin-left:20px;} body {background- image:url("images/back40.gif");}

11. Inline Styles  Mix content with presentation  Is not a reusable pattern so should be used very sparingly  Styles only apply specifically to the element they are placed on  A “style” attribute is used to define inline styles This is a paragraph.

12. CSS Import  @import is another way of loading an external css style  @import must come before all other content in CSS  @import has performance implications and is slower than other methods of applying styles @import url('/css/typography.css'); @import url('/css/layout.css'); @import url('/css/color.css');

13. Multiple style sheets  If properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet  Styles will “cascade” into a new virtual style sheet conforming to the following rules. 1 is the lowest priority and 4 is the highest priority 1. Browser default 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element)

14. CSS Box Model  All HTML elements can be considered as boxes  Can be thought of as a box that wraps around HTML elements consisting of  Margins  Borders  Padding  Content

15. CSS Box Model Margin – Clears area around the border. It is completely transparent and does not have a background color Border – Goes around padding and content. It is affected by the background color of the box Padding – Clears an area around the content. Padding is affected by the background color of the box Content – Content within the box where text and messages appear

16. Width and height of an element  When you set width and height in css, you only set the width and height of the content area  eg div.ad { width : 300px; height: 100 px; padding : 10px; border: 5px solid #0F0; }  To get the total width or height of an element you must also add the margins and borders  For the div above Total width = 300 + (10x2) + (5x2) = 330px

17. Styling backgrounds  Background color  Specifies the background color of an element  body { background-color:#7355DA;}  CSS colors can be  Hex value: #ffee44  RGB value: rgb(255,0,0)  Color name: red  Background image  body {background-image:url(‘main_back.jpg’);}  Background images can be repeated vertically or horizontally  body { background-image:url(‘main_back.jpg’);} background-repeat:repeat-x;  }

18. Background position  Background image position  This can be specified with the background- position property  body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

19. Background Shorthand property  A shortened form can be used to represent backgrounds body { background:#ffffff url('img_tree.png') no- repeat right top; }  When using the shorthand property the order of the property values is:  background-color  background-image  background-repeat  background-attachment  background-position

20. Styling text  Color  p { color:#f00;}  Text Alignment  p { text-align: right; }  Text Decoration  span.link { text-decoration: underline; }  Text Transformation  p.uppercase { text-transform: uppercase; }  p.lowercase {text-transform: lowercase; }  Text Indent  p {text-indent : 5px; }

21. Styling Fonts  In CSS, there are two types of font family names  generic family – A group of font families with a similar look (e.g. Serif or Monospace)  font-family – A specific font family (e.g. Arial, Verdana)

22. Styling Fonts  CSS Font Syntax  p {font-family: “Times New Roman”, Times, serif; }

23. Styling Fonts  Font Style  p.normal { font-style: normal;}  p.italic{ font-style: italic;}  Font Size  Absolute e.g. 10px;  Sets font to specific size  Does not allow user to change the text size in a browser. Bad for accessibility  Relative eg 1.2 em  Sets size relative to surrounding elements  Allows user to change font size  Default font size is 1em or 16px

24. CSS Grouping  Allows you to provide the same style to a group of elements  Elements or selectors are comma separated  e.g.  h1,h2,p { color:#897944; }

25. CSS Nesting  You can specify certain conditions for styles to be inherited  This is good if you can accurately predict the structure of your markup  Look at the following example p { color:blue; text-align:center;}.marked { background-color:red; }.marked p { color:white;} When a p occurs after a.marked element, its color will be white

26. Case Study  Example page

27. Exercise  Create the markup and CSS which will display the following output