Scribd
Upload
14 views

TechnoCSS

Brief introduction on css.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

TechnoCSS

Brief introduction on css.

Uploaded by

hrikroy201001001129
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

TECHNO INDIA UNIVERSITY

WEST BENGAL

CSS
(Cascading Style Sheet)
-Contd.

1
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border Style


The border-style property specifies what kind of border to display.
The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border). 2
TECHNO INDIA UNIVERSITY
WEST BENGAL

Example:
<!DOCTYPE html> p.five {
<html> border-style: double;
<head> border-width: 15px;
<style> }
p.six {
p.one {
border-style: double;
border-style: solid; border-width: thick;
border-width: 5px; }
} </style>
p.two { </head>
<body>
border-style: solid;
<h2>The border-width Property</h2>
border-width: medium; <p>This property specifies the width of the four borders:</p>
} <p class="one">Some text.</p>
p.three { <p class="two">Some text.</p>
border-style: dotted; <p class="three">Some text.</p>
<p class="four">Some text.</p>
border-width: 2px;
<p class="five">Some text.</p>
} <p class="six">Some text.</p>
p.four {
border-style: dotted; <p><b>Note:</b> The "border-width" property does not work if it is used alone.
border-width: thick; Always specify the "border-style" property to set the borders first.</p>
</body> 3
}
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border Width


The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
} 4
TECHNO INDIA UNIVERSITY
WEST BENGAL

Specific Side Widths: The border-width property can have from one to four
values (for the top border, right border, bottom border, and the left
border):
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px
left */
}
5
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border Color


The border-color property is used to set the color of the four borders.
The color can be set by:
Note: If border-color is not
• name - specify a color name, like "red" set, it inherits the color of
• HEX - specify a HEX value, like "#ff0000" the element.
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• Transparent
Specific Side Colors
• The border-color property can have from one to four values (for the
top border, right border, bottom border, and the left border).

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left
*/
} 6
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border Color (Example)


<!DOCTYPE html>
<body>
<html>
<h2>The border-color Property</h2>
<head> <p>This property specifies the color of the four borders:</p>
<style> <p class="one">A solid red border</p>
p.one { <p class="two">A solid green border</p>
border-style: solid; <p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if
border-color: red;
it is used alone. Use the "border-style" property to set the
} borders first.</p>
p.two { </body>
border-style: solid; </html>
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head> 7
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Border - Shorthand Property


• To shorten the code, it is also possible to specify all the individual border
properties in one property.
• The border property is a shorthand property for the following individual
border properties:
– border-width
– border-style (required)
– border-color

8
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Rounded Borders


<!DOCTYPE html>
<html> p.round3 {
<head> border: 2px solid red;
<style> border-radius: 12px;
padding: 5px;
p.normal {
}
border: 2px solid red; </style>
padding: 5px; </head>
} <body>
p.round1 {
<h2>The border-radius Property</h2>
border: 2px solid red;
<p>This property is used to add rounded borders to an element:</p>
border-radius: 5px;
padding: 5px; <p class="normal">Normal border</p>
} <p class="round1">Round border</p>
p.round2 { <p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
border: 2px solid red;
border-radius: 8px; </body>
padding: 5px; </html>
} 9
TECHNO INDIA UNIVERSITY
WEST BENGAL

All CSS Border Properties


Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders


border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners

border-right Sets all the right border properties in one declaration


border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border 10
border-width Sets the width of the four borders
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Margins
• The CSS margin properties are used to create space around elements, outside
of any defined borders.
• With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
– margin-top
– margin-right
– margin-bottom
– margin-left

All the margin properties can have the following values:


• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element11
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Margins (Example)


<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and
a left margin of 80px.</div>
</body>
</html> 12
TECHNO INDIA UNIVERSITY
WEST BENGAL

Margin - Shorthand Property


The margin property is a shorthand property for the following individual
margin properties:
➢ margin-top Example:
Use the margin shorthand property with four values:
➢ margin-right p{
➢ margin-bottom margin: 25px 50px 75px 100px;
➢ margin-left }
So, here is how it works: If the margin property has four values:
margin: 25px 50px 75px 100px;

➢ top margin is 25px


➢ right margin is 50px
➢ bottom margin is 75px
➢ left margin is 100px
13
TECHNO INDIA UNIVERSITY
WEST BENGAL

If the margin property has one value: If the margin property has two values:
p{ p{
margin: 25px; margin: 25px 50px;
} }
❖all four margins are 25px ❖ top and bottom margins are
25px
❖ right and left margins are 50px

If the margin property has three values:


p{
margin: 25px 50px 75px;
}
❖top margin is 25px
❖right and left margins are 50px
❖bottom margin is 75px
14
TECHNO INDIA UNIVERSITY
WEST BENGAL

Margin Collapse
• Top and bottom margins of elements are sometimes collapsed into a
single margin that is equal to the largest of the two margins.
• This does not happen on left and right margins! Only top and bottom
margins!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top
margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px +
20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body> 15
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Padding
• The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
• With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).
<!DOCTYPE html> <body>
<html>
<head> <h2>Using individual
<style> padding properties</h2>
<div>This div element has a
div { top padding of 50px, a right
border: 1px solid black; padding of 30px, a bottom
background-color: lightblue; padding of 50px, and a left
padding-top: 50px; padding of 80px.</div>
padding-right: 30px; </body>
padding-bottom: 50px; </html>
padding-left: 80px;
}

</style>
16
</head>
TECHNO INDIA UNIVERSITY
WEST BENGAL

Padding - Shorthand Property


• If the padding property has four •If the padding property has three
values: values:
padding: 25px 50px 75px 100px; padding: 25px 50px 75px;
– top padding is 25px – top padding is 25px
– right padding is 50px – Right & left padding is 50px
– bottom padding is 75px – bottom padding is 75px
– left padding is 100px

If the padding property has two If the padding property has one
values: value:
padding: 25px 50px; padding: 25px;
• top and bottom paddings are all four paddings are 25px
25px
• right and left paddings are 50px

17
TECHNO INDIA UNIVERSITY
WEST BENGAL

The CSS Box Model


• In CSS, the term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:

Explanation of the different parts:

Content - The content of the box,


where text and images appear
Padding - Clears an area around the
content. The padding is transparent
Border - A border that goes around
the padding and content
Margin - Clears an area outside the
border. The margin is transparent
18
TECHNO INDIA UNIVERSITY
WEST BENGAL

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>
<div>Check the example.</div>
</body>
</html>
19
TECHNO INDIA UNIVERSITY
WEST BENGAL

Width and Height of an Element


• In order to set the width and height of an element correctly in all
browsers, you need to know how the box model works.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html> 20
TECHNO INDIA UNIVERSITY
WEST BENGAL

This <div> element will have a total width of 350px:


div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation: 320px (width)+ 20px (left + right padding)
+ 10px (left + right border)+ 0px (left + right margin)
= 350px

• The total width of an element should be calculated like this:


Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
• The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
21
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Outline
• An outline is a line drawn outside the element's border.
• An outline is a line that is drawn around elements, OUTSIDE the borders, to
make the element "stand out".
CSS has the following outline properties:
– outline-style
– outline-color
– outline-width CSS Outline Style
The outline-style property specifies the style of the outline, and can have one
– outline-offset of the following values:
dotted - Defines a dotted outline
– outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline 22
hidden - Defines a hidden outline
TECHNO INDIA UNIVERSITY
WEST BENGAL

<!DOCTYPE html> <body>


<h2>The outline-style Property</h2>
<html>
<p class="dotted">A dotted outline</p>
<head> <p class="dashed">A dashed outline</p>
<style> <p class="solid">A solid outline</p>
p {outline-color:red;} <p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color
value.</p>
p.dotted {outline-style: dotted;}
<p class="ridge">A ridge outline. The effect depends on the outline-color
p.dashed {outline-style: dashed;} value.</p>
p.solid {outline-style: solid;} <p class="inset">An inset outline. The effect depends on the outline-color
p.double {outline-style: double;} value.</p>
p.groove {outline-style: groove;} <p class="outset">An outset outline. The effect depends on the outline-color
value.</p>
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;} </body>
p.outset {outline-style: outset;} </html>
</style>
</head>

23
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Outline Width


• The outline-width property specifies the width of the outline, and can
have one of the following values:
– thin (typically 1px)
– medium (typically 3px)
– thick (typically 5px)
– A specific size (in px, pt, cm, em, etc)
p.ex1 {
border: 1px solid black; p.ex3 {
outline-style: solid; border: 1px solid black;
outline-color: red; outline-style: solid;
Check the outline-width: thin; outline-color: red;
} outline-width: thick;
Result }
p.ex2 {
border: 1px solid black; p.ex4 {
outline-style: solid; border: 1px solid black;
outline-color: red; outline-style: solid;
outline-width: medium; outline-color: red;
} outline-width: 4px;
}
24
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Outline Color


The outline-color property is used to set the color of the outline.
<!DOCTYPE html> </head>
<html>
<head> <body>
<style> <h2>The outline-color Property</h2>
p.ex1 { <p>The outline-color property is used to set the
border: 2px solid black; color of the outline.</p>
outline-style: solid; <p class="ex1">A solid red outline.</p>
outline-color: red; <p class="ex2">A dotted blue outline.</p>
} <p class="ex3">An outset grey outline.</p>
p.ex2 { </body>
border: 2px solid black; </html>
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style>
25
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Outline - Shorthand property


• The outline property is a shorthand property for setting the following
individual outline properties:
– outline-width
– outline-style (required)
– outline-color
• The outline property is specified as one, two, or three values from the
list above. The order of the values does not matter.
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

26
TECHNO INDIA UNIVERSITY
WEST BENGAL

Thank You

27

You might also like