MODULE 4
CSS to text, box model, template layout model, display of an element
using CSS, positioning an element, list styles, table layouts.
1) CSS TO TEXT:
Web font is a feature that allows users to write text in fonts that are
not installed in user’s computer.
It is introduced in the latest version of CSS3, it eliminates the
restriction of using the limited number of fonts that are installed on
user’s computer.
Users can also use fonts that are available online by specifying their
URL in the style sheet.
In CSS3, we can define the name of the desired font by using the
@font-face keyword in the style sheet.
SYNTAX:
@font -face{
Font-family: <name>
Src: <source>
Applying CSS to text:
CSS allows to apply and modify the styles already applied on the text
of a web page.
We can change the color and the direction of the text.
CSS properties allows to change the indentation of the first line of a
text to give it a paragraph look.
Users can also Underline, overline, or strike out the text, as per
requirement.
EXAMPLE:
<!doctype html>
<html>
<head>
<title> CSS to text</title>
<style>
h1{ text-shadow: #ff0000 2px -12px 1px;}
</style>
</head>
<body>
<h1> head with text shadow</h1>
<p style="text-indent:20%"> the first line of the paragraph is indented by
20% some text not indented</p>
<p style="text-decoration:none">
working of different text decoration property
</p>
<p style="text-decoration:underline">
working of different text decoration property
</p>
<p style="text-decoration:overline">
working of different text decoration property
</p>
<p style="text-decoration:line-through">
working of different text decoration property
</p>
<p style="-webkit-text-stroke-color:green; -webkit-text-fill-color:red; -
webkit-text-stroke-width:1px";>
text stroke property of CSS is used to display or highlight the
outline of a text in a web page.
</p>
</body>
</html>
Wrapping text
<!doctype html>
<html>
<head>
</head>
<body>
<h1>wrapping text is used to wrap the text to the next line</h1>
<p style="font-size:15px; height:1.1em; text-overflow:hidden;">
here the text is wrapped by using text-overflow property of the
CSS,,,,,,,,,,,,,,,,,,,,,,,,,
here the text is wrapped by using text-overflow property of the CSS.............
here the text is wrapped by using text-overflow property of the CSS........
here the text is wrapped by using text-overflow property of the CSS.
here the text is wrapped by using text-overflow property of the CSS.
....... here the text is wrapped by using text-overflow property of the CSS.
</p><br>
<p style="font-size:15px; height:1.1em; text-text-overflow:clip; white-
space:nowrap;overflow:hidden">
here the text is wrapped by using text-overflow property
of the CSS</p>
<p style="font-size:15px; text-overflow:ellipsis;white-
space:nowrap;overflow:hidden;height:1.1em; ">
here the text is wrapped by using text-overflow property of the
CSS
</p>
</body>
</html>
2) BOX MODEL,
CSS treats an HTML document as a hierarchical tree of elements,
where each element can have 0 or more child element arranged in
an ordered way.
The topmost element of this tree is called as the root element or
the parent element.
These elements display their content at a specific position, which
is defined by using CSS properties.
CSS converts the data of HTML element in the form of rectangular
boxes, by using a layout model, called the box model, to set the
design and layout of the HTML documents.
Box model determines how HTML elements are displayed as
boxes.
The box model allows placing a border around the elements and
provides space between elements.
Areas of box
Content area- Displays the content of a document, such as text and
images. This is bounded by a rectangle, which is called as the content
edge. Content area always appears inside the padding area.
Padding area - specifies the area around the content area. This is
bounded by the padding edge. Outside the padding is the border area
and the outside boundary of that area is the order edge.
Outside the border is the margin area whose outer edge is called the
margin edge.
Border area- specifies the area around the padding area. This is
bounded by the border edge.
Margin area- - specifies the area around the border area. This is
bounded by the margin edge.
Types of boxes in box model
Block-level Box- represents a box to show a paragraph.
Line box- - represents a box to show a line of a text.
Inline-level box- - represents a box to show the words of a lines.
Various aspects of box model
a) Box Dimensions:
All HTML elements in a box model are represented as
rectangular boxes.
The dimension of the box model is calculated by using height
and width of the content area.
Each box is associated with the content and many optional
areas, such as padding border, and margin.
The perimeter of the content, border, and margin is called an
edge
Each box in the box model has the four edges-
CONTENT EDGE: surrounds a rectangle specified by the width
and height of the box. This is also called the inner edge. The four
content edges represent the content area.
PADDING EDGE: surrounds the padding box. If the padding has
0 width, the padding edge becomes a content edge. The four padding
edges represent the padding area of the box.
BORDER EDGE: surrounds the border of the box. If the border
has 0 width, the border edge becomes a padding edge. The four
border edges represent the border area of the box.
MARGIN EDGE: surrounds the margin of the box. If the border
has 0 width, the margin edge becomes a border edge. The margin
edge is also called as outer edge. The four margin edges represent the
margin area of the box.
b) The padding properties
Padding(space) in the box model specifies the distance
between the border of an element and the content within it.
The padding is affected by the background color of an element.
The value of padding cannot be negative.
The shorthand property in padding is used to change all the
padding properties, such as padding-top, padding-bottom,
padding-right, and padding-left at once.
SYNTAX: padding: value;
Values are as follows:
length - specifies a padding in px, pt, cm, etc.
Percentage (%) - specifies a padding in % w.r.t the width of a parent
block.
Auto- specifies the default padding from the top, bottom, left, or right
direction.
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right
padding of 30px, a bottom padding of 50px, and a left padding of
80px.
</div>
</body>
</html>
c) The border properties
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.
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:
SYNTAX: border-width:value;
The border can have either of the following value:
Thin- defines a thin border.
Medium- defines a medium border.
Thick- defines a thick border.
Length- defines the thickness of the border.
Inherit- defines that the width is inherited from the parent element.
<!DOCTYPE html>
<html>
<head>
<style>
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;
p.five {
border-style: double;
border-width: 15px;
p.six {
border-style: double;
border-width: thick;
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work
if it is used alone. Always specify the "border-style" property to
set the borders first.</p>
</body>
</html>
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
p.two {
border-style: solid;
border-color: green;
p.three {
border-style: dotted;
border-color: blue;
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used
alone. Use the "border-style" property to set the borders first. </p>
</body>
</html>
The border-style property:
This property indicates the format of the border, such as solid, dashed, or
double.
Syntax: border-style: value;
CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider
when dealing with borders.
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
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid red;
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-
style, and border-color.</p>
</body>
</html>
Border radius
the border-radius property defines the radius of the element's corners.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p>Add rounded corners for an element with a specified background
color:</p>
<div id="rcorners">Rounded corners!</div>
</body>
</html>
Border image
This enables user to insert images in border edges and border
corners.
This don’t affect the layout of a box and its content.
The border images properties include the following properties
(i)Border-image-source: specifies an image instead of using border
style. If the value is none, the specified border styles will be used.
Syntax: border-image-source: none| <image>;
(ii)Border-image-slice: specifies inward offsets from the top, right,
bottom, and left edge of an image. The image is divided into nine
regions: four corners, four edges, and middle.
Syntax: border-image-slice: [<number> | <percentage>] { 1,4} &&
fill?;
<number> represents pixels in the image
<percentage> related to the size of the image.
(iii)Border-image-width: specifies the width of an image used for
the border.
Syntax: border-image-width: [<length>| <percentage>|<number>|
auto] {1,4};
<length> specifies the length of an image,
<percentage> specifies the size of the border image area.
<number> represents multiples of the corresponding border-width,
and the auto keyword specifies the default available size for the
image.
(iv)Border-image-outset specifies the value for the border image
area that can be extended beyond the border box on the top, right,
bottom, and left sides, respectively.
Syntax: border-image-outset: [<length> | <number>]{1,4};
(v)Border-image-repeat : specifies that the images for the sides and
the middle part of the border image are scaled and tiled.
Syntax: border-image-repeat[stretch |repeat | round ]{1,2};
Border- shadow: The CSS box-shadow property is used to apply one or
more shadows to an element
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
Border margin it is used to attach one or more shadow to a box.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 50px;
border: 1px solid #4CAF50;
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of50.</div>
</body>
</html>
The width and height properties
The CSS height and width properties are used to set the height and width of
an element.
The CSS max-width property is used to set the maximum width of an
element
CSS height and width Values
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in
percent (%) of the containing block, or set to none (this is default. Means
that there is no maximum width).
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of
500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
All CSS Dimension Properties
Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared
element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it
occurs in the text). This is default
inherit - The element inherits the float value of its parent
marquee
The <marquee> tag is a container tag of HTML is implemented for
creating scrollable text or images within a web page from either left
to right or vice versa, or top to bottom or vice versa.
But this tag has been deprecated in the new version of HTML, i.e.,
HTML 5.
The different attributes of <marquee> tag are:
Attribute Description
Width provides the width or breadth of a marquee. For
example width="10" or width="20%"
Height provides the height or length of a marquee. For
example height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up or down
scrolldela provides a feature whose value will be used for delaying among each jump.
y
Loop provides how many times the marquee will loop
bgcolor provides a background color
Vspace provides a vertical space and its value can be
like: vspace="20" or vspace="30%"
hspace provides a horizontal space and its value can be
like: hspace="20" or hspace="30%"
<html>
<head>
<title>Example for HTML Marquee Tag</title>
</head>
<body>
<marquee width="40%" direction="right" height="30%">
This is sample scrolling text.
</marquee>
</body>
</html>
3) TEMPLATE LAYOUT MODEL,
CSS 3 introduces a new layout model, called the template layout,
which allows user to present the content contained in element into
slots.
The slots are the placeholder that can be created by declaring a grid
structure using certain alphabetical characters, as shown below.
Using template layout model, user can divide the layout of a web page
or a form in two parts
1) grid of the page or window
2) fonts, indents, and color of the text and other objects.
It defines a layout policy, template-based positioning, to give an
invisible grid to an element for aligning with other elements
An element is mapped to its slot in a template by using the position
property.
The template itself is specified by using the display property.
Display property: it is used to set the layout for the content of
elements in the rows and columns format, it provides a template
value to an element which is called a template element.
Syntax -- Display: value;
Positioning property: it is used to map the element slots with the
element, it specifies the rows and columns of a template in which an
element will be placed.
4) DISPLAY OF AN ELEMENT USING CSS,
CSS allows user to control the display of an HTML element by using
the display visibility property
The display property specifies how to display an element.
The visibility property specifies whether the element should be
visible or hidden.
In HTML, the default display property value is taken from the HTML
specifications or from the browser/user default style sheet.
Css allows the user to display the HTML content as inline or block
If the display value is block it takes the full width of a web page and is
preceded and followed by a line break
Inline element does not have any line break associated with it.
Values of DISPLAY property
Value Description
inline Displays an element as an inline element (like <span>). Any height
and width properties will have no effect
block Displays an element as a block element (like <p>). It starts on a
new line, and takes up the whole width
inline- The element is displayed as an inline-level table
table
list-item Let the element behave like a <li> element
table Let the element behave like a <table> element
table- Let the element behave like a <caption> element
caption
table- Let the element behave like a <col> element
column
table-row Let the element behave like a <tr> element
none The element is completely removed
inherit Inherits this property from its parent element.
Values of visibility
Value Description
visible Default value. The element is visible
hidden The element is hidden (but still takes up space)
collaps Only for table rows (<tr>), row groups (<tbody>),
e columns (<col>), column groups (<colgroup>). This
value removes a row or column
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
p{
display: inline;
}
span{
display: block;
}
h1{
display: none;
}h2.a{visibility: visible;}
h2.b{visibility: hidden;}
</style>
</head>
<body>
<h1>h1 has NONE value of display property so it is not
displayed on the web page</h1>
<p> since Paragraph is INLINE, </p>
<p>both paragraph element will appear on the same line
</p><br> <br>
<span>span elements have display:BLOCK property</span>
<span>therefore they appear in a block form with line breaks
before and after them</span>
<h2 class="a"> heading 2</h2>
<h2 class="b"> heading is hided</h2>
</body>
</html>
5) POSITIONING AN ELEMENT
CSS provides a property, position which controls the position of
elements with respect to the normal flow of the content on a
web page.
Position property can be applied on any HTML element such as
P DIV, TABLE, FORM, and TEXTAREA.
SYNTAX: position:[value];
Values can be relative- specifies relative position of an element
w.r.t the normal flow of the content
absolute- specifies the position of a block w.r.t the normal flow
of the content
fixed- fixes position of an element w.r.t the normal flow of the
content
static- specifies normal position of an
inherit- specifies that an element uses the same settings of
position as parent element
Offset an element in the top, bottom, left, and right direction of
a web page
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
div.fixed {
position: fixed;
bottom:0 ;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="static">
This div element has position: static;
</div> <br>
<div class="relative">
This div element has position: static;
</div> <br>
<div class="fixed">
This div element has position: fixed;
</div> <br>
<div class="absolute">This div element has position:
absolute;</div>
</body>
</html>
6) list styles: A list a series of items belonging to a specific category, such
as colors, vehicles, and countries.
Depending on the order in which the items of a list are arranged, the
list can be categorized into ordered in which items are arranged in a
sequential order
and in unordered list there is no specific order to place the items
LIST STYLE properties
list-style-type
this property is used to modify the default appearance of list-marker
in HTML list structure.
Syntax : list-style-type: <glyph> | <algorithm> | <symbolic>
<glyph> includes values that insert their corresponding
symbols for an unordered list
The values of <glyph> such as none, disc , circle and square are
used as marker for a list item
Example:
Ul.l1{list-style-type:circle;}
Ul.l2{list-style-type:square;}
<algorithm> it includes values that displays their corresponding symbols
for an ordered list
Decimal- Marker is displayed as a decimal number
Lower-alpha: Marker is displayed in the lower alphabet style such as
a, b, c
Upper-alpha: Marker is displayed in the upper alphabet style such as
A, B, C …
Lower-roman: Marker is displayed in the lower roman style such as
i, ii, iii,
Upper-roman: Marker is displayed in the upper roman style such as
I, II, III,
<symbolic> includes the values, asterisks, and footnotes.
list-style-position
it is used to specify the position of a list item marker in a list.
It takes two values either inside or outside
The Inside value indents the marker in the inside direction with
context to the other elements of the HTML document
The Outside value displays marker to the outside or left of the list
item. By default position is outside
Syntax: list-style-type: inside| outside
list-style-image: it used to display an image as a list item
marker, URL of the image is given in the list-style-image
syntax: ul{ list-style-image: <url>}
example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: url("sqpurple.gif");
}
ul.b {
list-style-position: outside;
list-style:lower-roman;
ul.c {
list-style-position: inside;
list-style:lower-alpha;
</style>
</head>
<body>
<h1>The list-style Property</h1>
<p>The list-style is a shorthand property for all the list
properties.</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<h2>list-style-position: outside (default):</h2>
<ul class="b">
<li>Coffee </li>
<li>Tea - </li>
<li>Coca Cola -</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="c">
<li>Coffee </li>
<li>Tea </li>
<li>Coca Cola </li>
</ul>
</body>
</html>
7) table layouts
this property specifies the way in which a table should be displayed in a
web browser.
In CSS, the table layout property allows flexibility in positioning the tables,
which means we can easily move and place tables at different locations
throughout the webpage.
Syntax: table-layout: auto|fixed|initial|inherit;
Value Description
auto Browsers use an automatic table layout
algorithm. The column width is set by the
widest unbreakable content in the cells.
fixed Sets a fixed table layout algorithm. The table
and column widths are set by the widths of
table and col or by the width of the first row
of cells.
initial Sets this property to its default value.
inheri Inherits this property from its parent
t element.
The Caption-side property:
It is used to specify the position of a table caption.
It is a small description that is provided with a table
It displays the table caption on the top as well as at the bottom of the
table.
Syntax: table { caption- side: bottom; }
The border-collapse property: it define a way in which a border should
be displayed around a table cell.
Syntax: table{border- collapse: separate; }
The border-spacing property: it is used to specify the amount of space
between the borders of adjacent table cells.
Syntax: border-spacing: 10px 50px;
First value 10px specifies horizontal spacing and second value 50px
specifies the vertical spacing
The empty-cell property: a cell does not contain any content is known as
empty cell. Syntax: table{empty-cells: show; }
