Apprendre le CSS: cours, tutoriels, selecteurs, ...
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. (Wikipedia)
Nous vous proposons des sites qui vous apprennent et cela tout à fait gratuitement à maîtriser le langage CSS pour embellir vos pages xHTML - HTML. Le meilleur, est le plus officiel va-t-on dire, et celui de W3C. Il est très facile à comprendre. Le seul hic: c'est en anglais, mais je vous rassure, vous ne devez pas être un super doué en anglais pour comprendre.
Vous vous y connaissez déjà en CSS mais vous n'avez pas trop d'imagination? Rien de plus normal. Pour ceci, je vous propose de visiter ces sites qui réunissent les plus beaux sites made in CSS. Il y a des chefs d'oeuvres!
CSS DESIGNS
http://www.cssimport.com/
http://cssmania.com/
http://www.unmatchedstyle.com/
http://www.webcreme.com/
http://www.csselite.com/
Â
Voici tous les codes CSS possibles (source: W3C):
Â
PropertyDescriptionCSS
backgroundSets all the background properties in one declaration1
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page1
background-colorSets the background color of an element1
background-imageSets the background image for an element1
background-positionSets the starting position of a background image1
background-repeatSets how a background image will be repeated1
Border and Outline Properties
Â
PropertyDescriptionCSS
border Sets all the border properties in one declaration1
border-bottomSets all the bottom border properties in one declaration1
border-bottom-colorSets the color of the bottom border2
border-bottom-styleSets the style of the bottom border2
border-bottom-widthSets the width of the bottom border1
border-colorSets the color of the four borders1
border-leftSets all the left border properties in one declaration1
border-left-colorSets the color of the left border2
border-left-styleSets the style of the left border2
border-left-widthSets the width of the left border1
border-rightSets all the right border properties in one declaration1
border-right-colorSets the color of the right border2
border-right-styleSets the style of the right border2
border-right-widthSets the width of the right border1
border-styleSets the style of the four borders1
border-topSets all the top border properties in one declaration1
border-top-colorSets the color of the top border2
border-top-styleSets the style of the top border2
border-top-widthSets the width of the top border1
border-widthSets the width of the four borders1
outlineSets all the outline properties in one declaration2
outline-colorSets the color of an outline2
outline-styleSets the style of an outline2
outline-widthSets the width of an outline2
Dimension Properties
Â
PropertyDescriptionCSS
heightSets the height of an element1
max-heightSets the maximum height of an element2
max-widthSets the maximum width of an element2
min-heightSets the minimum height of an element2
min-widthSets the minimum width of an element2
widthSets the width of an element1
Font Properties
Â
PropertyDescriptionCSS
font
Sets all the font properties in one declaration1
font-family
Specifies the font family for text1
font-size
Specifies the font size of text1
font-style
Specifies the font style for text1
font-variant
Specifies whether or not a text should be displayed in a small-caps font1
font-weight
Specifies the weight of a font1
Generated Content Properties
Â
PropertyDescriptionCSS
contentUsed with the :before and :after pseudo-elements, to insert generated content2
counter-incrementIncrements one or more counters2
counter-resetCreates or resets one or more counters2
quotesSets the type of quotation marks for embedded quotations2
List Properties
Â
PropertyDescriptionCSS
list-styleSets all the properties for a list in one declaration1
list-style-imageSpecifies an image as the list-item marker1
list-style-positionSpecifies where to place the list-item marker1
list-style-typeSpecifies the type of list-item marker1
Margin Properties
Â
PropertyDescriptionCSS
marginSets all the margin properties in one declaration1
margin-bottomSets the bottom margin of an element1
margin-leftSets the left margin of an element1
margin-rightSets the right margin of an element1
margin-topSets the top margin of an element1
Padding Properties
Â
PropertyDescriptionCSS
paddingSets all the padding properties in one declaration1
padding-bottomSets the bottom padding of an element1
padding-leftSets the left padding of an element1
padding-rightSets the right padding of an element1
padding-topSets the top padding of an element1
Positioning Properties
Â
PropertyDescriptionCSS
bottomSets the bottom margin edge for a positioned box2
clearSpecifies which sides of an element where other floating elements are not allowed1
clipClips an absolutely positioned element2
cursorSpecifies the type of cursor to be displayed2
displaySpecifies the type of box an element should generate1
floatSpecifies whether or not a box should float1
leftSets the left margin edge for a positioned box2
overflow
Specifies what happens if content overflows an element's box2
positionSpecifies the type of positioning for an element2
rightSets the right margin edge for a positioned box2
topSets the top margin edge for a positioned box2
visibilitySpecifies whether or not an element is visible2
z-indexSets the stack order of an element2
Print Properties
Â
PropertyDescriptionCSS
orphansSets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element2
page-break-afterSets the page-breaking behavior after an element2
page-break-before Sets the page-breaking behavior before an element2
page-break-insideSets the page-breaking behavior inside an element2
widowsSets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element2
Table Properties
Â
PropertyDescriptionCSS
border-collapseSpecifies whether or not table borders should be collapsed2
border-spacingSpecifies the distance between the borders of adjacent cells2
caption-side Specifies the placement of a table caption 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
table-layout Sets the layout algorithm to be used for a table 2
Text Properties
Â
PropertyDescriptionCSS
colorSets the color of text1
directionSpecifies the text direction/writing direction2
letter-spacingIncreases or decreases the space between characters in a text1
line-heightSets the line height1
text-alignSpecifies the horizontal alignment of text1
text-decorationSpecifies the decoration added to text1
text-indentSpecifies the indentation of the first line in a text-block1
text-shadowSpecifies the shadow effect added to text2
text-transformControls the capitalization of text1
unicode-bidi 2
vertical-alignSets the vertical alignment of an element1
white-spaceSpecifies how white-space inside an element is handled1
word-spacingIncreases or decreases the space between words in a text1
CSS Pseudo-classes/elements
Â
PropertyDescriptionCSS
:activeAdds a style to an element that is activated1
:afterAdds content after an element2
:beforeAdds content before an element2
:first-childAdds a style to an element that is the first child of another element2
:first-letterAdds a style to the first character of a text1
:first-lineAdds a style to the first line of a text1
:focusAdds a style to an element that has keyboard input focus2
:hoverAdds a style to an element when you mouse over it1
:langAdds a style to an element with a specific lang attribute2
:linkAdds a style to an unvisited link1
:visitedAdds a style to a visited link1
Â