Introduction to CSS

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

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:

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

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

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

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

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

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

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");}

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.

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

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)

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

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

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 = (10x2) + (5x2) = 330px

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;  }

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; }

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

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; }

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)

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

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

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; }

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

Case Study  Example page

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