Lecture2 CSS 2

Lecture 2: CSS II SFDV2001 Web Development

The Box Model In CSS every element in your HTML file is contained within a rectangular box. There are four main components to this box: Content Margin Padding Border Additionally there a couple of background components: background colour background image

Image source: http://www.hicksdesign.co.uk/boxmodel/

The Box Model Margins are always transparent. Padding is the space between the content and the border. Background colour and/or image extend throughout the box model to the border. If a style of border used has gaps in it (e.g. dashed), the background shows through those gaps. The background of the parent element shows through the margin area of the box.

Width The width set for an element is the width of the content . Padding, border and margin are additional to this width. h1{ width: 300px; padding: 5px; border: solid 10px #ff69b4; margin: 10px; } Total width on page for this element = 350 pixels Unless your IE: IE implements the box model incorrectly.

Source: http://en.wikipedia.org/wiki/Image:Box-model-bug.png

Solutions There are hacks to combat many of the flaws in IE’s CSS rendering. Most exploit other IE bugs to provide workarounds. The Box Model hack (by Tantek Çelik) width: 350px; voice-family:”\”}\””; voice-family: inherit; width: 300px; IE doesn’t see the second width specification.

Selectors Recap: selector{ property: value; } There are many different kinds of selectors: Standard element selectors Contextual selectors Class selectors ID selectors Pseudoselectors

Element selectors H1{ color: #456678; } You can group selectors: H1, p, li{ color: #456678; } You can affect any element using the universal ( * ) selector.

Contextual Selectors Allow you to affect elements based on their context. That is, their relationship to other elements. Descendant selectors Elements that are contained within other elements: ul li{ color: #456678; } ul li a{ color: #456678; }

Contextual Selectors Child Selectors Similar to descendant selectors but it target only a direct child of an element: p > em{ color: #456678; }

Contextual Selectors Adjacent sibling selectors H1 + p{ margin-left: 5%; } Affects an element that comes immediately after another. In the above example the first paragraph after a top-level heading will be indented.

Class and ID selectors You can’t always style every element you want to with the standard selectors available and some times you need to make your own. There are two kinds of “custom-made” selectors: class and ID . Class is used for a style that you may wish to use multiple times in a single html file. ID is used for a style you wish to be unique in any one html file. You must set the class or ID in your HTML code.

Class and ID selectors IDs take care of unique structural elements: Class is used for elements that are used multiple times : Heading Navigation Footer

Class and ID selectors In your style sheet: Class p.question{ color: navy; } Or .question{ color: navy; }

Class and ID selectors In your style sheet: ID Div#footer{ border-top: solid 1px #555555; font-size: smaller; } Or #footer{ border-top: solid 1px #555555; font-size: smaller; }

Class and ID selectors Resist the temptation to make everything a class. Make sure your id and class names are descriptive. “navigation” is descriptive of the function of the selector rather than the style. “red” is descriptive of a style - styles change. If you can use a contextual selector or the like instead of a class or ID, do so.

Pseudoselectors Some things that you want to style in an html document are not possible to represent with standard element selectors because there is no element in your HTML document to represent them. Different link states - visited, unvisited etc. are good examples. Pseudoselectors enable you to identify these portions of elements. Pseudoselectors are identified in your CSS using a colon. a:link

Pseudoselectors - Anchors Pseudoselectors are most commonly used to influence different link states. a:link a:visited a:hover a:active In transitional code the equivalents are the link , vlink and alink attributes of body. In CSS you get an extra link state (hover) and you can influence any aspect of a links style, not just colour.

Pseudoselectors - Anchors a:link{ text-decoration: none; ... } a:visited{ color:#555555; ... } a:hover{ text-decoration: underline; } a:active{ color:#f6dc3b; ... }

Pseudoselectors - Anchors Anchor pseudoselectors should appear in your CSS in the order: a a:link a:visited a:hover a:active If you don't, they may not function as they should. Putting : link last for example would override the : hover and : active states.

Other pseudoselectors There are other pseudoselectors, but they aren't as commonly used as those associated with anchors because of poor browser support. :focus :first-child :first-line :first-letter :before :after :first-line and :first-letter are currently the only ones of this list that have any reasonable browser support.

Block-level and Inline elements In html there are block elements and inline elements. The distinction between the two is important for how they may be nested. You know from transitional code that <font> tags only validate when used inside <p> tags. This is because <font> is an inline element and <p> is a block level element. Block-level elements can contain other block-level elements and inline elements. Inline elements can only contain content and other inline elements.

Block-Level and Inline in CSS CSS allows you to explicitly state if an element is block-level or inline. BUT! These have nothing to do with the structure of your HTML and will not change the rules of validation. The notions of block-level and inline in CSS are presentation concepts only. display: block; display: inline;

Recommended sites: Hicks Design Box Model diagram: http://www.hicksdesign.co.uk/3dboxmodel/ Interactive Box Model diagram: http://www.redmelon.net/tstme/box_model/ W3C's Box Model description: http://www.w3.org/TR/REC-CSS2/box.html Tantek Çelik's Box Model hack: http://tantek.com/CSS/Examples/boxmodelhack.html Further reading: Web Design in a Nutshell, 3rd Edition by Jennifer Niederst Robbins

Lecture2 CSS 2

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Lecture2 CSS 2 (20)

More from Sur College of Applied Sciences (8)

Recently uploaded (20)

Lecture2 CSS 2

Editor's Notes