lecture2 css 2
TRANSCRIPT
SFDV2001 Lecture 12, Semester, Year
Lecture 2:
CSS II
SFDV2001Web Development
SFDV2001 Lecture 12, Semester, Year
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
SFDV2001 Lecture 12, Semester, Year
Image source: http://www.hicksdesign.co.uk/boxmodel/
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
SFDV2001 Lecture 12, Semester, Year
IE 5 (Mac)
Safari
Firefox
SFDV2001 Lecture 12, Semester, Year
Source: http://en.wikipedia.org/wiki/Image:Box-model-bug.png
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
Selectors
Recap:
selector{
property: value;}
There are many different kinds of selectors:– Standard element selectors– Contextual selectors– Class selectors– ID selectors– Pseudoselectors
SFDV2001 Lecture 12, Semester, Year
Element selectors
H1{
color: #456678;
}
You can group selectors:
H1, p, li{
color: #456678;
}
You can affect any element using the universal (*) selector.
SFDV2001 Lecture 12, Semester, Year
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;
}
SFDV2001 Lecture 12, Semester, Year
Contextual Selectors
Child Selectors
Similar to descendant selectors but it target only a direct child of an element:
p > em{
color: #456678;
}
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
Class and ID selectors
IDs take care of unique structural elements:
Class is used for elements that are used multiple times :
Heading
Navigation
Footer
SFDV2001 Lecture 12, Semester, Year
SFDV2001 Lecture 12, Semester, Year
Class and ID selectors
In your style sheet:
Class
p.question{
color: navy;
}
Or
.question{
color: navy;
}
SFDV2001 Lecture 12, Semester, Year
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;
}
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
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
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
Pseudoselectors - Anchors
a:link{
text-decoration: none;...
}a:visited{color:#555555;...
}a:hover{text-decoration: underline;
}a:active{color:#f6dc3b; ...
}
SFDV2001 Lecture 12, Semester, Year
Pseudoselectors - Anchors
Anchor pseudoselectors should appear in your CSS in the order:
a a:linka:visiteda:hovera:active
If you don't, they may not function as they should.
Putting :link last for example would override the :hover and :active states.
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
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.
SFDV2001 Lecture 12, Semester, Year
SFDV2001 Lecture 12, Semester, Year
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;
SFDV2001 Lecture 12, Semester, Year
SFDV2001 Lecture 12, Semester, Year
SFDV2001 Lecture 12, Semester, Year
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