Scribd
Upload
19 views

CSS Color and Layout Properties Session 6: Odule 06

This document covers CSS color, background, border, and box properties. It defines color and background properties that specify foreground and background colors and images. Border properties control the color, style, and width of borders. Shorthand properties allow setting multiple border properties at once. Box properties include margin and padding, which specify spacing around content using shorthand properties. The document provides examples of code for applying these various properties.

Uploaded by

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

CSS Color and Layout Properties Session 6: Odule 06

This document covers CSS color, background, border, and box properties. It defines color and background properties that specify foreground and background colors and images. Border properties control the color, style, and width of borders. Shorthand properties allow setting multiple border properties at once. Box properties include margin and padding, which specify spacing around content using shorthand properties. The document provides examples of code for applying these various properties.

Uploaded by

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

CSS Color and Layout Properties

odule 06
Session 6


Module Introduction
Color and Background Properties
CSS Border
Box Properties


Color and Background Properties
Explain the event handling
Explain the syntax of color properties
Explain the background properties


Event Handling
The event is an action
that can be notified by
the source of event to be
subscribers.
The events must be
handled by the event
handlers.
Some events: mouse
clicks, keystrokes,


Color Properties
Color properties
specifies the
foreground color of
an element.
Syntax:
color: <value>


Background Properties


Background Properties
body {
background-image: url(Greeting.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
}
div {
background-color: #FFFF00;
text-align: right;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<html>
<head>
<title>Welcome</title>
<link href="Background.css" rel="stylesheet" type="text/css/>
</head>
<body>
<h2>Welcome to FPT University.</h2>
<div><p>Dream of Innovation </p></div>
</body>
</html>


CSS Border
Describe border style properties
Describe border color properties
Describe border width properties
Describe shorthand border properties




Border Style Properties




Border Color, Border Width
Properties
.tip {
background-color: lightcyan;
border-top-color: #0000FF;
border-right-color: #FF0000;
border-bottom-color: #FF00FF;
border-left-color: #FFFF00;
border-style: double;
border-width: 20px;
}
img {
border-style: dashed;
border-color: #CC00FF;
border-top-width: 20px;
border-left-width: thick;
border-right-width: thin ;
}


Border Color Properties
<html>
<head>
<title>Welcome</title>
<link href="BorderColor.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>CSS style border properties</h2>
<div class="tip">
<ol>
<li><b>Style </b>sets the style appearance of the border.</li>
<li><b>Width </b>sets the thickness of the elements border</li>
<li><b>Color </b>sets the color of the border.</li>
</ol>
</div>
</body>
</html>



Shorthand Border Properties
.myshorthand {
border-top: dashed double #00FF00;
border-bottom: #FF0000 20 double;
border-right: dotted #0000FF thick;
border-left: inset medium rgb(255,0,255);
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<html>
<head>
<title>Welcome</title>
<link href="ShorthandBorderColor.css" rel="stylesheet" type="text/css">
</head>

<body>
<h2>Using Shorthand border properties</h2>
<img class="myshorthand" src="Cup.jpg" width="200" height="200" />
</body>
</body>
</html>


Box Properties: Margin


Box Properties: Padding


Summary
CSS provides various properties that allow to
define foreground and background color.
CSS provides background properties that
specify the background color and image for
Web pages.
CSS provides border properties that allow to
create borders around text and images to give
effective pleasing. Border properties specify the
color, type and width of the border.


Summary
The Box property includes: Margin and
Padding properties.
The Margin property is a shorthand property
that specifies the all four margin around the
content just one declaration.
The Padding property is a shorthand property
that specifies the padding for all the side in
just one declaration.


Building Dynamic Websites/Session 1/ 16 of 16

You might also like