WEB ENGINEERING

LEARNING OBJECTIVE
 At the end of this Lecture, Students will be able to
• Understand CSS & CSS Properties.
• Understand responsive designing.
OUTLINE
HTML DOM(Document Object Model)
CSS and CSS3
CSS3 Modules
Box Model
CSS3 properties
WHAT IS THE HTML DOM
(DOCUMENT OBJECT MODEL)

The HTML DOM is an Object Model for HTML. It defines:

 HTML elements as objects
 Properties for all HTML elements
 Methods for all HTML elements
 Events for all HTML elements
In other words: The HTML DOM is a standard for how to get,
change, add, or delete HTML elements.
When a web page is loaded, the browser creates
a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
CSS
CSS was developed by W3C World Wide Web Consortium to solve
the problem with individual line styling in HTML. When individual
styling attributes were introduced in HTML 3.2 to help style HTML,
there still was a problem. Developers had to use style attributes at
every single tag, so to overcome this CSS played an important role.
CSS3
CSS3 is the latest version of CSS and comes with new features like
rounded corner shadows, gradients, transition, and animations. (That's
right, it has even properties like JavaScript.) Mobile Development is
the main concern of CSS3. It focuses on responsive design that
reduces the problem caused by Adobe-Flash incompatibility on the
different devices.
CSS & CSS3
Type
It is a standard language that is used to design the web.
CSS3 is the newest version of CSS.

Responsive Designing
CSS does not follow the responsive Designing. Its designed
webpages are not that much mobile phone friendly
CSS3-The web page of the website adjusts the page size and
components according to the size of the devices. It is more
mobile friendly
CONT..
Modular based code
CSS does not follow module-based code; it uses its all
specifications directly.
CSS3 uses all the old specifications of CSS, but all the
specifications are divided into different modules.

• Rounded Borders
CSS did not have this feature
CSS3 has this feature
CONT..
• Bordered Images, text shadows
 CSS did not have these features
 CSS3 comes with these features

• Multiple Background
 CSS has to use the third party for the Multiple Background
 CSS3 comes with the built-in Multiple background feature.
CONT..
Fast page load
The loading speed of CSS designed web pages was decent
With the introduction of CSS3 in web pages, it helps to load
pages very fast as compared to CSS.

• Animations

CSS use JavaScript or Flash code for the animations.

CSS3 comes with built-in features like 2D and 3D
transformation, which provides animation and transition effects.

• Colors and Images effects

CSS has many colors and images effect features.
CSS3 contains all the CSS effect and also have some new colors
and images effects.
CSS3 MODULES
CSS3 has been split into "modules". It contains the "old
CSS specification" (which has been split into smaller
pieces). In addition, new modules are added.
 Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
 Animations
 Multiple Column Layout
User Interface
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
BOX MODEL
CONT..
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
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
CSS3 BORDERS
In CSS3, we can create rounded borders, add shadow to boxes, and
use an image as a border - without using a design program, like
Photoshop. In CSS3 the following border properties are:
 border-radius
 box-shadow
 border-image
BORDERS-RADIUS
Adding rounded corners in CSS2 was tricky. We had to use different
images for each corner. In CSS3, creating rounded corners is easy. In
CSS3, the border-radius property is used to create rounded corners:

div
{ border: 2px solid;
border-radius: 25px; }
BOX-SHADOW
In CSS3, the box-shadow property is used to add shadow to boxes:
div
{ box-shadow: 10px 10px 5px #888888; }
BACKGROUND-SIZE
The background-size property specifies the size of the background
image.
Before CSS3, the background image size was determined by the
actual size of the image.
In CSS3 it is possible to specify the size of the background image,
which allows us to re-use background images in different contexts
div
{ background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat; }
TEXT-EFFECTS
CSS3 contains several new text features. In this chapter you will learn
about the following text properties: text-shadow word-wrap
h1
{ text-shadow: 5px 5px 5px #FF0000; }

h2
{ word-wrap: break-word; }
TRANSFORMS
In CSS3 transform, we can move, scale, turn, spin, and stretch
elements. A transformation is an effect that lets an element
change shape, size and position.
 translate()
 rotate()
 scale()
 skew()

div
{ transform: rotate(30deg);
transform: translate(50px,100px);
transform: scale(2,4);
transform: skew(30deg,20deg); }
div.a { div.c {
width: 150px;
width: 150px;
height: 80px;
height: 80px;
background-color: yellow;
background-color: yellow;
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari 3-8 */ transform:translate(100px,100px);
transform: rotate(20deg); }
}

div.b {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari 3-8 */
transform: skewY(20deg);
}
TRANSITIONS
In CSS3, we can add an effect when changing from one style to
another, without using Flash animations or Java Scripts.
CSS3 transitions are effects that let an element gradually change from
one style to another.

div { transition-delay: 2s; }

div:hover { width: 300px; }

MULTIPLE COLUMNS
In CSS3, we can create multiple columns for laying out
text - like in newspapers!
 In CSS3 the following multiple column properties are:
•column-count
•column-gap
 •column-rule

div
{ column-count: 3;
column-gap: 40px;
column-rule: 3px outset #ff00ff; }
USER INTERFACE
In CSS3, some of the new user interface features are resizing
elements, box sizing, and outlining. In CSS3 following user interface
properties:
 resize
 box-sizing
 outline-offset
RESIZING
•In CSS3, the resize property specifies whether or not an element
should be resizable by the user.
div { border: 2px solid;
padding: 10px 40px;
width: 300px;
height: 100px;
resize: both;
overflow: auto; }
OUTLINE OFFSET
The outline-offset property offsets an outline, and draws it beyond the
border edge. Outlines differ from borders in two ways:
 Outlines do not take up space
 Outlines may be non-rectangular

div
{ border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px; }
ANIMATIONS
CSS3 allows animation of HTML elements without
using JavaScript or Flash!
Animation properties:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
CONT..
@keyframes rule, the animation will gradually change from the
current style to the new style at certain times.
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
CONT..
animation-delay property specifies a delay for the start of an
animation
animation-iteration-count property specifies the number of times an
animation should run.
animation-direction property specifies whether an animation should
be played forwards, backwards or in alternate cycles.
animation-timing-function property specifies the speed curve of the
animation.
CONT..
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
 animation-iteration-count: 3;
animation-direction: reverse;
animation-timing-function: linear;
}
REFERENCES
Basics of Web Design: HTML5 & CSS,5th edition(2019),
ISBN:0135225485, ISBN:9780135225486.
W3Schools url: www.w3school.com
TutorialsPoint url: www.tutorialpoint.com