Вы находитесь на странице: 1из 24

Cascading Style Sheet (CSS)

It is used to describe the presentation of a


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

border-style Specify border style solid, double, groove,


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.

Вам также может понравиться