Css
- 1. ACT ACADEMY Why should I use CSS? Cascading Style allows obtaining the full control under HTML tagging. CSS allows easily redefining the all default properties of any HTML tag. Using CSS you will open new unique opportunities missing in common HTML. For example, by means of CSS it's possible to set the tracking between characters and space between text rows. Using CSS properties you can exactly specify the background image position disallowing the repeating of the image within the document. Using CSS you will create new HTML pages much faster. The styles that were once determined can be used again and again in any part of the HTML document. It's very important to understand that using CSS in external file gives a chance to change properties for all elements in any pages where this style definition is used. CSS Inline It is possible to place CSS in the your HTML code and this method of CSS usage is referred to as inline css. Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override style rules that are defined in external or internal by using inline CSS. CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute Sample Code: <p style="background: #660066; text-decoration: underline; color: white;">Inline CSS Sample</p> Internal CSS
- 2. When using internal CSS, you must add a new tag, style, inside the tag. The HTML code below contains an example of <style>'s usage <html> <head> <style type="text/css"> h5 { text-align: center; text-decoration: underline; text-transform: capitalize; } </style> </head> <body><h5>hello ACT </h5></body> </html> Linking to external CSS files A key benefit of CSS is that you can create a style sheet for use not just within a single page, but throughout an entire web-project. This external style sheet can be applied so many pages as you desired, without having to duplicate the code. So if you'd like to change the design of all your pages, you just need to change one file, instead of making changes to all your pages of the web-project. To set up an external CSS file: 1. Create a new file by means of software allowing you to save it as a text file. 2. Type in your clear CSS codes. 3. Save the document as filename.css
- 3. Link to your external file: To use external file CSS file on every page that you want affected by CSS, insert the following code in the head: <HEAD> <LINK REL=stylesheet TYPE="text/css" HREF="filename.css"> </HEAD> CSS Text Properties Text Formatting Property color letter-spacing Description Sets text colour Sets spacing between characters Values name RGB normal length Sample Code h2 {color: red} p {letter-spacing: 0} normal line-height Sets spacing between lines number length h1 {line-height:36px} percentage left text-align Sets justification right center p{text-align: left} justify none underline text-decoration Sets text Style overline a{text-decoration: none} line-through blink text-indent Sets indent text from the left margin length percentage p {text-indent: 5px}
- 4. capitalize text-transform uppercase Transforms text letters lowercase h1 {text-transform: uppercase} none SAMPLE <style type="text/css"> h5 { text-align: center; text-decoration: underline; text-transform: capitalize; } </style> CSS Font Properties Fonts Property Description Values Sample Code font-family font-size font Sets multiple font properties font-weight font-style font-variant font-size Sets the size of the text family-name p {font-family: verdana,arial} generic-family p {font-size: 10pt; font-family: arial} smaller font-family Sets font names P {font: 12pt arial} larger P {font: 70% sans-serif} xx-small P {font: bold italic large Verdana}
- 5. x-small small medium large x-large xx-large bold bolder lighter 100 200 font-weight Sets the weight of the text normal 300 400 p{font-weight: bold} 500 600 700 800 900 normal font-style Sets the style of the text italic p{font-style: italic} oblique font-variant Sets the font variant Sample <style type="text/css"> .sample { font: italic small-caps 900 14px tahoma } </style> normal small caps h2 {font-variant: small-caps}
- 6. Color and Background A background image, background color, and foreground color are subject for total CSS control. Using CSS you can always obtain the required result. Color & Background properties Properties Values background- Examples/Notes scroll, fixed CSS level CSS1 attachment background-color (color), transparent background- Color in hex code CSS1 none, (location) CSS1 background- (percent), (length), top, center, CSS1 position bottom, left, center, right background- repeat, repeat-x, repeat-y, no- repeat repeat background Any of the above background {background: URL(back.gif) repeat values separated by spaces fixed} (color) Color is in hex code. This refers to image color CSS1 CSS1 CSS1 the foreground color. You are probably familiar with the <body> tag. A typical <body> tag looks something like this: <body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000"> To convert that into CSS, it looks like this: body { background-image: url(graphic.jpg); color: #FFFFFF; background-color: #000000; } Big deal right? But CSS adds some special features. One of the most important is the backgroundrepeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat. A regular web page has a
- 7. default of background-repeat: repeat, which means the image is repeated both horizontally and vertically. With CSS, you can set the background to repeat horizontally ( repeat-x), repeat vertically (repeat-y), or not repeat at all (no-repeat). Sample Code: <style type="text/css"> body { background: #00ff00 url("/images/bg.gif") no-repeat fixed center center; } </style> Link styles (Pseudo-Class Selectors) Link styles are pseudoclass selectors in CSS-Talk CSS specifications refer to link styles as Pseudoclasses... which are special classes that describe styles for elements that only apply under certain circumstances. It sounds intimidating but is quite simple: a:link Describes any hyperlink that has not been visited by the user's browser. In other words, the page linked to is not present in the browser's local memory. a:visited Describes any hyperlink that has been visited and is present in the browser's local memory. a:hover
- 8. Describes a hyperlink while the user's mouse happens to be hovering over it. This class is recognized by all version 4 and higher browsers, except Netscape 4. <style type="text/css"> a:link { color: #999999; } a:visited { color: #FFFFFF; } a:hover { color: #CCCCCC; background-color: #333333; text-decoration: none; } a:active { color: #333333; } </style> a:active Describes a hyperlink that has been clicked but not yet released. This class is recognized by all version 4 and higher browsers, except Netscape. Link style syntax <style type="text/css"> a:link { color: #999999; } a:visited { color: #FFFFFF; } a:hover {
- 9. color: #CCCCCC; background-color: #333333; text-decoration: none; } a:active { color: #333333; } </style> CSS Margins Margin properties allow you to set the width of the margin around the element box. Since margins are outside the element box, the background color or image for the page or parent element is what will show through the margin. Margins Property margin marginbottom Description Sets all of the margin properties of an element from one to four values Values length percentage auto length Sets bottom margin percentage auto Sample Code h1 {margin: 4px} h2{margin:2 1 3 3px} h1 {margin-bottom: 2em} length margin-left Sets left margin percentage h1 {margin-left: 2px} auto length margin-right Sets right margin percentage auto h1 {margin-right: 10.5%}
- 10. length margin-top Sets top margin percentage auto h1 {margin-top: 2em} Samples <style type="text/css"> p.sample {margin: 1em 2em 3em 4em} /* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */ </style> CSS - Padding properties Paddings are part of the box formatting model. Each element formatted in this model is in one or more rectangular boxes representing the padding, border and margin areas. The padding Properties determine how much space is to be inserted between the border and the actual content of the element. Padding Property Description padding paddingbottom paddingleft paddingright paddingtop Values Sets all of the padding properties of an length element from one to four values percentage Sets the bottom padding properties of an length element percentage Sets the left padding properties of an element length percentage Sets the right padding properties of an length element percentage Sets the top padding properties of an element length percentage Sample Code p {padding: 2em 2em} p {padding-bottom: 5px} p {padding-left: 12px} P {padding-right: 10%} P {padding-top: 2px}
- 11. Samples <style type="text/css"> {padding: 5px 10px 5px 10px; } </style> CSS List Properties List Properties Property Description Values Sample Code block display Sets how or if an element is inline displayed list-item p {display: block} none list-style-type list-stylelist-style Sets all of the list properties image ul {list-style: circle inside} list-styleposition list-style-image list-styleposition Sets an image as the list item url ul {list-style-image: marker none myimage.gif} Sets the position of the list marker inside outside ul {list-style: outside} disc circle square list-style-type Sets the appearance of the list item marker decimal lower-roman upper-roman lower-alpha upper-alpha none ol {list-style-type: circle}
- 12. Internet Explorer and Gecko based browser do not render indents for list the same way. You cam make them the same wih CSS. First you need to remove/clear the left padding and margins. ul{ margin-left:0; padding-left:0; } Now, to indent the list XXpx just add the the number of pixels to either the left padding or left margin. ul{ margin-left:XXpx; padding-left:0; } or ul{ margin-left:0; padding-left:XXpx; } Samples <style type="text/css"> ul { list-style: square inside url("images/cl.gif") } </style> CSS - common display properties Display Block and Inline CSS Code: a { display: block; }
- 13. p { display: inline; } Samples <style type="text/css"> a { display: block; } p { display: inline; } </style> CSS: border-radius and -moz-border-radius CSS3 Mozilla equivalent WebKit equivalent border-top-right- -moz-border-radius- -webkit-border-top-right- radius topright radius border-bottom-right- -moz-border-radius- -webkit-border-bottom- radius bottomright right-radius border-bottom-left- -moz-border-radius- -webkit-border-bottom-left- radius bottomleft radius border-top-left-radius -moz-border-radius- -webkit-border-top-left- topleft border-radius radius -moz-border-radius -webkit-border-radius -webkit-box-shadow -webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); box-shadow: h-shadow v-shadow blur spread color inset;
- 14. -webkit-transform: rotate() -webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-transform: rotate(-5deg) -webkit-transform: skew() -webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-transform: skew(5deg,5deg); text-shadow h1 { text-shadow: 2px 2px #ff0000; } text-shadow: h-shadow v-shadow blur color; Opacity property .opaque1 { // for all other browsers opacity: .5; } .opaque2 { // for IE5-7 filter: alpha(opacity=50); } .opaque3 { // for IE8 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }