Syntax: The Class Selector Define

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 Selector Define: 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> ----
.Center {Text-Align: Center} <H1 Class="Center"> This Heading Will Be Center-Aligned </H1>
<P Class="Center"> 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 Sheet Step1: 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 Background Property Background
Description A Shorthand Property For Setting All Background Properties In One Declaration
Background-Attachment
Background-Color
Sets Whether A Background Image Is Fixed Or Scrolls With The Rest Of The Page Sets The Background Color Of An Element
Values Background-Color Background-Image Background-Repeat Background-Attachment Background-Position Scroll Fixed
Background-Image Background-Position
Background-Repeat
Color-Rgb Color-Hex Color-Name Transparent Sets An Image As The Url(Url) Background None Sets The Starting Position Of A Top Left Background Image Top Center Top Right Center Left Center Center Center Right Bottom Left Bottom Center Bottom Right X% Y% Xpos Ypos Sets If/How A Background Repeat Image Will Be Repeated Repeat-X Repeat-Y No-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 Text Property color direction line-height
Description Sets the color of a text Sets the text direction Sets the distance between lines
letter-spacing text-align
Increase or decrease the space between characters Aligns the text in an element
text-decoration
Adds decoration to text
text-indent text-shadow
Indents the first line of text in an element
text-transform
Controls the letters in an element
white-space
Sets how white space inside an element is handled Increase or decrease the space between words
word-spacing
Values color ltr rtl normal number length % normal length left right center justify none underline overline line-through blink length % none color length none capitalize uppercase lowercase normal pre nowrap normal length
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: uppercase; white-space: normal; word-spacing: 30px }
CSS Font Property Description Values
font
A shorthand property for setting all of the properties for a font in one declaration
font-style font-variant font-weight font-size/line-height font-family family-name generic-family xx-small x-small small medium large x-large xx-large smaller larger length % None, number
font-family
font-size
A prioritized list of font family names and/or generic family names for an element Sets the size of a font
font-size-adjust
font-stretch
font-style
font-variant font-weight
Specifies an aspect value for an element that will preserve the x-height of the first-choice font Condenses or expands the current normal font-family wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded Sets the style of the font normal italic oblique Displays text in a small-caps font or a normal normal font small-caps 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 Border
Property border Description A shorthand property for setting all of the properties for the four borders in one declaration A shorthand property for setting all of the properties for the bottom border in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Values border-width border-style border-color border-bottom-width border-style border-color border-color border-style thin medium thick length color
border-bottom
border-bottom-color border-bottom-style border-bottom-width
border-color border-left
border-left-color border-left-style border-left-width
Sets the color of the four borders, can have from one to four colors A shorthand property for setting all of the properties for the left border in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border
border-right
border-right-color border-right-style border-right-width
border-style
border-top
border-top-color border-top-style border-top-width
border-width
border-left-width border-style border-color border-color border-style thin medium thick length A shorthand property for setting all of border-right-width the properties for the right border in one border-style declaration border-color Sets the color of the right border border-color Sets the style of the right border border-style Sets the width of the right border thin medium thick length Sets the style of the four borders, can none have from one to four styles hidden dotted dashed solid double groove ridge inset outset A shorthand property for setting all of border-top-width the properties for the top border in one border-style declaration border-color Sets the color of the top border border-color Sets the style of the top border border-style Sets the width of the top border thin medium thick length A shorthand property for setting the thin width of the four borders in one medium declaration, can have from one to four thick values length
p { border: thin dotted #00FF00 }
table {border-color: red} all four borders will be red table {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 blue table {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 outline Description A shorthand property for setting all the outline properties in one declaration Sets the color of the outline around an element Sets the style of the outline around an element Values outline-color outline-style outline-width color invert none dotted dashed solid double groove ridge inset outset thin medium thick length
outline-color outline-style
outline-width
Sets the width of the outline around an element
p { outline: red solid thin } p { outline-color: red; outline-style: solid; outline-width: medium }
CSS Margin Property margin
Description A shorthand property for setting the margin properties in one declaration Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element
margin-bottom
margin-left
margin-right margin-top
Values margin-top margin-right margin-bottom margin-left auto length % auto length % auto length % auto length %
h1 { margin: 10px 10px 10px 10px } h1 { margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px }
CSS Padding Property padding
Description A shorthand property for setting all of the padding properties in one declaration Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element
padding-bottom padding-left padding-right padding-top
Values padding-top padding-right padding-bottom padding-left length % length % length % 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 List Property list-style
list-style-image list-style-position list-style-type
Description A shorthand property for setting all of the properties for a list in one declaration Sets an image as the list-item marker Sets where the list-item marker is placed in the list Sets the type of the list-item marker
marker-offset
Values list-style-type list-style-position list-style-image none url 1. inside outside none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length
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 Table Property border-collapse
border-spacing
caption-side
Description Sets whether the table borders are collapsed into a single border or detached as in standard HTML Sets the distance that separates cell borders (only for the "separated borders" model) Sets the position of the table caption
Values collapse separate
length length
empty-cells
table-layout
Sets whether or not to show empty cells in a table (only for the "separated borders" model) Sets the algorithm used to auto display the table cells, rows, and fixed columns
top bottom left right show hide
table { border-spacing: 10px; caption-side: left; empty-cells: show; table-layout: fixed; border-collapse: separate }
CSS Dimension Property height
Description Sets the height of an element
line-height
max-height
max-width
min-height min-width width
Values auto length % Sets the distance between lines normal number length % Sets the maximum height of an none element length % Sets the maximum width of an none element length % Sets the minimum height of an length element % Sets the minimum width of an length element % 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 Classification Property clear
Description Sets the sides of an element where other floating elements are not allowed
cursor
display
float
position
Values left right both none Specifies the type of cursor to be url displayed auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help Sets how/if an element is none displayed inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption Sets where an image or a text left will appear in another element right none Places an element in a static, static relative, absolute or fixed relative position absolute fixed
visibility
Sets if an element should be visible or invisible
visible hidden collapse
h2 { clear: right; cursor: crosshair } img { float: left } h1 { position:absolute; left:100px; top:150px } p { visibility: hidden }
CSS Positioning Property bottom
clip
left
overflow
position
right
top
vertical-align
Description Values Sets how far the bottom edge of auto an element is above/below the % bottom edge of the parent length element Sets the shape of an element. shape The element is clipped into this auto shape, and displayed Sets how far the left edge of an auto element is to the right/left of the % left edge of the parent element length Sets what happens if the content visible of an element overflow its area hidden scroll auto Places an element in a static, static relative, absolute or fixed relative position absolute fixed Sets how far the right edge of an auto element is to the left/right of the % right edge of the parent element length Sets how far the top edge of an auto element is above/below the top % edge of the parent element length Sets the vertical alignment of an baseline element sub super top text-top middle bottom text-bottom length %
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>

Syntax: The Class Selector Define

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Syntax: The Class Selector Define

Uploaded by

Copyright:

Available Formats

Syntax The Css Syntax Is Made Up Of Three Parts: A Selector, A Property And A Value: Selector {Property: Value} Body

Css Background Property Background

Values Background-Color Background-Image Background-Repeat Background-Attachment Background-Position Scroll Fixed

CSS Text Property color direction line-height

Adds decoration to text

Indents the first line of text in an element

Controls the letters in an element

border-bottom-color border-bottom-style border-bottom-width

border-left-color border-left-style border-left-width

border-right-color border-right-style border-right-width

border-top-color border-top-style border-top-width

p { border: thin dotted #00FF00 }

Sets the width of the outline around an element

CSS Margin Property margin

CSS Padding Property padding

padding-bottom padding-left padding-right padding-top

Values padding-top padding-right padding-bottom padding-left length % length % length % length %

CSS List Property list-style

list-style-image list-style-position list-style-type

<ul> <li>Pen</li> <li>Copy</li> </ul>

CSS Table Property border-collapse

Values collapse separate

top bottom left right show hide

CSS Dimension Property height

Description Sets the height of an element

min-height min-width width

CSS Classification Property clear

Sets if an element should be visible or invisible

visible hidden collapse

CSS Positioning Property bottom

p { position: absolute; bottom: 20px } p { position: absolute;

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

You might also like