css syntax
DESCRIPTION
CSS Syntax and brief descriptions. Cascading style sheet is used to create beautiful webpages.TRANSCRIPT
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"><!--hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}--></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>