Scribd
Upload
19 views

3 - Chapter 3 Part I - CSS

1. CSS (Cascading Style Sheets) is a styling language used to describe the presentation and formatting of HTML documents. 2. CSS has selectors that indicate which HTML elements to style and declarations that contain property-value pairs to apply styles like color, font-size, background-image. 3. Styles can be added to HTML using inline, internal and external CSS with external being best for reuse across multiple pages.

Uploaded by

yoniashenafi22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

3 - Chapter 3 Part I - CSS

1. CSS (Cascading Style Sheets) is a styling language used to describe the presentation and formatting of HTML documents. 2. CSS has selectors that indicate which HTML elements to style and declarations that contain property-value pairs to apply styles like color, font-size, background-image. 3. Styles can be added to HTML using inline, internal and external CSS with external being best for reuse across multiple pages.

Uploaded by

yoniashenafi22
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Cascading Style Sheet (CSS)

Internet Programming I: Chapter 3 – Part I

ADDIS ABABA SCIENCE AND TECHNOLOGY UNIVERSITY


Department of Software Engineering

Main Source: https://www.javatpoint.com/


Introduction to CSS
• CSS is a styling language
• It is used to describe the look and formatting of a document written in
markup language
• CSS Syntax
• Selector: indicates the HTML element you want to style
• any tag like <h1>, <title> etc
• Declaration Block: can contain one or more declarations
separated by a semicolon
• color: yellow;
• font-size: 11 px;
• Each declaration contains a property name and value,
separated by a colon
• Property: A Property is a type of attribute of HTML
element
• E.g. color, border etc.
• Value: Values are assigned to CSS properties
• E.g. value "yellow" is assigned to color property

11/19/2022 AASTU | Dept. of SWENG - 2015EC 2


<html>
CSS Selectors <head>
<style>
• Element Selector: selects the *{
HTML element by name color: green;
• E.g. font-size: 20px;
p{ }
text-align: center;
#para1 {
color: blue;
}
text-align: center;
color: blue;
• Id Selector: selects the id attribute }
of an HTML element to select a </style>
specific element </head>
• It is written with the hash <body>
character (#), followed by the id <p id="para1">Hello Javatpoint.com</p>
of the element
• Universal selector (*): used as a <p> This paragraph will not be affected.
wildcard character. It selects all </p>
</body>
the elements on the pages. </html>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 3


<html>
<head>
CSS Selectors cont’d <style>
.center {
• Class selector: selects HTML text-align: center;
elements with a specific color: blue; }
class attribute p.center {
• It is used with a period text-align: center;
character . (full stop symbol) color: blue; }
followed by the class name h1,h2,p {
• Use element name with text-align: center;
class selector to affect color: blue; }
specific element </style>
</head>
• Group selector: used to
select all the elements with <body>
the same style definitions <h1 class="center">This heading is blue and
and minimize the code center-aligned.</h1>
• Commas are used to separate <p class="center">This paragraph is blue an
each selector in grouping d center-aligned.</p>
</body>
</html>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 4


Adding CSS
• There are three ways to insert CSS in HTML documents
1. Inline CSS: used to apply CSS on a single line or element
• E.g. <p style="color:blue">Hello CSS</p>
2. Internal CSS: used to apply CSS on a single document or page
• It can affect all the elements of the page. It is written inside the style tag within
head section of html
<style>
p{color:blue}
</style>

3. External CSS: used to apply CSS on multiple pages or all pages


• Here, we write all the CSS code in a CSS file with .css extension example
style.css

style.css to link this style.css file to the html pages

p{color:blue} <link rel="stylesheet" type="text/css" href="style.css">

11/19/2022 AASTU | Dept. of SWENG - 2015EC 5


Disadvantages of Inline CSS
• You cannot use quotations within inline CSS
• If you use quotations the browser will interpret this as
an end of your style value
• These styles cannot be reused anywhere else
• These styles are tough to be edited because they
are not stored at a single place
• It is not possible to style pseudo-codes and pseudo-
classes with inline CSS
• Inline CSS does not provide browser cache
advantages

11/19/2022 AASTU | Dept. of SWENG - 2015EC 6


Comments
• CSS comments are written within /*............*/

<style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 7


CSS Background
• Background property is used to define the background effects on
element
• Background-color: used to set the background color of an element
Syntax
element {
background-color: color name| transparent | initial | inherit;
}

• Example
background-color: #988989; background-color: #988989;
• Background-image: used to set an image as a background of an element

11/19/2022 AASTU | Dept. of SWENG - 2015EC 8


CSS Background cont’d
• Background-repeat: by default, the background-image property repeats
the background image horizontally and vertically
• background-repeat: repeat-x; => background image repeated horizontally
only
• background-repeat: repeat-y; => background image repeated vertically only
• background-repeat: no-repeat; => stop background repeat
• Background- • scroll: It is the default value that prevents the element
attachment: from scrolling with the contents, but scrolls with the page
• used to specify that • fixed: the background image doesn't move with the
the background element
image is fixed or • local: if the element has a scrolling mechanism, the
scroll with the rest background image scrolls with the content of the element
of the page in the • initial: It sets the property to its default value
browser window • inherit: It inherits the property from its parent element
Syntax
background-attachment: scroll | fixed | local | initial | inherit;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 9


CSS Background cont’d
• Background-size: used to set the size of a background image of an element
• Can be defined using length, percentage, or keyword values
Syntax
background-size: auto | length | cover | contain | initial | inherit;

• auto: the default value, which displays the background


image in its original size Example
• length: set width and height of background image #div1{
• percentage: defines width and height of the background-image: url('lion.png');
background image to the percentage (%) of the background-size: auto; }
background positioning area #div2{
• cover: used to resize the background image to cover
background-image: url('lion.png');
the entire container
• contain: Without stretching or cropping, it resizes the background-size: 150px 150px; }
background image to ensure the image is completely #div3{
visible background-image: url('lion.png');
• initial: It sets the property to its default value background-size: 30%; }
• inherit: It inherits the property from its parent element

11/19/2022 AASTU | Dept. of SWENG - 2015EC 10


CSS Background cont’d
• Background-clip: limits the area in which the background
color or image appears by applying a clipping box
• Anything outside the box will be discarded and invisible
• Syntax: background-clip: border-box| padding-box| content-
box| inherit;
• Example

11/19/2022 AASTU | Dept. of SWENG - 2015EC 11


CSS Background cont’d
• Background-blend-mode: defines how the background image of an element blends
with the background color of the element
• We can blend the background images together or can blend them with background-color
• Syntax: background-blend-mode: normal | multiply | screen | color-dodge |
difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-
light | exclusion | hue | color-burn | color;

Original Image: background: url("image1.png"), url("image2.png");

11/19/2022 AASTU | Dept. of SWENG - 2015EC 12


CSS Background cont’d
• Background-blend-mode

11/19/2022 AASTU | Dept. of SWENG - 2015EC 13


CSS Background cont’d
• Background-blend-mode

11/19/2022 AASTU | Dept. of SWENG - 2015EC 14


CSS Background cont’d
• background-origin: It specifies the
background position area, i.e., the origin of
a background image
• This CSS property will not work when the
value of the background-attachment is set to
be fixed
• The background-origin property is similar
to the background-clip property, but it
resizes the background instead of clipping
it
• By default, the origin of an element is the
top-left corner of the screen
• Syntax: background-origin: padding-box |
border-box | content-box | initial | inherit;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 15


CSS Border
• Border style: used to specify the border type which you want to display on the web page
• Syntax: border-style: solid | groove ridge inset outset double dotted dashed none;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 16


CSS Border cont’d
• border-width: used to set the border's width in
pixels
• You can also use one of the three pre-defined values,
thin, medium or thick to set the width of the border
• Example:
• border-width: medium;
• border-width: 5px;
• border-color: three methods to set the color of the
border
• Name: e.g. border-color: red;
• RGB: e.g. border-color: rgb(34, 44, 233);
• Hex: e.g. border-color: #98bf21;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 17


CSS Border cont’d
• border-radius: sets the rounded borders and
provides the rounded corners around an element,
tags, or div
• border-radius is shorthand for border top-left-
radius, border-top-right-radius, border-bottom-
right-radius and border-bottom-left-radius
• We can specify the border for all four corners of the
box in a single declaration using the border-radius
• The values of this property can be defined in
percentage or length units
• Syntax
• border-radius: 1-4 length | % / 1-4 length | % | inherit |
initial;
11/19/2022 AASTU | Dept. of SWENG - 2015EC 18
CSS Border cont’d

11/19/2022 AASTU | Dept. of SWENG - 2015EC 19


CSS Border cont’d
• border-radius: We can specify separate horizontal and
vertical values by using the slash (/) symbol
• The values before the slash (/) is used for the horizontal radius and
• The values after the slash (/) are for the vertical radius

11/19/2022 AASTU | Dept. of SWENG - 2015EC 20


CSS Border cont’d
• border-collapse: used to set the border of the table cells
• specifies whether the table cells share the separate or common border
• This property has two main values that are separate and collapse
• Separate: the distance between the cells can be defined using the border-
spacing property
• Collapse: then the inset value of border-style property behaves like groove,
and the outset value behaves like ridge
• Syntax
• border-collapse: separate | collapse | initial | inherit;

#t1{ border-collapse: separate; } #t2{ border-collapse: collapse; }

11/19/2022 AASTU | Dept. of SWENG - 2015EC 21


CSS Border cont’d
• border-spacing: used to set the distance between the borders of the
adjacent cells in the table
• It applies only when the border-collapse property is set to separate
• It can be defined as one or two values for determining the vertical and
horizontal spacing.
• one value sets both horizontal and vertical spacing
• two-value, the first one is used to set the horizontal spacing, and the
second value sets the vertical spacing
• Syntax
• border-spacing: length | initial | inherit;

#t1{ #t2{
border-collapse: separate; border-collapse: separate;
border-spacing: 45px; border-spacing: 20pt 1em;
} }

11/19/2022 AASTU | Dept. of SWENG - 2015EC 22


CSS Border cont’d
• border-image: defines an image to be used as the element's
• The border-image property can be applied to all elements except
the elements of the internal table (such as tr, th, td) when border-
collapse is set to collapse
• It is the shorthand property for border-image-source,
border-image-slice, border-image-width, border-image-
outset, and border-image-repeat
• Syntax
• border-image: source slice width outset repeat | initial | inherit;
border-image: url('border.png')
60 / 20px 20px round;

border-image: url('diamond.png') 43 / 10px 15px


round stretch;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 23


CSS Border cont’d
border-image: url('diamond.png')
40 round stretch;

border-image: linear-gradient(orange,
yellow, green) 40 / 30px 10px stretch;

border-image: repeating-linear-gradient(50deg, blue,


yellow, lightgreen 20px) 30 / 20px 30px round;

border-image: radial-gradient(circle, yellow,


magenta, blue) 30 / 15px repeat;

border-image: radial-gradient(farthest-side,
red, yellow, green) 30 / 15px round;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 24


CSS Display
• Display: used to control the layout of the element
• Syntax display: inline | inline-block | block | run-in | none;
Property-value Description
flex It is used to display an element as an block-level flex container. It is new in css3.

inline-flex It is used to display an element as an inline-level flex container. It is new in css3.

inline-table It displays an element as an inline-level table.


list-Item It makes the element behave like a <li> element.
table It makes the element behave like a <table> element.
table-caption It makes the element behave like a <caption> element.
table-column-group It makes the element behave like a <colgroup> element.
table-header-group It makes the element behave like a <thead> element.
table-footer-group It makes the element behave like a <tfoot> element.
table-row-group It makes the element behave like a <tbody> element.
table-cell It makes the element behave like a <td> element.
table-row It makes the element behave like a <tr> element.
table-column It makes the element behave like a <col> element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 25


CSS Cursor e.g. <div style = "cursor:help">help</div>
• It is used to define the type of mouse cursor when the mouse pointer is on the element
Values Usage
alias It is used to display the indication of the cursor of something that is to be created.
auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be horizontally resized.
cell The cursor will represent that a cell or the collection of cells is selected.
context-menu It indicates the availability of the context menu.
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
e-resize It represents the east direction and indicates that the edge of the box is to be shifted towards right.
ew-resize It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize It represents the north direction that indicates that the edge of the box is to be shifted to up.
ne-resize It represents the north/east direction and indicates that the edge of the box is to be shifted towards up and right.
move It indicates that something is to be shifted.
help It is in the form of a question mark or ballon, which represents that help is available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
s-resize It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize It is used to indicate that the row can be vertically resized.
Se-resize It represents the south/east direction, which indicates that an edge box is to be moved down and right.
Sw-resize It represents south/west direction and indicates that an edge of the box is to be shifted towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
w-resize It indicates the west direction and represents that the edge of the box is to be shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
11/19/2022 AASTU | Dept. of SWENG - 2015EC 26
Zoom-out It is used to indicate that something can be zoomed out.
CSS Float
• Float: is a positioning property used to push an element to
the left or right, allowing other element to wrap around it
• It is generally used with images and layouts

• Syntax
• float: none | right | left | initial | inherit;

11/19/2022 AASTU | Dept. of SWENG - 2015EC 27


CSS Font
• Font property is used to control the look of texts
Font family: p { font-family: monospace;}
Font Size:
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
Font
<p style="font-size:xx-large;"> This font size Weight: large. </p>
is extremely
<p style="font-size:smaller;"> This font size<pisstyle="font-weight:bold;">This
smaller. </p> font is bold.</p>
<p style="font-size:larger;"> This font size <p style="font-weight:bolder;">This
is larger. </p> font is bolder.</p>
<p style="font-size:200%;"> This font size <p style="font-weight:lighter;">This
is set on 200%. </p> font is lighter.</p>
<p style="font-size:20px;"> This font size is<p20style="font-weight:100;">This
pixels. </p> font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
Font Style: <p style="font-weight:300;">This font is 300 weight.</p>
h2 { font-style: italic; } <p style="font-weight:400;">This font is 400 weight.</p>
h3 { font-style: oblique; } <p style="font-weight:500;">This font is 500 weight.</p>
h4 { font-style: normal; } <p style="font-weight:600;">This font is 600 weight.</p>
Font Variant: <p style="font-weight:700;">This font is 700 weight.</p>
p { font-variant: small-caps; } <p style="font-weight:800;">This font is 800 weight.</p>
h3 { font-variant: normal; } <p style="font-weight:900;">This font is 900 weight.</p>
11/19/2022 AASTU | Dept. of SWENG - 2015EC 28
CSS Font cont’d
• font-stretch: allows us to select a normal, expanded, or
condensed face from the font's family
• Syntax
• font-stretch: normal | semi-condensed | condensed | extra-
condensed | ultra-condensed | semi-expanded | expanded | extra-
expanded | ultra-expanded

11/19/2022 AASTU | Dept. of SWENG - 2015EC 29


• Hover: the :hover selector is for selecting the elements when we move the mouse
on them
• Syntax
• :hover { css declarations; }
• Important: used to give more importance compare to normal property
• Syntax
element {
font-size: 14px !important;
color: blue !important; ...
}
• Line height: used to define the minimal height of line boxes within the element
value description

normal This is a default value. it specifies a normal line height


number It specifies a number that is multiplied with the current font size to set the line height
length It is used to set the line height in px, pt,cm,etc
% It specifies the line height in percent of the current font
initial It sets this property to its default value
inherit It inherits this property from its parent element

11/19/2022 AASTU | Dept. of SWENG - 2015EC 30


• Opacity: used to specify the transparency of an element
(clarity of the image)
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
• Overflow: specifies how to handle the content when it
overflows its block level container
• Syntax
• overflow: visible | hidden | auto| inherit | initial | scroll;
• Filter: are used to set visual effects to text, images, and
other aspects of a webpage
• Syntax
• filter: none | invert() | drop-shadow() | brightness() | saturate() | blur()
| hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();

11/19/2022 AASTU | Dept. of SWENG - 2015EC 31


Filter example

11/19/2022 AASTU | Dept. of SWENG - 2015EC 32


CSS Box Model
• The components that can be depicted on the web page
consist of one or more than one rectangular box

11/19/2022 AASTU | Dept. of SWENG - 2015EC 33


• Margin: used to define the space around elements
Property Description

margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.

Value Description Margin Values Example


auto This is used to let the browser calculate a margin. .myBox {
length It is used to specify a margin pt, px, cm, etc. its margin-top: 50px;
default value is 0px. margin-bottom: 50px;
margin-right: 100px;
% It is used to define a margin in percent of the margin-left: 100px;
width of containing element. }
inherit It is used to inherit margin from parent element.
11/19/2022 AASTU | Dept. of SWENG - 2015EC 34
• Padding: used to define the space between the element content and
the element border
Property Description

padding It is used to set all the padding properties in one declaration.


padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.

• Padding Values Example


p.padding {
Value Description padding-top: 50px;
padding-right: 100px;
length It is used to define fixed padding in pt,
padding-bottom: 150px;
px, em etc.
padding-left: 200px;
% It defines padding in % of containing }
element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 35


CSS Width and Height
• Width property is used to set the width of the content area of an element
• Height property sets the height of an element
• Syntax Example
• width: auto | length | initial | inherit; #auto{
• height: auto | length | initial | inherit; height: auto;
width: 275px;
border: 2px solid blue;
Value Description }
auto It is a default value. Using this value browser is responsible for
calculating the width/height of the element. Negative values are not
allowed.
length It specifies the width/height of an element using the length units such
as px, cm, pt, etc. Negative values are not allowed.

% It defines the width/height of the container in %. Negative values are


not allowed.
initial It is used to set the property to its default value.
inherit It is used to inherit the property from its parent element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 36


CSS Position
• position: is used to set position for an element
• it is also used to place an element behind another and
also useful for scripted animation effect
• fixed positioning property helps to put the text
fixed on the browser

11/19/2022 AASTU | Dept. of SWENG - 2015EC 37


CSS Position example
• fixed positioning property helps to put the • sticky property is used to set the
text fixed on the browser
position for an element
p.pos_fixed { position: fixed;
• It is also used to place an item behind
top: 50px; another element and also useful for
right: 5px; the scripted animation effect
color: blue; } • The "position: sticky;" is used to
• relative positioning property is used to set position the element based on the
the element relative to its normal position scroll position of the user

h2.pos_right { position: relative; <style>


body{ text-align:center; }
left: 30px; }
.stick{
• absolute positioning is used to position an position: sticky;
element relative to the first parent top:50px;
element that has a position other than padding: 10px;
font-size:20px;
static
font-weight:bold;
h2 { position: absolute; background-color: lightblue;
left: 150px; border: 1px solid blue;
top: 250px; } }
</style>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 38


CSS Position cont’d
property description values
bottom It is used to set the bottom margin edge for a auto, length, %, inherit
positioned box.
clip It is used to clip an absolutely positioned element. shape, auto, inherit

cursor It is used to specify the type of cursors to be url, auto, crosshair, default, pointer,
displayed. move, e-resize, ne-resize, nw-resize, n-
resize, se-resize, sw-resize, s-resize, w-
resize, text, wait, help
left It sets a left margin edge for a positioned box. auto, length, %, inherit
overflow This property is used to define what happens if auto, hidden, scroll, visible, inherit
content overflow an element's box.

position It is used to specify the type of positioning for an absolute, fixed, relative, static, inherit
element.
right It is used to set a right margin edge for a positioned auto, length, %, inherit
box.
top It is used to set a top margin edge for a positioned auto, length, %, inherit
box.
z-index It is used to set stack order of an element. number, auto, inherit

11/19/2022 AASTU | Dept. of SWENG - 2015EC 39


CSS Vertical Align
• vertical align: is used to define the vertical alignment of
an inline or table-cell box
value description
baseline It aligns the baseline of element with the baseline of parent element. This is a default value.
length It is used to increase or decrease length of the element by the specified length. negative
values are also allowed.
% It is used to increase or decrease the element in a percent of the "line-height" property.
negative values are allowed.
sub It aligns the element as if it was subscript.
super It aligns the element as if it was superscript.
top It aligns the top of the element with the top of the tallest element on the line.
bottom It aligns the bottom of the element with the lowest element on the line.
text-top the top of the element is aligned with the top of the parent element's font.
middle the element is placed in the middle of the parent element.
text-bottom the bottom of the element is aligned with the bottom of the parent element's font.
initial It sets this property to Its default value.
inherit inherits this property from Its parent element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 40


CSS Vertical Align example
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="good-
morning.jpg" alt="Good Morning Friends"/> This is an image
with a default alignment.</p>
<p><img src="good-
morning.jpg" class="top" alt="Good Morning Friends"/> This
is an image with a text-top alignment.</p>
<p><img src="good-
morning.jpg" class="bottom" alt="Good Morning Friends"/>
This is an image with a text-bottom alignment.</p>
</body>
11/19/2022 AASTU | Dept. of SWENG - 2015EC 41
CSS White Space
CSS white space property is used to specify how to display the content
within an element
Value Description
normal This is a default value. in this value, text is wrapped when necessary.
sequences of white space will collapse into a single whitespace.
nowrap Sequences of white space will collapse into a single whitespace. in this
value, text will never wrap to the next line and only break when <br> tag
is used.
pre Whitespace is preserved by the browser. it is act like html <pre> tag. text
will only wrap on line breaks.
pre-line Sequences of white space will collapse into a single whitespace. texts are
wrapped when necessary, and on line break.
pre-wrap Whitespace is preserved by the browser. texts are wrapped when
necessary, and on line break.
initial It sets this property to its default value.
inherit It inherits this property from its parent element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 42


CSS Word Wrap
• word wrap property is used to break the long
words and wrap onto the next line
Value Description

normal This property is used to break words only at allowed break points.
<style>
p.test { break-word It is used to break unbreakable words.
width: 11em; initial It is used to set this property to its default value.
background-color: #00ffff;
inherit
border: 1px solid #000000; It inherits this property from its parent element.
padding:10px;
word-wrap: break-word; Output
}
</style>
</head>
<body>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap t
o the next line.</p>
</body>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 43


CSS Box-shadow
• It is used to add shadow-like effects around the frame of an element
• Syntax
• box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
• h-offset: It horizontally sets the shadow position. Its positive value will set the
shadow to the right side of the box. Its negative value is used to set the shadow on
the left side of the box.
• v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The
positive value in it sets the shadow below the box, and the negative value sets the
shadow above of the box.
• blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.
• spread: It sets the shadow size. The spread size depends upon the spread value.
• color: As its name implies, this attribute is used to set the color of the shadow. It is
an optional attribute.
• inset: Normally, the shadow generates outside of the box, but by using inset, the
shadow can be created within the box.
• initial: It is used to set the property of the box-shadow to its default value.
• inherit: it is inherited from its parent.
• none: It is the default value that does not include any shadow property.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 44


CSS Text-shadow
• Text-shadow property adds shadows to the text
• It accepts the comma-separated list of shadows that applied to
the text
• Syntax
• text-shadow: h-shadow v-shadow blur-radius color| none | initial |
inherit;
• h-shadow: It is the required value. It specifies the position of the
horizontal shadow and allows negative values.
• v-shadow: It is also the required value that specifies the position
of the vertical shadow. It does not allow negative values.
• blur-radius: It is the blur-radius, which is an optional value. Its
default value is 0.
• color: It is the color of the shadow and also an optional value.
• none: It is the default value, which means no shadow.
• initial: It is used to set the property to its default value.
• inherit: It simply inherits the property from its parent element.

11/19/2022 AASTU | Dept. of SWENG - 2015EC 45


div {
border: 1px solid;
padding: 10px; }
#hvb {
CSS Box-shadow
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px; }
#spr {/* box-shadow: h-offset v-offset blur spread */
box-shadow: 5px 10px 10px 10px; }
#col {/* box-shadow: h-offset v-offset blur spread color */
box-shadow: 5px 10px 10px 10px orange; }
#ins {/* box-shadow: h-offset v-offset blur spread color inset */
box-shadow: 5px 10px 10px 10px orange inset; }
#init { /* box-shadow: initial */
box-shadow: initial; }
#non {/* box-shadow: none */
box-shadow: none; }
……
<div id = "hvb">
<h1>It is a shadow box that has h-offset, v-offset and blu
r attributes.</h1>
</div>
<div id = "spr">
<h1>It is a box that includes the spread attribute.</h1>
</div>
<div id = "col">
<h1>It is a box that includes the color attribute.</h1>
</div>
<div id = "ins">
<h1>It is a box that includes the inset attribute.</h1>
</div>
<div id = "init">
<h1>It is a box that includes the initial attribute.</h1>
</div>
<div id = "non">
<h1>It is a box that includes the default attribute i.e. none.</h1>
</div> 11/19/2022 AASTU | Dept. of SWENG - 2015EC 46
CSS Text-shadow example
<style>
p.simple{
text-shadow: 3px 3px red;
}
</style>
…..
<p class="simple"> Output
Simple Shadow
</p>

11/19/2022 AASTU | Dept. of SWENG - 2015EC 47


• Text-transform property allows us to
change the case of the text
• Syntax
• text-transform: capitalize| uppercase |
lowercase | none | initial | inherit;
• Outline is just like CSS border property
• Facilitates to draw an extra border around an
element to get visual attention
• Difference between Border and Outline
• It is not possible to apply a different outline width, style and
color for the four sides of an element while in border;
• The border is a part of element's dimension while the outline is
not the part of element's dimension

11/19/2022 AASTU | Dept. of SWENG - 2015EC 48


CSS outline example

11/19/2022 AASTU | Dept. of SWENG - 2015EC 49


11/19/2022 AASTU | Dept. of SWENG - 2015EC 50

You might also like