Scribd
Upload
51 views40 pages

Unit Ii-1

Very useful

Uploaded by

ramalakshmi1712003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views40 pages

Unit Ii-1

Very useful

Uploaded by

ramalakshmi1712003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

UNIT II UI DESIGN

SVG- Iframes - HTML5 Video and Audio tags - CSS Specificity - 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

SVG
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
Embed SVG Directly Into HTML Pages
<!DOCTYPE html>
<html>
<body>

<h1>MyfirstSVG</h1>

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


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

</body>
</html>

1
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

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

 Rectangle <rect>
 Circle <circle>
 Ellipse <ellipse>
 Line <line>
 Polyline <polyline>
 Polygon <polygon>
 Path <path>

SVG Rectangle - <rect>

The <rect> element is used to create a rectangle and variations of a rectangle


shape:

Example

<svg width="400" height="110">


<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" />
</svg>

Code explanation:

2
 The width and height attributes of the <rect> element define the height
and the width of the rectangle
 The style attribute is used to define CSS properties for the rectangle
 The CSS fill property defines the fill color of the rectangle
 The CSS stroke-width property defines the width of the border of the
rectangle
 The CSS stroke property defines the color of the border of the rectangle

<svg width="400" height="110">


<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="180">


<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-
opacity:0.9" />
</svg>

SVG Circle - <circle>

The <circle> element is used to create a circle:

Here is the SVG code:

Example

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


<circle cx="50" cy="50" r="40" stroke="black" stroke-
width="3" fill="red" />
</svg>

Code explanation:

 The cx and cy attributes define the x and y coordinates of the center of


the circle. If cx and cy are omitted, the circle's center is set to (0,0)
 The r attribute defines the radius of the circle

SVG Ellipse - <ellipse>

The <ellipse> element is used to create an ellipse.

3
An ellipse is closely related to a circle. The difference is that an ellipse has an x
and a y radius that differs from each other, while a circle has equal x and y
radius:

The following example creates an ellipse:

Here is the SVG code:

Example

<svg height="140" width="500">


<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

Code explanation:

 The cx attribute defines the x coordinate of the center of the ellipse


 The cy attribute defines the y coordinate of the center of the ellipse
 The rx attribute defines the horizontal radius
 The ry attribute defines the vertical radius

SVG Line - <line>

The <line> element is used to create a line:

Here is the SVG code:

<svg height="210" width="500">


<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-
width:2" />
</svg>

Code explanation:

 The x1 attribute defines the start of the line on the x-axis


 The y1 attribute defines the start of the line on the y-axis
 The x2 attribute defines the end of the line on the x-axis
 The y2 attribute defines the end of the line on the y-axis

SVG Polygon - <polygon>

The <polygon> element is used to create a graphic that contains at least three
sides.

4
Polygons are made of straight lines, and the shape is "closed" (all the lines
connect up).

Example

<svg height="210" width="500">


<polygon points="200,10 250,190
160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Code explanation:

 The points attribute defines the x and y coordinates for each corner of the
polygon

SVG Polyline - <polyline>

The <polyline> element is used to create any shape that consists of only
straight lines (that is connected at several points):

<svg height="200" width="500">


<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

SVG Path - <path>

The <path> element is used to define a path.

The following commands are available for path data:

 M = moveto
 L = lineto
 H = horizontal lineto
 V = vertical lineto
 C = curveto
 S = smooth curveto
 Q = quadratic Bézier curve
 T = smooth quadratic Béziercurveto
 A = elliptical Arc
 Z = closepath

Note: All of the commands above can also be expressed with lower letters.
Capital letters means absolutely positioned, lower cases means relatively
positioned.

5
The example below defines a path that starts at position 150,0 with a line to
position 75,200 then from there, a line to 225,200 and finally closing the path
back to 150,0:

Here is the SVG code:

Example

<svg height="210" width="400">


<path d="M150 0 L75 200 L225 200 Z" />
</svg>

SVG Text - <text>

The <text> element is used to define a text.

Write a text:

I love SVG!

Example

<svg height="30" width="200">


<text x="0" y="15" fill="red">I love SVG!</text>
</svg>

Example

<svg height="60" width="200">


<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love
SVG</text>
</svg>

6
HTML Iframes

An HTML iframe is used to display a web page within a web page.

Definition and Usage

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML
document.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML
document.

Syntax

<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This
is used by screen readers to read out what the content of the iframe is.

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe


Example"></iframe>
Or you can add the style attribute and use the
CSS height and width properties:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Ifr


ame Example"></iframe>

To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe


Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

7
Example

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe


Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe


Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>


</p>
HTML5 VIDEO AND AUDIO 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 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.

8
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>

<videowidth="300"height="200"controlsautoplay>
<sourcesrc="/html5/foo.ogg"type="video/ogg"/>
<sourcesrc="/html5/foo.mp4"type="video/mp4"/>
Your browser does not support the <video> element.
</video>

</body>
</html>

Video Attribute Specification

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

Sr.No. Attribute & Description

autoplay

1 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

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

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.

poster
7
This is a URL of an image to show until the user plays or seeks.

src
8 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.

width
9
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.

10
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>

<audiocontrolsautoplay>

<sourcesrc="/html5/audio.ogg"type="audio/ogg"/>

<sourcesrc="/html5/audio.wav"type="audio/wav"/>

Your browser does not support the <audio> element.

</audio>

</body>

</html>

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

autoplay

1 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.

2 autobuffer

11
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.

CSS SPECIFICITY

 If there are two or more CSS rules that point to the same element, the
selector with the highest specificity value will "win", and its style
declaration will be applied to that HTML element.

 Think of specificity as a score/rank that determines which style


declaration is ultimately applied to an element.

Example

In this example, we have used the "p" element as selector, and specified a red
color for this element. The text will be red:

<html>
<head>
<style>

12
p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>
Example 2

In this example, we have added a class selector (named "test"), and specified a
green color for this class. The text will now be green (even though we have
specified a red color for the element selector "p"). This is because the class
selector is given higher priority:

<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>
Example 3

In this example, we have added the id selector (named "demo"). The text will
now be blue, because the id selector is given higher priority:

<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

13
<p id="demo" class="test">Hello World!</p>

</body>
</html>
Example 4

In this example, we have added an inline style for the "p" element. The text will
now be pink, because the inline style is given the highest priority:

<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

Specificity Hierarchy

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

 Inline styles - Example: <h1 style="color: pink;">


 IDs - Example: #navbar
 Classes, pseudo-classes, attribute selectors - Example: .test, :hover,
[href]
 Elements and pseudo-elements - Example: h1, :before

How to Calculate Specificity?

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-
class or attribute selector), add 1 for each element selector or pseudo-element.

he table below shows some examples on how to calculate specificity values:

14
Selector Specificity Value Calculation

p 1 1

p.test 11 1 + 10

p#demo 101 1 + 100

<p style="color: pink;"> 1000 1000

#demo 100 100

.test 10 10

p.test1.test2 21 1 + 10 + 10

#navbarp#demo 201 100 + 1 + 100

* 0 0 (the universal selector is ignored)

The selector with the highest specificity value will win and take effect!

15
THE CSS BOX MODEL

The CSS box model is a container that contains multiple properties including
borders, margin, padding, and the content itself. It is used to create the design
and layout of web pages. It can be used as a toolkit for customizing the layout
of different elements. The web browser renders every element as a
rectangular box according to the CSS box model. Box-Model has multiple
properties in CSS. Some of them are given below:

content: This property is used to displays the text, images, etc, that can be
sized using the width & height property.

padding: This property is used to create space around the element, inside
any defined border.

border: This property is used to cover the content & any padding, & also
allows to set the style, color, and width of the border.

margin: This property is used to create space around the element ie., around
the border area.

The following figure illustrates the Box model in CSS.

 Content Area: This area consists of content like text, images, or other
media content. It is bounded by the content edge and its dimensions
are given by content-box width and height.

 Padding Area: It includes the element’s padding. This area is actually


the space around the content area and within the border-box. Its
dimensions are given by the width of the padding-box and the height of
the padding-box.

 Border Area: It is the area between the box’s padding and margin. Its
dimensions are given by the width and height of the border.

 Margin Area: This area consists of space between border and margin.
The dimensions of the Margin area are the margin-box width and the
margin-box height. It is useful to separate the element from its
neighbors.

For setting the width & height property of an element(for properly rendering
the content in the browser), we need to understand the working of the CSS
Box model.

16
 Content Area: This area consists of content like text, images, or other
media content. It is bounded by the content edge and its dimensions
are given by content-box width and height.

 Padding Area: It includes the element’s padding. This area is actually


the space around the content area and within the border-box. Its
dimensions are given by the width of the padding-box and the height of
the padding-box.

 Border Area: It is the area between the box’s padding and margin. Its
dimensions are given by the width and height of the border.

 Margin Area: This area consists of space between border and margin.
The dimensions of the Margin area are the margin-box width and the
margin-box height. It is useful to separate the element from its
neighbors.

For setting the width & height property of an element(for properly rendering
the content in the browser), we need to understand the working of the CSS
Box model.

17
The box model allows us to add a border around elements, and to define space
between elements.

Example

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

Example 1: This example illustrates the use of the CSS Box model for aligning
& displaying it properly.
 HTML

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

18
.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<divclass="main">CSS Box-Model Property</div>
<divclass="gfg">
<divclass="gfg1">GeeksforGeeks</div>
<divclass="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Output:

19
Example 2: This example illustrates the Box Model by implementing the various
properties.
 HTML

<!DOCTYPE html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}

#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>

<body>
<divclass="main">CSS Box-Model Property</div>
<divid="box">GeeksforGeeks</div>
</body>
</html>

Output:

20
HTML BLOCK AND INLINE ELEMENTS

Every HTML element has a default display value, depending on what type of
element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

Example
<p>Hello World</p>
<div>Hello World</div>

Block-level elements in HTML:

<address><article><aside><blockquote><canvas><dd><div>

<dl><dt><fieldset><figcaption><figure><footer><form><h1>-
<h6><header><hr><li><main><nav><noscript><ol><p><pre><section
><table><tfoot><ul><video>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

21
The inline elements in HTML:

<a><abbr><acronym><b><bdo><big><br><button><cite><code>

<dfn><em><i><img><input><kbd><label><map><object><output>

<q><samp><script><select><small><span><strong><sub><sup>

<textarea><time><tt><var>

Example
<span>Hello World</span>
An inline element cannot contain a block-level element!

HTML SEMANTIC ELEMENTS


Semantic elements = elements with a meaning

A semantic element clearly describes its meaning to both the browser and the
developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines


its content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header">
<div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different
parts of a web page:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
22
 <section>
 <summary>
 <time>

HTML <section> Element

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of


content, typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content, and
contact information.

HTML <article> Element

The <article> element specifies independent, self-contained content.

23
An article should make sense on its own, and it should be possible to distribute
it independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

Example
Use CSS to style the <article> element:

<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {


margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {


margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">

24
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in
2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>

</body>
</html>

HTML <header> Element

The <header> element represents a container for introductory content or a set of


navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)


 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.

Example

A header for an <article>:

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural

25
environment,
and build a future in which humans live in harmony with nature.</p>
</article>

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

Example

A footer section in a document:

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

HTML <nav> Element

The <nav> element defines a set of navigation links.

Example

A set of navigation links:

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

26
HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in
(like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example
Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside>

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams,


photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element.


The <figcaption> element can be placed as the first or as the last child of
a <figure> element.

The <img> element defines the actual image/illustration.

Example

<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

HTML Style Guide

1. Always Declare Document Type

27
Always declare the document type as the first line in your document.

The correct document type for HTML is:

<!DOCTYPE html>

2. Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

 Mixing uppercase and lowercase names looks bad


 Developers normally use lowercase names
 Lowercase looks cleaner
 Lowercase is easier to write

3. Close All HTML Elements

In HTML, do not have to close all elements (for example


the <p> element). But we strongly recommend closing all HTML element

4. Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

 Mixing uppercase and lowercase names looks bad


 Developers normally use lowercase names
 Lowercase looks cleaner
 Lowercase is easier to write

5. Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

 Developers normally quote attribute values


 Quoted values are easier to read
 MUST use quotes if the value contains spaces

28
6. Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the
image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering,
because the browser can reserve space for the image before loading.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

7. Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and
groups entities better together.

<link rel="stylesheet" href="styles.css">

8. Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read
the HTML code.

Try to avoid too long code lines.

9. Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

10. Never Skip the <title> Element

The <title> element is required in HTML.

The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.

The <title> element:

 defines a title in the browser toolbar


 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
29
CSS Layout - the position Property

The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set
first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and
right properties.

An element with position: static; is not positioned in any special way; it is


always positioned according to the normal flow of the page:

This <div> element has position: static;

Example

div.static {

position: static;

border: 3px solid #73AD21;

30
position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned


element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Example

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which


means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have
been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS
that is used.

Example

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

position: absolute;

An element with position: absolute; is positioned relative to the nearest


positioned ancestor (instead of positioned relative to the viewport, like fixed).

31
However; if an absolute positioned element has no positioned ancestors, it uses
the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.

Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;

Here is the CSS that is used:

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;

An element with position: sticky; is positioned based on the user's scroll


position.

A sticky element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;

32
border: 2px solid #4CAF50;
}

CSS LAYOUT - FLOAT

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 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

In its simplest use, the float property can be used to wrap text around images.

img {
float: right;
}

img {
float: left;
}
img {
float: none;
}

CSS LAYOUT - THE Z-INDEX PROPERTY

The z-index property specifies the stack order of an element.

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).

33
An element can have a positive or negative stack order:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text

Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

z-index only works on positioned elements (position: absolute, position:


relative, position: fixed, or position: sticky) and flex items (elements that are
direct children of display: flex elements)

Example

Here we see that an element with greater stack order is always above an
element with a lower stack order:

<html>
<head>
<style>
.container {
position: relative;
}

.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
z-index: 3;

34
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>

<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>

</body>
</html>

CSS PREPROCESSOR

 A CSS preprocessor is a program that generate CSS from the preprocessor's


own unique syntax.
 There are many CSS preprocessors to choose from, however most CSS
preprocessors will add some features that don't exist in pure CSS, such as mixin,
nesting selector, inheritance selector, and so on. These features make the CSS
structure more readable and easier to maintain.
 To use a CSS preprocessor, must install a CSS compiler on our web server; Or use
the CSS preprocessor to compile on the development environment, and then
upload compiled CSS file to the web server.

 CSS Preprocessors are increasingly becoming a mainstay in the workflow


of front end web developers.

35
 CSS is an incredibly complicated and nuanced language, and in an effort
to make it’s usage easier, developers often turn to using preprocessors
such as SASS or LESS.

 few of most popular CSS preprocessors:

1. Sass

2. LESS

3. Stylus

4. PostCSS

SASS
 The SASS is the abbreviation of Syntactically Awesome Style Sheets. It is
a CSS pre-processor with syntax advancements.

 The style sheets in the advanced syntax are processed by the program
and compiled into regular CSS style sheets, which can be used in the
website.

 It is a CSS extension that allows to use feature like variables, nesting,


imports, mixins, inheritance, etc, all in a CSS-compatible syntax ie., it is
compatible with all the CSS versions.

 There are two types of syntax available for SASS:


1. SCSS(Sassy CSS): The files using this syntax use .scss extension.
2. Indented syntax (referred to as just “sass”): older syntax, Files using
this syntax use .sass extension.
Working Steps:
 Write the SCSS code.
 Compile the SCSS code into CSS code using the command sass input.scss
output.css. The first filename (input.scss) is the scss file that is to be compiled
and the second file name (output.css) is the processed CSS file, to be
included/attached in the Html document.
 Include the compiled CSS file in the Html file.
Now see how to make effective use of the important features of SCSS like
variables, nesting, mixins, and operators.
 The main HTML file is named index.html
 SCSS file is styling.scss and the CSS file is style.css
 Command to compile the SCSS file: sass styling.scss style.css

36
File name index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>SASS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="d1">Welcome to GeeksforGeeks.

<ul>

<li>Algo</li>

<li>DS</li>

<li>Languages</li>

<li>Interviews</li>

<li>CS subjects</li>

</ul>

</div>

</body>

</html>

37
Variables: Variables can be used to store CSS values that may be reused. To
declare a variable in SASS, the ‘$’ character is used. For eg, $v_name.

$fs: 30px;

$bgcolor: #00ff40;

$pd: 100px 350px;

#dl {

font-size: $fs;

color: $bgcolor;

padding: $pd;

After compiling the CSS code, save it in file by style.css.


#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
SASS allows CSS rules to be nested within each other, which follows the same
visual hierarchy of HTML. For eg. CSS property can be used to the <li> tag nested
inside the div tag.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
li {

38
color: $col2;
}
}
After compiling the CSS code save it file by style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
#dl li {
color: #ff0066e1;
}
Mixins

Mixins helps to make a set of CSS properties reusable i.e. it saves one code and
use it again and again. It can be included in other CSS rules by using
the @include directive.
Example: This example describes the use of @mixin & @include.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
font-family: sans-serif;
font-size: $fs;
color: blue;
}
#dl {
@include font_style();
padding: $pd;
}
After compiling the CSS code becomes:

39
#dl {
font-family: sans-serif;
font-size: 30px;
color: blue;
padding: 100px 350px;
}

Loops

Another common item in languages are loops, something else CSS lacks. Loops
can be used to repeat the same instructions multiple times without having to
be reentered multiple times. An example with SASS would be:

@for $vfoo 35px to 85px {

.margin-#{vfoo} {

margin: $vfoo 10px;

This loop saves us from having the to write the same code multiple times to
change the margin size.

If/Else Statements

Yet another feature which CSS lacks are If/Else statements. These will run a
set of instructions only if a given condition is true. An example of this in SASS
would be:

@if width(body) > 500px {

background color: blue;

} else {

background color: white;

40

You might also like