document written in a markup language. It is designed to enable the separation of document content (HTML) from document presentation (CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics. Cont… It also reduce complexity and repetition in the structural content. The advantage of style sheet is to make global changes to all document from a single location. When style sheet appears with web page , It known as Cascading Style Sheet. It is used in web page with <style>…</style> tags. Style attributes are listed between this tags. The <style> tag is written within <head>… </head> tag. Cont… Syntax:- <STYLE type=“text /css”> tag { attribute: value; attribute: value } </STYLE> Font and Color Attributes The font properties control the display of text elements, such as paragraphs .
Attributes Description Values
font-family It is used to specify Arial, Times New font family name. Roman, Verdana font-style Specify font style Bold, Italic, Normal, Oblique font-size Specify font size In Pixels & Per font-weight Specify font Bold, Bolder, weight Lighter, Normal color Specify color of Name or code Background Attributes Background properties affect the surface on which the document elements appear. Attributes Description Values background-color Specify background Name or color of the element code background- Set image as url or none image background of the element background- How background image repeat-x, repeat repeat throughout the repeat-y, page. Repeat, no-repeat Text Attributes Text properties are useful to provide control over the appearance of the text on web pages. Attributes Description Values text-align Used to align text left, right, center, justify vertical-align Align text Baseline, sub, super, vertically top, text-top, middle, bottom, text-bottom, M, NM text- Decorate the text None ,underline, decoration overline, linethrough, blink Cont… Attributes Description Values text-transform Transformation of capitalize, the text lowercase, uppercase, none letter-spacing Spacing between Normal or length characters in text (in mm, cm, in, pt, px ) word-spacing Spacing b/w Same as above words Border Attributes You can set the border property using this attributes. Attributes Description Values
ridge, inset, outset, dashed, dotted, hidden border-color Specify border Name or code color border-width Specify border thin, medium, thick Cont… Attributes Description Values border-top Specify pattern for Width , style, top border name or code border-bottom Specify pattern for As above bottom border
border-left Specify pattern for As above
left border
border-right Specify pattern for As above
right border Margin Attributes Attributes Description Values Margin-top Specify top margin Per like(20%) or length(100) or auto Margin-bottom Specify bottom As above margin Margin-left Specify left margin As above Margin-right Specify right As above margin Margin Specify margin As above List Attributes List includes controls for lists and list-items, giving more control over the presentation of bullets or number on WebPages. Attributes Description Value
List-style Specify list style disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha Padding Attributes Define the space b/w their element border and the content. It is used when your text has border.
Attributes Description Values
padding-left Specify left padding In cm, px padding-right Specify left padding As above
padding-top Specify left padding As above
padding-bottom Specify left padding As above
Dimension Properties It allow you to control the height and width of an element. It also use to increase and decrease space b/w two lines. Attributes Description Values img-height Specify image Auto, px, in % height img-width Specify image Same as above width line-height Increase space Auto, in cm b/w spaces Change Cursor
It is used to change cursor.
Attributes Description Values
cursor It change the cursor Auto, hand,
style crosshair, default, pointer, move, wait, help, text Position Set the shape of an element. img { position: absolute; clip:rect(10px,200px,200px,0px); } • 10px :-from top • 200px :-from right • 200px :- from bottom • 10px :- from left Cont…
Set Left and Top position or Right and Bottom
position. h1{ position: absolute; bottom:150px; right:500px; } P { position: absolute; top:150px; left:250px; } Overflow If the picture or paragraph is not fit then we have to put scrollbar. div { background-color:blue; color:red; height:50px; width:50px; overflow:scroll; } Vertical align an image .top { vertical-align: text-top; or :text-bottom; :sub; :super; :middle; :baseline; :top; :bottom; } Pseudo-class The pseudo class are used in css to add different effects. To some selector or part of a some selector. a:link{color:blue;} a:visited{color:red;} a:hover{ background:cyan; font-size:50; font-family:script; } a:active{color:pink;} Pseudo-element The effect can be done only first character only or first-line only. Format: Selector: pseudo-element {property: value} Z-index
Display the text in front of the picture.
By default the z-index has value 0. z-index have value -1 so set lower priority means text can display front of the picture. z-index have value 1 set higher priority means text can not display front of the picture. Inline Style Sheet An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color: yellow; margin-left: 20px"> This is a paragraph </p> Multiple Style Sheet
Combination of any two style sheet is called multiple
style sheet. If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color: red; text-align: left; font-size: 8pt } Cont… And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt }If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.