Multimedia Information Systems VO/KU (706.052/706.053)
HTML and CSS Best Practices
Denis Helic
IICM, TU Graz
CSS Statements (1)
selector {
property1:value;
property2:value;
property3:value;
}
CSS Statements (2)
p {
margin:5px;
font-family:arial;
color:blue;
}
Grouping Selectors
h1 {color:red}
p {color:red}
h1, p {color:red}
Advanced Selectors (1)
- Universal selectors: universal selectors can be used to select every element on the page.
- Attribute selectors: as their name suggests, attribute selectors allow you to select elements based on their attributes.
- Child selectors: if you want to select specific elements that are children of other specific elements, use this selector.
Advanced Selectors (2)
- Descendent selectors: if you want to select specific elements that are descendents of other specific elements (not just direct children, but further down in the tree as well), you can use this selector type.
- Adjacent sibling selectors: if you want to select just specific elements that follow other specific elements, use these selectors.
- Pseudo-classes: these allow you to style elements based not on what the elements are, but on more esoteric factors such as the states of links (eg if they are being hovered over, or have been visited already).
- Pseudo-elements: these allow you to style specific parts of elements, rather than the whole element (eg the first letter within that element); they also allow you to insert content before or after specific elements.
Universal Selectors
* {
border: 1px solid #000000;
}
Attribute Selectors (1)
img[alt] {
border: 1px solid #000000;
}
Attribute Selectors (2)
img[src="alert.gif"] {
border: 1px solid #000000;
}
Child selectors
h3 > strong {
color: blue;
}
Descendent selectors
div em {
...
}
Adjacent sibling selectors
h2 + p {
...
}
Pseudo Class Selectors
:link —the normal, default state of links, just as you first found them.:visited —links that you have already visited in the browser you are currently using.:focus —links (or form fields, or anything else) that currently have the keyboard cursor within them.:hover —links that are currently being hovered over by the mouse pointer.:active —a link that is currently being clicked on.
Pseudo-element selectors
p:first-letter {
font-weight: bold;
font-size: 300%
background-color: red;
}