- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
css
Apply
In-line: <p style="color: red">text</p>
Embedded, or internal styles:
<html> <head> <title>CSS Example</title>
<style type="text/css">
p { color: red;} a { color: blue;}
</style>
External (in file.css)
<html> <head> <title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="file.css" />
Selectors, Properties, and Values
ex | |
|
selecteur font-size, color: properties values: 0.8em navy |
em (ex font-size: 2em
) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
px (such as font-size: 12px
) is the unit for pixels.
pt (such as font-size: 12pt
) is the unit for points.
% (such as font-size: 80%
) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
Margins et Padding
The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Margin box
Border box
Padding box
Element box
Borders
To make a border around an element, all you need is border-style
. The values can be solid
, dotted
, dashed
, double
, groove
, ridge
, inset
and outset
.
border-width
sets the width of the border, which is usually in pixels. There are also properties for border-top-width
, border-right-width
, border-bottom-width
and border-left-width
.
Finally, border-color
sets the colour.
Ex: http://htmldog.com/examples/borders.html
Span and Div, attributes class & id
attributes class
and id
to associate the element with a class or id CSS selector (.class-select for x elements oo #id-select for 1 single element)
file.css
#top { background-color: #ccc;} .intro {color: red;
}
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever }
will only be applied to paragraph elements that have the class 'jam'.
All attributes must also be lowercase and their values in quotation marks.
Grouping and nesting
don't | do |
---|---|
|
|
Nesting: spaces/espace - specify properties to selectors within other selectors
ex css | ex html |
---|---|
|
|
Pseudo classes
-
link
is for an unvisited link. -
visited
is for a link to a page that has already been visited. -
active
is for a link when it is gains focus (for example, when it is clicked on). -
hover
is for a link when the cursor is held over it.
As pseudo classes (other than hover
) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.