css syntax

syntax

the css syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

body {color: black}

---- p{text-align: center;color: black;font-family: arial}

p{text-align: center; color: black; font-family: arial}

p {text-align: center; color: black; font-family: arial}-----h1,h2,h3,h4,h5,h6 {color: green}

-----the class selectordefine:p.a {text-align: right}p.b {text-align: center}usage:<p class="a">this paragraph will be right-aligned.</p><p class="b">this paragraph will be center-aligned.</p>

----

.c1 {text-align: center}

<h1 class="c1">this heading will be center-aligned</h1><p class="c1">this paragraph will also be center-aligned.

</p>

-----

css comments

/* this is a comment */p{text-align: center;/* this is another comment */color: black;font-family: arial}

----

external style sheetstep1:

create html file:<html><head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head><body><hr /><p> this paragraph is example to check css file</p></body><html>

step2:create css file:

hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}

run html file to see the results.

internal style sheet

create html file:<html><head><style type="text/css"></style>

</head><body><hr /><p> this paragraph is example to check css file</p></body><html>

run html file to see the results.

inline styles:

<p style="color: sienna; margin-left: 20px">this is a paragraph</p>

----

css backgroundproperty description values

background a shorthand property for setting all background properties in one declaration

background-colorbackground-imagebackground-repeat background-attachment background-position

background-attachment sets whether a background image is fixed or scrolls with the rest of the page

scrollfixed

background-color sets the background color of an element

color-rgbcolor-hexcolor-nametransparent

background-image sets an image as the background

url(url)none

background-position sets the starting position of a background image

top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos

background-repeat sets if/how a background image will be repeated

repeatrepeat-xrepeat-yno-repeat

body{ background: #00ff00 url(stars.gif) no-repeat fixed top}

--- body { background-color: #00ff00;background-image: url(stars.gif); background-repeat: no-repeat;background-attachment: fixed;background-position: top

}---

css textproperty description valuescolor sets the color of a text color

direction sets the text direction ltrrtl

line-height sets the distance between lines normalnumberlength%

letter-spacing increase or decrease the space between characters

normallength

text-align aligns the text in an element leftrightcenterjustify

text-decoration adds decoration to text noneunderlineoverlineline-throughblink

text-indent indents the first line of text in an element

length%

text-shadow nonecolorlength

text-transform controls the letters in an element nonecapitalizeuppercaselowercase

white-space sets how white space inside an element is handled

normalprenowrap

word-spacing increase or decrease the space between words

normallength

body{ color: rgb(255,255,0);direction: rtl;line-height: 14pt;letter-spacing: 12px;text-align: center;text-decoration: underline;text-indent: 20px;text-transform: capitalize;white-space: normal;word-spacing: 30px

}

css fontproperty description valuesfont a shorthand property for setting all of

the properties for a font in one declaration

font-stylefont-variantfont-weightfont-size/line-height

font-family

font-family a prioritized list of font family names and/or generic family names for an element

family-namegeneric-family

font-size sets the size of a font xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

font-size-adjust specifies an aspect value for an element that will preserve the x-height of the first-choice font

none, number

font-stretch condenses or expands the current font-family

normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded

font-style sets the style of the font normalitalicoblique

font-variant displays text in a small-caps font or a normal font

normalsmall-caps

font-weight sets the weight of a font normal, bold, bolder, lighter,100, 200,300, 400,500,600,700,800,900

p{font: italic small-caps 900 12px/14px arial}p{font-family: arial, "lucida console", sans-serif;font-size: 10px;font-size-adjust: 0.58;font-stretch: ultra-condensed;font-style: italic;font-variant: small-caps;font-weight: bold}

css borderproperty description values

border a shorthand property for setting all of the properties for the four borders in one declaration

border-widthborder-styleborder-color

border-bottom a shorthand property for setting all of the properties for the bottom border in one declaration

border-bottom-widthborder-styleborder-color

border-bottom-color sets the color of the bottom border border-colorborder-bottom-style sets the style of the bottom border border-styleborder-bottom-width sets the width of the bottom border thin

mediumthicklength

border-color sets the color of the four borders, can have from one to four colors

color

border-left a shorthand property for setting all of the properties for the left border in one declaration

border-left-widthborder-styleborder-color

border-left-color sets the color of the left border border-colorborder-left-style sets the style of the left border border-styleborder-left-width sets the width of the left border thin

mediumthicklength

border-right a shorthand property for setting all of the properties for the right border in one declaration

border-right-widthborder-styleborder-color

border-right-color sets the color of the right border border-colorborder-right-style sets the style of the right border border-styleborder-right-width sets the width of the right border thin

mediumthicklength

border-style sets the style of the four borders, can have from one to four styles

nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

border-top a shorthand property for setting all of the properties for the top border in one declaration

border-top-widthborder-styleborder-color

border-top-color sets the color of the top border border-colorborder-top-style sets the style of the top border border-styleborder-top-width sets the width of the top border thin

mediumthicklength

border-width a shorthand property for setting the width of the four borders in one declaration, can have from one to four values

thinmediumthicklength

p{ border: thin dotted #00ff00}

table {border-color: red}all four borders will be redtable {border-color: red green}top and bottom border will be red, left and right border will be green

table {border-color: red green blue}top border will be red, left and right border will be green, bottom border will be bluetable {border-color: red green blue yellow}top border will be red, right border will be green, bottom border will be blue, left border will be yellow

---- table{ border-style: solid;border-color: red green blue yellow}

---- p {border-left-width: thin;border-right-width: thin;border-bottom-width thin;border-top-width : thin;border-left-style: solid;border-right-style: solid;border-bottom-style : solid;border-top-style : solid;border-left-color: #ff0000;border-right-color: #ff0000;border-bottom-color: #ff0000;border-top-color: #ff0000

}

---

css outlines

property description valuesoutline a shorthand property for setting

all the outline properties in one declaration

outline-coloroutline-styleoutline-width

outline-color sets the color of the outline around an element

colorinvert

outline-style sets the style of the outline around an element

nonedotteddashedsoliddoublegrooveridgeinsetoutset

outline-width sets the width of the outline around an element

thinmediumthicklength

p{ outline: red solid thin}

p{outline-color: red;outline-style: solid;outline-width: medium}

css marginproperty description valuesmargin a shorthand property for setting

the margin properties in one declaration

margin-topmargin-rightmargin-bottom

margin-left

margin-bottomsets the bottom margin of an element

autolength%

margin-leftsets the left margin of an element

autolength%

margin-rightsets the right margin of an element

autolength%

margin-top sets the top margin of an element

autolength%

h1{ margin: 10px 10px 10px 10px}

h1{ margin-bottom: 10px;margin-left: 10px;margin-right: 10px;margin-top: 10px}

css paddingproperty description valuespadding a shorthand property for setting

all of the padding properties in padding-toppadding-right

one declaration padding-bottompadding-left

padding-bottomsets the bottom padding of an element

length%

padding-leftsets the left padding of an element

length%

padding-rightsets the right padding of an element

length%

padding-top sets the top padding of an element

length%

h1 {padding: 10px}the padding will be 10px on all four sides

h1 {padding: 10px 2%}top and bottom padding will be 10px, left and right padding will be 2% of the width of the closest element.

h1 {padding: 10px 2% 15px}top padding will be 10px, left and right padding will be 2% of the width of the closest element, bottom padding will be 15px

h1 {padding: 10px 2% 15px 20px}top padding will be 10px, right padding will be 2% of the width of the closest element, bottom padding will be 15px, left padding will be 20px

h1 {padding-bottom: 10px;padding-left: 10px;padding-right: 10px;padding-top: 10px}

css listproperty description valueslist-style a shorthand property for setting

all of the properties for a list in list-style-typelist-style-position

one declaration list-style-imagelist-style-image sets an image as the list-item

markernoneurl

list-style-position sets where the list-item marker is placed in the list

1. insideoutside

list-style-type sets the type of the list-item marker

nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha

marker-offset autolength

ul{list-style: disc outside}ol{list-style: decimal inside}

ol{list-style-image: url(blueball.gif);list-style-type: circle;list-style-position: inside}ul{list-style-type: disc}--- html

<ul><li>pen</li><li>copy</li></ul>

<ol><li>pen</li>

<li>copy</li></ol>

css tableproperty description valuesborder-collapse sets whether the table borders

are collapsed into a single border or detached as in standard html

collapseseparate

border-spacing sets the distance that separates cell borders (only for the "separated borders" model)

length length

caption-side sets the position of the table caption

topbottomleftright

empty-cells sets whether or not to show empty cells in a table (only for the "separated borders" model)

showhide

table-layout sets the algorithm used to display the table cells, rows, and columns

autofixed

table {border-collapse: separate;border-spacing: 10px;caption-side: left;empty-cells: show;table-layout: fixed

}

css dimensionproperty description valuesheight sets the height of an element auto

length%

line-height sets the distance between lines normalnumberlength%

max-height sets the maximum height of an element

nonelength%

max-width sets the maximum width of an element

nonelength%

min-height sets the minimum height of an element

length%

min-width sets the minimum width of an element

length%

width sets the width of an element auto%length

img{height: 200px;width: 200px

}

p{ line-height: 14pt} p{max-height: 100px;max-width: 500px}p{min-height: 10px;min-width: 50px}

css classificationproperty description valuesclear sets the sides of an element

where other floating elements are not allowed

leftrightbothnone

cursor specifies the type of cursor to be displayed

urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp

display sets how/if an element is displayed

noneinlineblocklist-itemrun-incompactmarkertableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-caption

float sets where an image or a text will appear in another element

leftrightnone

position places an element in a static, relative, absolute or fixed position

staticrelativeabsolute

fixedvisibility sets if an element should be

visible or invisiblevisiblehiddencollapse

h2{clear: right;cursor: crosshair}img{float: left}

h1{position:absolute;left:100px;top:150px}p{visibility: hidden}

css positioningproperty description valuesbottom sets how far the bottom edge of

an element is above/below the bottom edge of the parent element

auto%length

clip sets the shape of an element. the element is clipped into this shape, and displayed

shapeauto

left sets how far the left edge of an element is to the right/left of the left edge of the parent element

auto%length

overflow sets what happens if the content of an element overflow its area

visiblehiddenscrollauto

position places an element in a static, relative, absolute or fixed position

staticrelativeabsolutefixed

right sets how far the right edge of an element is to the left/right of the right edge of the parent element

auto%length

top sets how far the top edge of an element is above/below the top edge of the parent element

auto%length

vertical-align sets the vertical alignment of an element

baselinesubsupertoptext-topmiddlebottomtext-bottomlength%

p{position: absolute;bottom: 20px}

p{

position: absolute;bottom: -20px}

img {clip: rect(10px, 5px, 10px, 5px)}

p{position: absolute;left: 20px}

p{position: absolute;left: -20px}

h1{position:absolute;left:100px;top:150px;}

p{position: absolute;right: 20px}

p{position: absolute;right: -20px}img{ vertical-align: bottom}

css pseudo-classes

css pseudo-classes are used to add special effects to some selectors.

a:link {color: #ff0000} /* unvisited link */a:visited {color: #00ff00} /* visited link */a:hover {color: #ff00ff} /* mouse over link */a:active {color: #0000ff} /* selected link */

css image gallery

<html><head><style type="text/css">div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left }div.img img { display: inline; margin: 3px; border: 1px solid #ffffff; }div.img a:hover img { border: 2px solid #ff0000; height: 400px; width: 400px }

</style></head>

<body><div class="img"> <a target="_blank" href="image_big.htm"> <img src="1.jpg" alt="image" width="110" height="90" /> </a>

</div><div class="img"> <a target="_blank" href="image_big.htm"> <img src="2.jpg" alt="image" width="110" height="90" />

</a>

</div><div class="img"> <a target="_blank" href="image_big.htm"> <img src="3.jpg" alt="image" width="110" height="90" /> </a>

</div><div class="img"> <a target="_blank" href="image_big.htm"> <img src="4.jpg" alt="image" width="110" height="90" /> </a>

</div></body></html>

css image opacity / transparency<img src="klematis.jpg" width="150" height="113" alt="klematis"style="opacity:0.4;filter:alpha(opacity=40)" />

--- <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /><img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />-- <html><head><style type="text/css">div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black; }div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* for ie */ filter:alpha(opacity=60); /* css3 standard */ opacity:0.6; }div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; }</style></head><body><div class="background"><div class="transbox"><p>this is some text that is placed in the transparent box.this is some text that is placed in the transparent box.this is some text that is placed in the transparent box.this is some text that is placed in the transparent box.this is some text that is placed in the transparent box.</p></div></div>

</body></html>

css syntax

Documents