1Computer Sciences Department

And use

Cascading Style Sheets CSS

 Introduction to CSS  Cascading Style Sheets  Benefits of using CSS  Levels of Style Sheets  CSS Syntax  Properties  CSS3 Objectives

 The CSS1 specification was developed in 1996  CSS2 was released in 1998  CSS3 is the latest standard for CSS and is completely backwards-compatible with earlier versions of CSS  CSSs provide the means to control and change presentation of HTML documents (control the style and layout of multiple Web pages all at once).  CSS is not technically HTML, but can be embedded in HTML documents  Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents  Style is specified for a tag by the values of its properties Computer Sciences Department5 Introduction

 CSS stands for Cascading Style Sheets  CSS defines how HTML elements are to be displayed  Styles were added to HTML 4.0 to solve a problem  CSS saves a lot of work  External Style Sheets are stored in CSS files Computer Sciences Department6 What is CSS?

 HTML was NEVER intended to contain tags for formatting a document.  HTML was intended to define the content of a document, like:  This is a heading  This is a paragraph.  When tags like, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.  To solve this problem, the World Wide Web Consortium (W3C) created CSS.  In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file. Computer Sciences Department7 CSS Solved a Big Problem

 The style definitions are normally saved in external.css files.  With an external style sheet file, you can change the look of an entire Web site by changing just one file! Computer Sciences Department8 CSS Saves a Lot of Work!

 There are three levels of style sheets Inline - specified for a specific occurrence of a tag and apply only to that tag – This is fine-grain style, which defeats the purpose of style sheets - uniform style Document-level style sheets - apply to the whole document in which they appear External style sheets - can be applied to any number of documents  When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence  In a sense, the browser searches for a style property spec, starting with inline, until it finds one (or there isn’t one) Computer Sciences Department9 Levels of Style Sheets

 There are three ways of inserting a style sheet:  Inline style  Internal style sheet  External style sheet Computer Sciences Department10 Three Ways to Insert CSS

 - To use inline styles, add the style attribute to the relevant tag. - The style attribute can contain any CSS property. Computer Sciences Department11 Inline Styles

 An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the tag, like this: Computer Sciences Department12 Internal Style Sheet

Computer Sciences Department13

Computer Sciences Department14 CSS Syntax

 CSS selectors allow you to select and manipulate HTML elements.  CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. Computer Sciences Department15 CSS Selectors

 The element selector selects elements based on the element name.  All elements can be selected on a page like this: (all elements will be center-aligned, with a red text color) Computer Sciences Department16 The element Selector

 The id selector uses the id attribute of an HTML element to select a specific element.  An id should be unique within a page, so the id selector is used if you want to select a single, unique element.  To select an element with a specific id, write a hash character, followed by the id of the element. Computer Sciences Department17 The id Selector

 The class selector selects elements with a specific class attribute.  To select elements with a specific class, write a period character, followed by the name of the class.  You can also specify that only specific HTML elements should be affected by a class. Computer Sciences Department18 The class Selector Red and center-aligned heading Red and center-aligned paragraph.

Computer Sciences Department19 Try Grouping Selectors

 There are 60 different properties in 7 categories:  Backgrounds  Alignment of text  Fonts  Lists  Margins  Colors  Borders Computer Sciences Department20 Properties

 Keywords - left, small, …  Not case sensitive  Length - numbers, maybe with decimal points  Units:  px - pixels  in - inches  cm - centimeters  mm - millimeters  pt - points  pc - picas (12 points)  em - height of the letter ‘m’  ex-height - height of the letter ‘x’  No space is allowed between the number and the unit specification e.g., 1.5 in is illegal! Computer Sciences Department21 Property Values

 The background-color property specifies the background color of an element.  With CSS, a color is most often specified by:  a HEX value - like "#ff0000"  an RGB value - like "rgb(255,0,0)"  a color name - like "red“  The background-image property specifies an image to use as the background of an element.  background-repeat  background-attachment  background-position Computer Sciences Department22 CSS Background

Computer Sciences Department23

Computer Sciences Department24

Computer Sciences Department25 Text Alignment

Computer Sciences Department26 Text Decoration The text-decoration property is mostly used to remove or add underlines from links for design purposes

 The text-transform property is used to specify uppercase and lowercase letters in a text.  It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word  The text-indent property is used to specify the indentation of the first line of a text. Computer Sciences Department27 Text Transformation and Indentation

Computer Sciences Department28 CSS font

 Font Family: P {font-family: "Times New Roman", Times, serif;}  Font Style:  Font Size  Set Font Size With Em: font-size: 2.5em; /* 40px/16=2.5em */ (To allow users to resize the text. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em)  Use a Combination of Percent and Em: font-size: 100%; Computer Sciences Department29 Font Properties

 Links can be styled with any CSS property (e.g. color, font- family, background, etc.).  Links can be styled differently depending on what state they are in.  The four links states are:  a:link - a normal, unvisited link  a:visited - a link the user has visited  a:hover - a link when the user mouses over it  a:active - a link the moment it is clicked  A pseudo-class is used to define a special state of an element  Example Example Computer Sciences Department30 Styling Links and CSS Pseudo-classes

 In the following example, the selector matches the first element in all elements Computer Sciences Department31 Match the first element in all elements first-linefirst-line and first-letterfirst-letter

 The CSS list properties allow you to:  Set different list item markers for ordered lists  Set different list item markers for unordered lists  Set an image as the list item marker  In HTML, there are two types of lists:  unordered lists ( ) - the list items are marked with bullets  ordered lists ( ) - the list items are marked with numbers or letters  With CSS, lists can be styled further, and images can be used as the list item marker. For exampleFor example  List - Example List - Example Computer Sciences Department32 CSS Lists

Computer Sciences Department33

Computer Sciences Department34

 Table Borders: table, th, td { border: 1px solid black;}  Table Width and Height: table {width: 100%;}  Horizontal Text Alignment “left, right, or center”: th {text-align: left;}  Vertical Text Alignment ” top, bottom, or middle”: td { height: 50px; vertical-align: bottom;}  Table Padding  Table Color  table, td, th { border: 1px solid green; } th { background-color: green; color: white; } td { padding: 15px; } Computer Sciences Department35 CSS Tables

Computer Sciences Department36 CSS Box Model

Computer Sciences Department37

Computer Sciences Department38

 The margin clears an area around an element (outside the border).  The margin does not have a background color, and is completely transparent.  The top, right, bottom, and left margin can be changed independently using separate properties.  A shorthand margin property can also be used, to change all margins at once.  Example Example Computer Sciences Department39 Margin

 The display property specifies if/how an element is displayed.  The visibility property specifies if an element should be visible or hidden.  visibility: hidden; hides an element, but it will still take up the same space.  display: none; element will be hidden, and the page will be displayed as if the element is not there  li {display:inline;} displays elements as inline elements. Computer Sciences Department40 CSS Display and Visibility

 The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.  There are four different positioning methods:  Static Positioning: HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. “are not affected by the top, bottom, left, and right properties”  Fixed Positioning: An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled  Relative Positioning: A relative positioned element is positioned relative to its normal position  Absolute Positioning: An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is. Computer Sciences Department41 CSS Positioning

 The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).  An element with a larger z-index generally covers an element with a lower one Computer Sciences Department42

Computer Sciences Department43

 With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.  Float is often used with images, but it is also useful when working with layouts Computer Sciences Department44 CSS Float

 Navigation Bar = List of Links  Home News Contact About  Horizontal Navigation Bar: li {display: inline;} Computer Sciences Department45 CSS Navigation Bar

 Creating transparent images with CSS is easy.  The CSS opacity property is a part of the CSS3 recommendation  The CSS3 property for transparency is opacity  IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from A lower value makes the element more transparent.  IE8 and earlier use filter:alpha(opacity=x). The x can take a value from A lower value makes the element more transparent.  Example Example Computer Sciences Department46 CSS Image Opacity / Transparency

Css3 Computer Sciences Department47

 CSS3 allows you to format your elements using 3D transforms.  The 3D transform methods:  rotateX()  rotateY()  More More Computer Sciences Department48 CSS3 3D Transforms

 An animation lets an element gradually change from one style to another.  You can change as many properties you want, as many times you want.  You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).  0% represents the start of the animation, 100% is when the animation is complete.  When an animation is created in rule, you must bind it to a selector, otherwise the animation will have no effect.  Bind the animation to a selector (element) by specifying at least these two properties:  the name of the animation  the duration of the animation  more more Computer Sciences Department49 CSS3 Animations