CSS TutorialtMyn1 CSS Tutorial Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with a structural markup language like HTML, CSS provide Internet browsers with the information that enables them to present all the visual aspects of a web document. CSS apply things like borders, spacing between paragraphs, headings or images, control of font faces or font colors, background color and images, textual effects like underlined or strike-through text,

CSS TutorialtMyn2 layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page’s design, whereas HTML control the structure of a web page, which means little more than determining that certain text is a heading, other text is a paragraph, still other text is a list of hyperlinks, and so on. By using modern standards like CSS, you can reduce the cost of building and maintaining a website when compared to legacy HTML-only pages.

CSS TutorialtMyn3 Let us consider the big picture first: 1. You type a www address into your browser 2. Browser contacts the HTTP server at that address 3. HTTP server receives the request from the browser 4. HTTP server looks up the web document 5. HTTP server sends the web document 6. Your browser receives the document 7. Your browser processes the source code 8. The browser displays the web page requested

CSS TutorialtMyn4 Look at step 7: If that server has sent an HTML document, your PC reads the source code of that document and processes it into a displayable web page. This is where CSS enters the picture. If CSS is present in the document, the CSS describes what the HTML page should look like to the browser. If the browser understands the CSS, it processes the web page into something you can see and interact with. If the browser only understands some of the CSS, it generally ignores what it doesn’t understand.

CSS TutorialtMyn5 If the browser doesn’t understand CSS at all, it usually displays a plain-looking version of the HTML document. During the time that CSS was being planned, browsers began allowing HTML features that control presentation of a document into the browser. This change is the primary reason for much of the bloated and chaotic source code in the majority of websites operating today on the Internet. Even though HTML was never supposed to be a presentational language, it grew to become one.

CSS TutorialtMyn6 Unfortunately, by the time CSS level 1 was made a full W3C recommendation in 1996, the seed had already been planted. Presentational HTML had already taken root in mainstream website design and continues today. However, all is not lost. Today, the most popular browsers have a working support for CSS.

CSS TutorialtMyn7 CSS have the following advantages: 1. The presentation of an entire website can be centralized to one or a handful of documents, enabling the look and feel of a website to be updated at a moment’s notice. In legacy HTML documents, the presentation was limited only to the document. CSS brings a much needed feature to HTML: the separation of a document’s structure from its presentation. 2. Users of a website can compose style sheets of their own, a feature which makes websites more accessible. For example, a user can compose a high- contrast style sheet that makes content easier to read.

CSS TutorialtMyn8 3. Browsers are beginning to support multiple style sheets, a feature which allows more than one design of a website to be presented at the same time. The user can simply select the look and feel that they like most. 4. Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. 5. Style sheets download much more quickly because web documents using CSS take up less hard disk space.

CSS TutorialtMyn9 Web pages can use styles in three different ways: Inline style: An inline style is a style that is placed directly inside an HTML tag. This can get messy, but it’s a reasonable approach for one-time formatting. You can remove the style and put it in a style sheet later. Internal style sheet: An internal style sheet is a collection of styles that are placed in the section of your web page markup. You can then use the styles from this style sheet to format the web controls on that page. By using internal style sheet, you get a clear separation between formatting (your styles) and your content (the rest of your HTML

CSS TutorialtMyn10 markup). You can also reuse the same style for multiple elements. External style sheet: An external style sheet is similar to an internal style sheet, except it is placed in a completely separate file. This is the most powerful approach, because it gives you a way to apply the same style rules to many pages.

CSS TutorialtMyn11 The following is an example of a CSS rule: h1{font-family: Arial, sans-serif;} Like HTML, CSS can use white space and line breaks for purposes of readability. The interpreter reading the CSS does not care how much white space appears in the style sheet. h1 in the example above refers to the tag in HTML document and is what is known as the selector, or more specifically type selector (there are several types of selectors defined).

CSS TutorialtMyn12 The selector is followed by a curly-brace-delimited list of one or more semicolon-separated declarations. A declaration is a property followed by a colon, followed by a value. Each declaration formats the element or elements specified in the selector list for presentation to web visitors.

CSS TutorialtMyn13 h1{font-family: Arial, sans-serif;} selector value property declaration CSS rule:

CSS TutorialtMyn14 Put simply, the selector tells the browser where and what to format. A selector may be user-specified via the class=“” or id=“” attributes, or it may simply be the HTML tag name itself. CSS also supports more complex selectors that function based on the context in which the target element appears in the document. Grouping selectors and declarations: p, h1, h2, h3, h4, h5 {font-family: Arial; color: black;}

CSS TutorialtMyn15 Does this look better?: p, h1, h2, h3, h4, h5 { font-family: Arial; color: black; } Declarations may also be grouped: body {font-family: Arial;} body {font-size: 10pt;} body {color: black;}

CSS TutorialtMyn16 The above is identical to this: body { font-family: Arial; font-size: 10pt; color: black; }

CSS TutorialtMyn17 A keyword value is used to invoke some special functionality. For example, red, green, and blue are CSS keywords: table {background-color: red;}

CSS TutorialtMyn18 Two kinds of lengths are used in CSS: relative and absolute. Absolute lengths are not dependent on any other measurement. Relative lengths, on the other hand, depend on the environment in which they are used, such as the computer monitor’s screen resolution or the size of a font. Absolute length units are for example cm, pt (point) and pc (pica). Relative length units are for example em (length relevant to the nearest font-size) and px (pixel).

CSS TutorialtMyn19 Colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign, for example black # (or rgb(0, 0, 0)) and white #FFFFFF (or rgb(255, 255, 255)). div {color: #000000;} div {color: rgb(0,0,0);}

CSS TutorialtMyn20 The universal selector tells the CSS interpreter to apply the CSS rule to the entire document: * {font-family: Arial;} Descendant selectors (contextual selectors) apply style based on whether one element is a descendant of another: div h1 {color: red;}

CSS TutorialtMyn21 The above example applies a color of red to elements, but only if somewhere in the document hierarchy the element appears inside a element.

CSS TutorialtMyn22 Class and ID selectors The class attribute is more generic, meaning it may encompass many elements in a given document, even elements of different types and purposes. On the other hand, you can only use the id attribute once per page. The name id tells that the id must be unique. The following is an example of a class selector:.someclass {color: red;} Notice the dot before the class name.

CSS TutorialtMyn23 In the document body, you reference the class like this: Some text here…

CSS TutorialtMyn24 To reference an id, you precede the selector syntax with a hash mark, id selector: #someid {color: black;} Any element in the document body may contain the id: Some text here…

CSS TutorialtMyn25 You can make both class and id selectors more specific by appending the name of the element to the beginning of the selector. For instance, if in the last examples you only want elements for each rule, the selectors look like the following: div.someclass {color: red;} div#someid {color: black;} Now each rule is applied only to elements that contain the corresponding class and id names.

CSS TutorialtMyn26 Pseudo-classes are used to represent dynamic events, a change in state, or a more general condition present in the document that is not easily accomplished through other means. This may be the user’s mouse rolling over or clicking on an element. Pseudo-classes contain a single colon before the pseudo-class property.

CSS TutorialtMyn27 Dynamic pseudo-classes are for example: :link : signifies unvisited hyperlinks :visited : indicates visited hyperlinks :hover : signifies an element that currently has the user’s mouse pointer hovering over it :active : signifies an element on which the user is currently clicking The order is important (as applied to links): LoVeHAte, or :link, :visited, :hover, :active.

CSS TutorialtMyn28 One implementation could be: boby{background: #ffffee; color: #000000;} a:link{color: #003366; background: transparent;} a:visited{color: #660099; background: transparent;} a:link:hover, a:visited:hover{color: #cc3333; background: transparent;} a:active{color: #ff0000; background: transparent;}

CSS TutorialtMyn29 Next example deals with external style sheet. External style sheet are included in a document from within HTML by use of the element: <link rel=“stylesheet” href=“path/to/myCssDoc.css” type=“text/css” The following attributes are required to use the element for linking to a CSS document:

CSS TutorialtMyn30 rel=“” : Defines the relation between the external document and the calling document. In this case, the relation is that the external document is the style sheet for the calling document. href=“” : Like the anchor tag,, href stands for hyperlink reference. It accepts an absolute or relative path to the style sheet document. type=“” : Refers to the MIME (Multipurpose Internet Mail Extensions) type of the external file.

CSS TutorialtMyn31

CSS TutorialtMyn32

CSS TutorialtMyn33

CSS TutorialtMyn34

CSS TutorialtMyn35

CSS TutorialtMyn36

CSS TutorialtMyn37 The validation service by the World Wide Web Consortium (W3C) allows Internet users to check CSS documents for conformance to CSS recommendations. Let us validate the file quantum2.css:

CSS TutorialtMyn38

CSS TutorialtMyn39

CSS TutorialtMyn40

CSS TutorialtMyn41 Next example deals with internal style sheet. An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the tag, like this: hr {color:sienna;} p {margin-left:20px;} body {background- image:url("images/back40.gif");}

CSS TutorialtMyn42 First there is no internal style sheet :

CSS TutorialtMyn43

CSS TutorialtMyn44

CSS TutorialtMyn45

CSS TutorialtMyn46

CSS TutorialtMyn47 Minor modification, internal style sheet included:

CSS TutorialtMyn48

CSS TutorialtMyn49

CSS TutorialtMyn50

CSS TutorialtMyn51

CSS TutorialtMyn52

CSS TutorialtMyn53

CSS TutorialtMyn54 The third alternative is inline style. An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: This is a paragraph.

CSS TutorialtMyn55 First there is no inline style:

CSS TutorialtMyn56

CSS TutorialtMyn57

CSS TutorialtMyn58

CSS TutorialtMyn59

CSS TutorialtMyn60 Minor modification, inline style included to one element:

CSS TutorialtMyn61

CSS TutorialtMyn62

CSS TutorialtMyn63

CSS TutorialtMyn64