Scribd
Upload
48 views

Unit II Ui Design

Ux design and ui design project the of the of the

Uploaded by

S.LOGARAJAN ❶8
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Unit II Ui Design

Ux design and ui design project the of the of the

Uploaded by

S.LOGARAJAN ❶8
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

lOMoARcPSD|42770001

UNIT II UI Design

Master of Computer Applications (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by Hopeserveenterprises Hope ([email protected])
lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

OM SAKTHI
ADHIPARASAKTHI ENGINEERING COLLEGE
MELMARUVATHUR.

DEPT.OF MCA

SUBJECT NAME: WEB DESIGN


SUBJECT CODE: MC4023

UNIT - 2

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 1

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

UNIT II UI DESIGN

SVG-Advanced HTML- Iframes-HTML5 Video and Audio tags. CSS Specificity-


Understanding the box model – Margins padding and border – Inline and block elements -
Structuring pages using Semantic Tags - Positioning with CSS: Positions, Floats, z-index –
CSS with CSS Preprocessors: SASS

2.1 SVG
SVG Definition

 SVG stands for Scalable Vector Graphics


 SVG is used to define vector-based graphics for the Web
 SVG defines the graphics in XML format
 Every element and every attribute in SVG files can be animated
 SVG is a W3C recommendation
 SVG integrates with other W3C standards such as the DOM and XSL

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:
 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable
 SVG graphics do NOT lose any quality if they are zoomed or resized
 SVG is an open standard
 SVG files are pure XML

Creating SVG Images

SVG images can be created with any text editor, but it is often more convenient to create
SVG images with a drawing program, like Inkscape.

Code:
<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 2

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

Output:

SVG Code explanation:

 An SVG image begins with an <svg> element


 The width and height attributes of the <svg> element define the width and height of
the SVG image
 The <circle> element is used to draw a circle
 The cx and cy attributes define the x and y coordinates of the center of the circle. If cx
and cy are not set, the circle's center is set to (0, 0)
 The r attribute defines the radius of the circle
 The stroke and stroke-width attributes control how the outline of a shape appears. We
set the outline of the circle to a 4px green "border"
 The fill attribute refers to the color inside the circle. We set the fill color to yellow
 The closing </svg> tag closes the SVG image
Note: Since SVG is written in XML, all elements must be properly closed!

2.2 I frame
The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear
anywhere in your document. The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate document, including scrollbars and
borders. An inline frame is used to embed another document within the current HTML
document.
The src attribute is used to specify the URL of the document that occupies the inline
frame.

Example

Following is the example to show how to use the <iframe> −

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 3

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

<!DOCTYPE html>
<html>

<head>
<title>HTML Iframes</title>
</head>

<body>
<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">


Sorry your browser does not support inline frames.
</iframe>

<p>Document content also go here...</p>


</body>

</html>

This will produce the following result −

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id,
longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like
the corresponding attributes for the <frame> tag.
1 Src
This attribute is used to give the file name that should be loaded in the frame. Its value
can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file
available in html directory.
2
Name
This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create
links in one frame that load pages into an another frame, in which case the second
frame needs a name to identify itself as the target of the link.

3
Frameborder
This attribute specifies whether or not the borders of that frame are shown; it overrides
the value given in the frameborder attribute on the <frameset> tag if one is given, and
this can take values either 1 (yes) or 0 (no).

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 4

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

4
Marginwidth
This attribute allows you to specify the width of the space between the left and right of
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth = "10".

5
Marginheight
This attribute allows you to specify the height of the space between the top and bottom
of the frame's borders and its contents. The value is given in pixels. For example
marginheight = "10".

6
Height
This attribute specifies the height of <iframe>.

7
Scrolling
This attribute controls the appearance of the scrollbars that appear on the frame. This
takes values either "yes", "no" or "auto". For example scrolling = "no" means it should
not have scroll bars.

8
Longdesc
This attribute allows you to provide a link to another page containing a long description
of the contents of the frame. For example longdesc = "framedescription.htm"

9
Width
This attribute specifies the width of <iframe>.

2.3 Html5 Audio and Video Tags


HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need
to set src attribute to identify the media source and include a controls attribute so the user
can play and pause the media.

Embedding Video

Here is the simplest form of embedding a video file in your webpage −


<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 5

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

should support in the video tag. But most commonly used video formats are −
 Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
 mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many other attributes.
A video element allows multiple source elements and browser will use the first recognized
format −

<!DOCTYPE HTML>

<html>
<body>

<video width = "300" height = "200" controls autoplay>


<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>

</body>
</html>

This will produce the following result − Video Attribute SpecificationThe HTML5 video tag can have

a number of attributes to control the look and feel andvarious functionalities of the control –

Sr.No. Attribute & Description

1 Autoplay
This Boolean attribute if specified, the video will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.

Autobuffer
2
This Boolean attribute if specified, the video will automatically begin buffering even if it's
not set to automatically play.

Controls
3
If this attribute is present, it will allow the user to control video playback, including
volume, seeking, and pause/resume playback.

4 Height
This attribute specifies the height of the video's display area, in CSS pixels.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 6

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

Loop
5
This Boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.

Preload
6
This attribute specifies that the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.

7 Poster
This is a URL of an image to show until the user plays or seeks.
8
Src
The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.

9 Width
This attribute specifies the width of the video's display area, in CSS pixels.

Embedding Audio

HTML5 supports <audio> tag which is used to embed sound content in an HTML or
XHTML document as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers
should support in the audio tag. But most commonly used audio formats are ogg,
mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and many other
attributes. An audio element allows multiple source elements and browser will use the first
recognized format −

<!DOCTYPE HTML>

<html>
<body>

<audio controls autoplay>


<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 7
</body>
</html>
Downloaded by Hopeserveenterprises Hope ([email protected])
lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

This will produce the following result −

Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and
various functionalities of the control −

Sr.No. Attribute & Description

1 Autoplay
This Boolean attribute if specified, the audio will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.

Autobuffer
2
This Boolean attribute if specified, the audio will automatically begin buffering even if it's
not set to automatically play.

Controls
3
If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.

Loop
4
This Boolean attribute if specified, will allow audio automatically seek back to the start
after reaching at the end.

Preload
5
This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.

Src
6
The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.

2.18 CSS | Specificity


When more than one set of CSS rules apply to the same element, the browser will
have to decide which specific set will be applied to the element. The rules the browser
follows are collectively called Specificity

Specificity Rules include:

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 8

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

 CSS style applied by referencing external stylesheet has lowest precedence and is
overridden by Internal and inline CSS.
 Internal CSS is overridden by inline CSS.
 Inline CSS has highest priority and overrides all other selectors.
Example:

<html>

<head>

<link rel="stylesheet" type="text/css" href="external.css">

<style type="text/css">

h1 {

background-color: red;

color: white;

h2 {

color: blue;

</style>

</head>

<body>

<h1>

Internal CSS overrides external CSS

</h1>

<h2 style="color: green;">

Inline CSS overrides internal CSS

</h2>

</body>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 9

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

</html>

“external.css” of Example-1:

h1{

background-color: lightgreen;

h2{

color: pink;

Output:

2.4 Understanding CSS Box Model

The box-model is a fundamental concept in CSS and HTML. Since everything


in CSS ismade up of boxes, it’s critical to understand how the CSS box model works.

What is a box-model?

One or more rectangular boxes make up every element that can be shown on a web page. The
CSS box model explains how rectangular boxes are displayed on a web page.

These boxes can have a variety of features and interact with one another in various ways, but
they all contain a content area as well as optional padding, border, and margin areas used
for changing the appearance.

Controlling the box-model

Let’s start with the box-model’s layout, which is depicted in the accompanying image below.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 10

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

CSS box model example

Styling the box

As we said earlier, we may change the appearance of the HTML components of the box by
adjusting the content, padding, border, and margin. Let’s look at each of them.

Content

The content consists of data in the form of text, images, or other forms of media.
The width and height attributes change the box’s dimensions. While this is a straightforward
definition, it should be emphasized that “content” can also refer to empty space. For example,
using an empty div tag to add extra unique designs to a webpage can be great.

Padding

Padding is the gap between the content’s outside edge and its border. The padding property
may be used to resize the box. Padding-left, padding-bottom, and other edge-specific
attributes aid in obtaining custom spacing.

NOTE: You can use one value to represent the padding across the box, for example, padding:
35px; or you can give each side of the box a value, for example, padding-left:25px;.

Let’s look at an example of padding in CSS:

p{
border-style: solid;
border-color: red;
}

Since there is no padding set for this p tag, you will get the result displayed as below.

Let’s add some padding to our p and see the results.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 11

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

p{
padding: 35px;
border-style: solid;
border-color: red;
}

These are the changes that you will observe.

The additional padding between the paragraph content and the border has been altered
significantly, as we can see.

Border

The border of an element is defined by the distance between the padding’s outer edge and the
margin’s inner edge. Its width is set to 0 by default.

The border property is used to specify the boundary of an element. Individual edges can be
customized as well.

The following are the three fundamental properties for creating borders:

 border-style - Typically, one of the following keywords is used: solid, dashed,


or dotted.
 border-width - Informs the browser how big the border should be. For this property,
we usually specify a pixel value, such as border-width: 15px;.
 border-color - By default, the value utilizes the text’s current color. Even if we don’t
have to, we like to define it. Example, border-color: blue;.

Below is the basic example of the three properties:

border-width: 5px 10px 15px 20px;


border-style: solid dashed dotted double;
border-color: red green blue brown;

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 12

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

Margin

Margin is the portion on the outside of the CSS Box Model. In simpler words, Margin is the
distance between an element’s box and the boxes of its surrounding elements.

This is similar to the page margin, which is the distance between a page’s boundary and its
content. It is translucent and has padding-like features, although it clears space outside the
element’s boundary.

Individual edges, like padding, can be set to have a specific margin.

For example, margin-top: 15px;.

Example

Let’s look at an example of how to apply margin:

<html>
<p>Am the first Box.</p>
<p>Am another Box.</p>

</html>
<style>

p{
height: 150px;
width: 150px;
padding: 20px;
border: 10px solid blue;
margin: 15px;
}
</style>

The code above shows us how to apply spaces between the two boxes. It separates the two
boxes with 15px.

2.5 Basic types of boxes

1. Block boxes.
2. Inline boxes.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 13

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

These are the two main types of boxes. Let’s look at each of them.

Block boxes

By default, block boxes take up the entirety of the container’s width.

The <div> HTML element is the most popular and used HTML element for a block box.

Inline Boxes

By default, inline boxes take up the space required by the wrapped content.
The <span> HTML element is the most often used inline box element.

<div>Am an Example of DIV</div>


<span>Am an Example of SPAN</span>

This is the pictorial presentation of the two types:

Understanding the sizing of boxes

Beginners usually make the mistake of assuming that padding, margins, and borders are
included in an element’s height and width. This is wrong.

The height and width attributes let you customize the height and width of a web element’s
content area. Other components on the web page are not taken into account.

When we write the HTML block width element, width: auto; the value is equal to the width
of the row by default. However, we may assign HTML components a particular width value,
such as width: 200px;.

Width and height calculations

We’ll need to do a quick calculation to see how much space our entire box takes up. Let’s
look at an example (let’s use the values that we had supplied in the margin code above):

 height: 150px;
 width: 150px;
 padding: 20px;
 border: 10px solid blue;
 margin: 15px;

We use the following formula to calculate the width:

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 14

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

150px(Width) + 40(right and left padding) + 20px (right and left border) + 30px (right and
left margin) = 240

To calculate the height, we use the height’s pixels plus the top and bottom of the padding,
border, and margin.

2.5 Structuring pages using Semantic Tags

What are Semantic Elements?


HTML was originally created as a markup language to describe documents on the early
internet. As the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people
wanted to share other things as well. Very quickly, people started wanting to make the web
look nicer.

Because the web was not initially built to be designed, programmers used different hacks to
get things laid out in different ways. Rather than using the <table></table> to describe
information using a table, programmers would use them to position other elements on a page.
As the use of visually designed layouts progressed, programmers started to use a generic
“non-semantic” tag like <div>. They would often give these elements a class or id attribute to
describe their purpose. For example, instead of <header> this was often written as <div
class="header">.
As HTML5 is still relatively new, this use of non-semantic elements is still very common on
websites today.

List of new semantic elements


The semantic elements added in HTML5 are:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or
less like <div> elements. They group other elements together into page sections. However
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 15

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

where a <div> tag could contain any type of information, it is easy to identify what sort of
information would go in a semantic <header> region.
An example of semantic element layout by w3schools
Why use semantic elements?
To look at the benefits of semantic elements, here are two pieces of HTML code. This first
block of code uses semantic elements:

<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Whilst this second block of code uses non-semantic elements:

<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
First, it is much easier to read. This is probably the first thing you will notice when looking
at the first block of code using semantic elements. This is a small example, but as a
programmer you can be reading through hundreds or thousands of lines of code. The easier it
is to read and understand that code, the easier it makes your job.
It has greater accessibility. You are not the only one that finds semantic elements easier to
understand. Search engines and assistive technologies (like screen readers for users with a
sight impairment) are also able to better understand the context and content of your website,
meaning a better experience for your users.
Overall, semantic elements also lead to more consistent code. When creating a header using
non-semantic elements, different programmers might write this as <div
class="header">, <div id="header">, <div class="head">, or simply <div>. There are so
many ways that you can create a header element, and they all depend on the personal
preference of the programmer. By creating a standard semantic element, it makes it easier for
everyone.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 16

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic”
elements. To this day, some of us might still be confused as to why so many different
elements that doesn’t seem to show any major changes.

<section> and <article>


“What’s the difference?”, you may ask. Both these elements are used for sectioning a content,
and yes, they can definitely be used interchangeably. It’s a matter of in which situation.
HTML4 offered only one type of container element, which is <div>. While this is still used in
HTML5, HTML5 provided us with <section> and <article> in a way to replace <div>.
The <section> and <article> elements are conceptually similar and interchangeable. To
decide which of these you should choose, take note of the following:
1. An article is intended to be independently distributable or reusable.

2. A section is a thematic grouping of content.

<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
<header> and <hgroup>
The <header> element is generally found at the top of a document, a section, or an article and
usually contains the main heading and some navigation and search tools.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 17

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

<input type="submit" />


</form>
</header>
The <hgroup> element should be used where you want a main heading with one or more
subheadings.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
REMEMBER, that the <header> element can contain any content, but the <hgroup> element
can only contain other headers, that is <h1> to <h6> and including <hgroup>.
<aside>
The <aside> element is intended for content that is not part of the flow of the text in which it
appears, however still related in some way. This of <aside> as a sidebar to your main content.
<aside>
<p>This is a sidebar, for example a terminology definition or a short background to a
historical figure.</p>
</aside>
Before HTML5, our menus were created with <ul>’s and <li>’s. Now, together with these,
we can separate our menu items with a <nav>, for navigation between your pages. You can
have any number of <nav> elements on a page, for example, its common to have global
navigation across the top (in the <header>) and local navigation in a sidebar (in
an <aside> element).
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
<footer>
If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom
of a document, a section, or an article. Just like the <header> the content is generally
metainformation, such as author details, legal information, and/or links to related
information. It is also valid to include <section> elements within a footer.
<footer>&copy;Company A</footer>
<small>
The <small> element often appears within a <footer> or <aside> element which would
usually contain copyright information or legal disclaimers, and other such fine print.
However, this is not intended to make the text smaller. It is just describing its content, not
prescribing presentation.
<footer><small>&copy;Company A</small> Date</footer>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 18

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


<time>
The <time> element allows an unambiguous ISO 8601 date to be attached to a
human-readable version of that date.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
Why bother with <time>? While humans can read time that can disambiguate through
contextin the normal way, the computers can read the ISO 8601 date and see the date,
time, and the time zone.
<figure> and <figcaption>
<figure> is for wrapping your image content around it, and <figcaption> is to
caption yourimage.
<figure>
<img
src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg
"alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>
</div>

2.8 Positioning with CSS


FLOAT

The float property enables you to take an element out of normal flow and put content side-by-side.
Elements are floated horizontally , that means, an element can only be floated left or right only

Float property accepts keyword values left and right float elements those directions respectively and
set to none for not floated. When you set the float property for an element , you should specify the
width and height otherwise its sizing becomes shrink-to-fit horizontally and vertically.

<!Doctype>

<html>

<head>

<style>

.box1 {

background: #DDF;

height: 100px;

width:100px;

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


.box2 {

background: #4FFFA1;

height: 100px;

width:100px;

</style>

</head>

<body>

<div class="box1">

Box1

</div>

<div class="box2">

Box2

</div>

</body>

</html>

When you run this code on browser you will get the folowing output:

In the above picture the boxes are not set the float property.

Now we set the float property to both boxes as float:left;

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


.box1 {

float:left;

background: #DDF;

height: 100px;

width:100px;

.box2 {

float:left;

background: #4FFFA1;

height: 100px;

width:100px;

In the above code we set float property to each box as float:left;

Now you can see the boxes floated from left to right.

Again we set first box as float:left and second box as float:right;

.box1 {

float:left;

background: #DDF;

height: 100px;

width:100px;

.box2 {

float:right;

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


background: #4FFFA1;

height: 100px;

width:100px;

}
output

Now you can see first box is floted to left and second one is floated to right.

z-index

While overlapping CSS elements, when using absolute and relative position, the default behavior is
to have the first elements underneath later ones. In these cases we can control layering of positioned
elements by using the z-index property . When using the z-index property you can specify which
of the boxes appears on top the other one.

<!Doctype>

<html>

<head>

<style>

div {

width:100px;

height:100px;

div.box1 {

background:#dad7d7;

position:relative;

z-index:1;

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


}

div.box2 {

background:#ffe7bc;

position:relative;

top:-80px;

left:50px;

z-index:2;

</style>

</head>

<body>

<div class="box1"> BOX - 1 </div>

<div class="box2"> BOX - 2 </div>

</body>

</html>
output

Now you can see the BOX-1 is behind the BOX-2, because z-index of BOX-1 is 1 and BOX-2 is 2.
Now we are going to change the z-index order as BOX-1 is 2 and BOX-2 is 1.

div {

width:100px;

height:100px;

div.box1 {

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


background:#dad7d7;

position:relative;

z-index:2;

div.box2 {

background:#ffe7bc;

position:relative;

top:-80px;

left:50px;

z-index:1;

}
output

Now you can see BOX-1 come in front and BOX-2 going behind the BOX-1.

It is noted that z-index works on positioned elements only like position:absolute, position:relative
and position:fixed.

What is Sass CSS Preprocessor?

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor scripting language that
helps you to work on your style sheet much faster than ever. Sass allows you to use features such as
variables, nestings, modules, etc. that don’t exist in CSS. Apart from Sass, there are two other
important CSS extensions – Stylus & LESS (Leaner Style Sheets).

Also, with the help of Sass, you can improve DRY (Don’t Repeat Yourself) CSS and make your
code more readable. Additionally, it is also totally compatible with all versions of CSS. Once you
get familiar with Sass, you will feel more comfortable and easy to handle large scale projects. To

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

play around with Sass CSS preprocessor, you have to create a separate style sheet with the
extensions “.scss” or “.sass”. You can then compile it into a normal CSS file. Your browser will
read only the finally compiled CSS file to style your website/web application.

Benefits of Using Sass CSS Preprocessor:


Below are some of the benefits of using Sass.

1. Requires Minimal Coding – Comparatively, Sass requires very few codes and help the
developers to write CSS quickly.
2. Rapid Code Compilation – Unlike other preprocessors, you can easily compile your code
using Sass command.
3. Bigger Developer Community – Sass has a massive ecosystem with a huge number of
active developers.
4. Powerful Frameworks – Sass uses Compass for mixins, which contains almost all possible
options, including updates for future support.

Types of Sass Syntaxes:


Sass can be written in two ways .scss and .sass. Both have their unique syntaxes.

 SCSS (New): SCSS is commonly called as Sassy CSS. You can save it with .scss extension.
It is a superset of CSS, which means it contains all the features that CSS holds. Also, you
can easily adapt yourself to SCSS if you are familiar with the basics of CSS.

 Indented Syntax (Old): Indented Syntax can be implemented on style sheet with the .sass
extension. When compared to .scss, the indented syntax has a wider audience because it
helps you to write code quickly and concisely. Indented syntax use indentation to describe
the format of the document; whereas, .scss uses curly brackets and semicolons. Below is an
example of an indented syntax:

Indented

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2


$red: #FF0000
$margin: 10px

.content-navigation
border-color: $red
color: darken($red, 9%)

.border
padding: $margin / 2
margin: $margin / 2
border-color: $red
SCSS

$red: #FF0000;
$margin: 10px;

.content-navigation {
border-color: $red;
color: darken($red, 9%);
}

.border {
padding: $margin / 2; margin: $margin / 2; border-color: $red;

}
CSS

.content-navigation {
border-color: #FF0000;
color: #d10000;
}

.border {
padding: 5px;
margin: 5px;
border-color: #FF0000;
}

How to Use Sass Features Effectively


As we now know what Sass CSS preprocessor is and it’s the syntax, let’s see various Sass features that
make it so robust.

 Variables

Sass enables you to use variables to store values, and you can use it wherever you need it. For instance, you
can store a specific color in a variable at the top of your style sheet, and call the respective variable wherever
you want to apply that color.

Downloaded by Hopeserveenterprises Hope ([email protected])


lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

 Nesting

Using the nesting method, you can reduce the amount of code massively. The nesting structure in Sass is
somewhat similar to HTML. Both technologies follow the same visual hierarchy. But, keep in mind that
nesting will over-qualify your CSS if you didn’t execute properly.

 Partials

It is one of the most powerful Sass features. Partials are more like a portable style sheet that can be linked to
any other style sheet, and you can use it in another CSS file. It helps you to make your code transportable
and maintain it easily. Remember, the partials file name should start with an underscore: _example.scss.
You will get a clear picture of the partials below.

 Modules

As discussed in the previous section, you can use some other sass files in your current sass file using @use
rule. It lets you incorporate multiple .sass files into your project file. Also, keep in mind that each import
will generate a new HTTP request. Too many HTTP requests will result in the slow down of your website.

 Mixins

The main reason for using preprocessors is it helps you convert the long-winded code into a concise one.
That’s exactly where mixins come in. For instance, while working on vendor prefix on CSS, you will be
spending more time than usual. Instead of using CSS, you can use the mixin feature from Sass to avoid
writing the code again and again.

 Extend/Inheritance

The @directive is usually called as the most powerful Sass features. You can use a group of CSS properties
from one selector to another using @directive. This implies that you don’t have to use multiple class names.
All you have to do is, write a set of CSS properties that will repeat in your program over and over and give it
a name. Then, wherever you want to apply those styles, include it using @directive.

Downloaded by Hopeserveenterprises Hope ([email protected])

You might also like