Assignment No:5
Aim: CSS
Problem statement:
Students are expected to design minimum of 5 web pages using CSS for the problem statement
chosen in assignment no. 4. Apply CSS properties Border, margins, Padding, Navigation, dropdown
list to page.
Theory:
CSS
• Cascading Style Sheets (CSS) form the presentation layer of the user interface.
• Structure (XHTML)
• Behavior (Client-Side Scripting)
• Presentation (CSS)
Types of CSS :
1. External style sheet
2. Embedded styles
3. Inline styles
• Inline Style -
- Add styles to each tag within the HTML file
- Use it when you need to format just a single section in a web page
- Example
<h1 style = “color : red ; font-family : sans-sarif”>IU</h1>
• Internal Stylesheet Embedded -
- A style is applied to the entire HTML file
- Use it when you need to modify all instances of particular element (e.g., h1) in a web page
- Example
<style>h1{ color : red ; font-family : sans-serif }</style>
• External Stylesheet -
- External style sheets
- An external style sheet is a text file containing the style definition (declaration)
- Use it when you need to control the style for an entire web site
- Example
h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif} - Save this in a new document
using a .css extension.
CSS Syntax :
A CSS rule set consists of a selector and a declaration block:
The selector points to the HTML element you want to style. The declaration block contains one or
more declarations separated by semicolons. Each declaration includes a property name and a value,
separated by a colon.
The CSS Box Model
All HTML elements can be considered as boxes. 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 HTML elements, and it consists of:
margins, borders, padding, and the actual content.
It allows us to place a border around elements and space elements in relation to other elements.
The image below illustrates the box model.
Property Description :
border all the individual border properties in one property. This is called
shorthand property
border- none none| dotted | dashed | solid | double | groove | ridge | inset | outset
border-width is used to set the width of the border. The width is set in pixels, or b
using one of the three pre-defined values: thin, medium, or thick.
border- color is used to set the color of the border
Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent. The top, right, bottom, and left margin can be
changed independently using separate properties. A shorthand margin property can also be used, to
change all margins at once. It is also possible to use negative values, to overlap content .
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element
Padding
The padding clears an area around the content (inside the border) of an element. The padding is
affected by the background color of the element. The top, right, bottom, and left padding can be
changed independently using separate properties. A shorthand padding property can also be used, to
change all paddings at once.
Navigation There are two ways to create a horizontal navigation bar. Using inline or floating list
items. The display property of css is used for navigation bar. The value block will create a vertical
navigation bar and inline will create a horizontal navigation bar.
Example:
Display: inline | block
Drop Down list can be created by using HTML onordered lists tags<ul>and list items<li>. One can
set below CSS properties for lists.
Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker Eg.
url(“image.gif”);
list-style-position Specifies if the list-item markers should appear
inside or outside the content flow Inside | outside |
initial
list-style-type Specifies the type of list-item marker
Circle | square | decimal | lower-alpha | lower-greek |
lower-latin | lowerroman | upper-alpha | upper-latin |
upper-roman
Conclusion :
Various CSS properties have been studied and used for creation of interactive web page.
