Flux rss

CSS - Style sheets

 

Font properties

Property Value Description
font-family Specific font (Arial, Times, Verdana)
Familly (serif, sans-serif, fantasy, monospace, cursive)
Defines one or more font names or font families. If multiple fonts are defined, the first one found on the user's system will be used.
font-style normal, italic, oblique Defines the writing style
font-weight lighter, normal, bold or bolder.
numeric value (100, 200, 300, 400, 500, 600, 700, 800, 900)
Defines the thickness of the font
font-size xx-small, x-small, small, medium, large, x-large, xx-large
size in points (pt), cm, %
Defines the font size
font-variant normal, small-caps Defines a variant (small capitals)
font font: Verdana, Arial, bold italic 8px; Shortcut for all properties

Text and paragraphs

Property Value Description
color "#RRGGBB" Defines the text colour
line-height line-height: 12pt; Defines line spacing
text-align left, center, right or justify Defines text alignment
text-indent text-indent: 5px; Defines indentation
text-decoration blink (blinking), underline (underlined), line-through (strikethrough), overline (overlined) or none (no decoration) Defines decoration
text-shadow text-shadow: 1px 2px 4px black; Defines a drop shadow for the text, representing, respectively, the shadow's right-shift, down-shift, blur radius, and colour.
text-transform uppercase, lowercase, or capitalize Defines the case of the text
white-space normal (text will wrap to the next line), pre (text appears with whatever blank spaces were entered), nowrap (text will not wrap) Hyphenation
word-spacing word-spacing: 6px; Defines how much space to put between words
width in points (pt), inches (in), in cm, on pixels (px), or as a % Defines the width of a text element or image
height in points (pt), inches (in), in cm, on pixels (px), or as a % Defines the height of a text element or image

Background colours

Property Value Description
background-color "#RRGGBB" Defines a background colour
background-image url(http://url) Defines a background image
background-repeat repeat, repeat-x, repeat-y, no-repeat Defines how the background image repeats
background-attachment scroll, fixed Specifies if the background image will stay in place when the screen scrolls
background-position top, middle, bottom, left, center or right Positions the image relative to the upper-left corner
background background: url(test.jpg) fixed repeat; Shortcut for background properties

Margins

Property Example Description
margin-top margin-top: 5px; Value of top margin
margin-right margin-right: 0.5em; Value of right margin
margin-bottom margin-bottom: 2pt; Value of bottom margin
margin-left margin-left: 0; Value of left margin
margin margin: 5px 0.5em 2pt 0; Shortcut for margin properties

Borders

Property Value Description
border[-top -left -bottom -right]-width in points (pt), inches (in), in cm, on pixels (px), or as a % Border thickness [for the location given]
border[-top -left -bottom -right]-color border-left-color: #RRGGBB; Border colour [for the location given]
border[-top -left -bottom -right]-style solid, dashed, dotted, double or ridge Border style [for the location given]
border-collapse collapse
separate
Adds or removes "3D" effect
Border border: 1px 0 0 2px dotted green; Global shortcut for border properties

Padding

Property Value Description
padding-top padding-top: 3px; Padding between the element and the top border
padding-right padding-right: 0.25em; Padding between the element and the right border
padding-bottom padding-bottom: 0; Padding between the element and the bottom border
padding-left padding-left: 2pt; Padding between the element and the left border
padding padding: 3px 0.25em 0 2pt; Shortcut for all padding properties

Tables

Property Value Description
border-collapse separate or collapse Merges cell borders (collapse), doesn't merge them (separate)
border-spacing border-spacing: 4px; Cell spacing
caption-side top, bottom, left or right Placing the table's caption
empty-cells show or collapse Display (show) or hide (collapse) empty cells
table-layout fixed (independent of cell content) or auto (depending on cell content) Fixed or variable width
speak-headers always (always before each cell) or once (just once) Property for the blind and visually impaired, indicating how sound behaves when reading table header cells

Lists

Property Value Description
list-style-type decimal, upper-roman, lower-latin, disc, circle, square or none Type of bullets and numbering
list-style-image list-style-image: url(image.png); Personalise bullets with an image
list-style-position inside or outside Specifies bullet indentation
list-style   Shortcut to list properties

Page layout

Property Value Description
@page @page(size: portrait) Defines print layout
size auto, landscape or portrait Printing format
margin-top margin-top: 3 cm; Top margin
margin-right margin-right: 1.5 cm; Right margin
margin-bottom margin-bottom: 1 cm; Bottom margin
margin-left margin-left: 2 cm; Left margin
marks crop (crop marks), cross (cross marks), none (no marks) Crop marks and cross marks
page-break-before Always, avoid Forces a page break before an element
page-break-after Always, avoid Forces a page break after an element
orphans orphans: 2; Avoids having orphaned lines at the end of a page. Defines the minimum number of lines of an element that are left at the bottom of a page before a page break.
widows widows: 1; Avoids having widowed lines at the end of a page. Defines the minimum number of lines of an element that are left at the top of a page after a page break.


Last update on Thursday October 16, 2008 02:43:13 PM.
This document entitled « CSS - Style sheets » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.

Results for

Style sheets - Introduction The concept of style sheets first appeared in 1996 when the W3C published a new recommendation entitled "Cascading Style Sheets", or CSS for short. The principle behind style sheets involves using a single document to store the page layout... en.kioskea.net/css/cssintro.php3
CSS - Declaring a style sheet Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS recommendations used by the... en.kioskea.net/css/cssimplant.php3
HTML 4.0 - Positioning elements Using style sheets along with the and tags, you can specify the location of text or images down to the pixel. This is possible with versions 4 and higher of Netscape and Internet Explorer; however, the technique is still problematic and... en.kioskea.net/css/cssposition.php3

Results for

Create CSS easilyCreate CSS easily Easy links CSS is a short term for Cascading Style Sheets. CSS is used to alter the display of the HTML coded environment. For example, using CSS can change the appearance of your scroll bar, the color, headings... en.kioskea.net/faq/sujet-593-create-css-easily
How to count number of words in MS Words sheet!How to count number of words in MS Words sheet! It is quite simple to count the number of words in a Microsoft word sheet. This tip might be very useful for example, if you wish to make a presentation on Microsoft word for an approximate number... en.kioskea.net/faq/sujet-354-how-to-count-number-of-words-in-ms-words-sheet
[Shell]Create a file having a specific sizeShell]Create a file having a specific size The dd command allows you to create "empty" file of desired size, creating these arbitrary heavy files, may be useful for testing purposes. Use command below: dd if=/dev/zero of=file_to... en.kioskea.net/faq/sujet-787-shell-create-a-file-having-a-specific-size

Results for

Compare cell a1 to entire A col in sheet2 (Solved)Hello, I have been trying to compare sheet1 A2 to sheet2 A2 through A500 and if it exists somewhere in sheet2's a col then copy that entire row to a new sheet. I have experimented with many bits of macro code from others but so far no real... en.kioskea.net/forum/affich-21245-compare-cell-a1-to-entire-a-col-in-sheet2
To prepare Attendence Report with Excel sheet (Solved)Hello, I will describe what I want to do . I have 60 residents working in our department. They attend morning report everyday. So I have prepared excel sheet( Named Attendance Table) which has column A1:A60 with names of residents B1:B60 with... en.kioskea.net/forum/affich-22740-to-prepare-attendence-report-with-excel-sheet
Copy data into next empty cell in new sheetHello, I am trying to make a 2 sheet workbook which has the input details in Sheet1 A1 and this is changed weekly but the info in this cell should then be inserted into the first blank cell in Column A in Sheet 2. I have tried this code (below) but it... en.kioskea.net/forum/affich-16567-copy-data-into-next-empty-cell-in-new-sheet

Results for

Download Vista Live Shell Pack - PinkIf you want to have Vista on your computer but your shape is not rather powerful or if simply you cannot have to be paid this version yet? Then resolution is to change the appearance of your good old XP. Vista Live Shell Pack is a topic of office... en.kioskea.net/telecharger/telecharger-771-vista-live-shell-pack-pink
Download Electric SheepElectric Sheep is a screen of wakefulness source open created by Scott Draves. He can be installed on any operating system Windows or Mac.During the alerting of your computer, the screen of wakefulness is displayed and the computer is connected to... en.kioskea.net/telecharger/telecharger-753-electric-sheep
Download ShellExViewShellEXView is a free tool used to install and manage shell extensions in Windows.Shell extensions enable users to view program specific menus when right clicking various file types.The ShellExView utility displays the details of shell extensions... en.kioskea.net/telecharger/telecharger-884-shellexview

Results for

CSS - Units With style sheets, you can use numeric values to set style properties in multiple ways: absolutely, meaning in units which are independent of the form of output (such as in centimetres); relatively, meaning in units relative to an element. Style... en.kioskea.net/css/css-unites.php3
CSS - Style Classes A web designer might want to assign different styles to the same tags. For this reason, the CSS specifications introduced the concept of classes. The definition of classes is as simple as that of styles. It involves specifying a selected tag (as with... en.kioskea.net/css/cssclass.php3
CSS - Style syntax Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements: A type selector, for specifying which tags in the document the style applies to; A style declaration,... en.kioskea.net/css/csssyntax.php3