Scribd
Upload
12 views

UNIT 1-HTML5&CSS3

Uploaded by

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

UNIT 1-HTML5&CSS3

Uploaded by

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

FULL STACK TECHNOLOGIES

Chapter 1 - HTML5 and CSS3

HTML5 – Document Structure, Basic HTML Tags, Section elements, text, links,
tables, images, forms
CSS3( Cascading Style Sheet)- Evolution of CSS3, Syntax of CSS3, Types,
Selectors, Background, Font, Text, Borders.

INTRODUCTION TO HTML:
• HTML stands for Hyper Text Markup Language.
• HTML is a method of describing the format of web
documents
• It is used to display the document in the web browsers.
• HTML was developed by Tim Berners-Lee. HTML
standards are created by a group of interested
organizations called W3C (World Wide Web consortium).
HTML Tags:
o In HTML, formatting is specified by using tags.
o A tag is a format name surrounded by angle
brackets.
o End tags which switch a format off also contain
a forward slash.
Points to be remembered for HTML tags:
• They are not case sensitive i.e., <head>, <HEAD> and
<Head> is equivalent.
• If a browser does not understand a tag it will usually
ignore it.
• White spaces, tabs and newlines are ignored by the
browser.
STRUCTURE OF A HTML DOCUMENT:

• HTML document consists of 2 sections.


1. Head Section
1 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

2. Body Section

The basic document is shown below.


<html>
<head>
<! -- Head Section -->
</head>
<body>
<! -- Body Section -->
</body>
</html>
HTML ELEMENTS:
An HTML element is everything from the start tag to the end
tag
<p> This is a Paragraph </p>

Start Tag Element Content End Tag


HTML ATTRIBUTES:
HTML Elements can have Attributes. Attribute provide
additional information about an element and are always
specified in the start tag.
Syntax: <tag attributename=”value” > Content </tag>
Sample.html
<html>
<head>
<title> Basic HTML document </title>
</head>
<body>
<h1> Welcome to the world of Web
Technologies</h1>
<p> A sample HTML program </p>
2 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

</body>
</html>
Output:

BASIC HTML TAGS:


1. <html> :
• The <html> tag tells the browser that this is an HTML
document.
• The <html> tag represents the root of an HTML
document.
• The <html> tag is the container for all other HTML
elements.
2. <title>:
• 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
3. <body>:
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an
HTML document, such as text, hyperlinks, images,
tables, lists, etc.
Attribute Value Meaning
background URL Specifies a background image
for a document
bgcolor Color Specifies the background color
of a document

3 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

text Color Specifies the color of the text in


a document

4. <!- - - - > Comment Tag:


• The comment tag is used to insert comments in the
source code. Comments are not displayed in the
browsers.
5. Heading Tags:
• There are 6 heading tags.
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the most important heading. <h6> defines
the least important heading.
Attribute Value Meaning
Left
Specifies the alignment
Align Right
of a heading
Center

Example: Headings.html
<html>
<head>
<title>Heading Tage</title>
</head>
<body bgcolor=yellow text=blue>
<! - - This is a Comment - - >
<h1 align="left">This is Heading 1</h1>
<h2 align="center">This is Heading 2</h2>
<h3 align="right">This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
4 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

<h6 align="right">This is Heading 6</h6>


</body>
</html>
Output:

6. <p>: paragraph Tag


• Browser automatically add some space before and after
each <p> element

Attribute Value Meaning


Align Left, Specifies the alignment
Right, of text within a
Center paragraph
Justify

7. <font>:
The <font> tag specifies the font face, font size, and color of
text.
Attribute Value Meaning
Color rgb(x,x,x) Specifies the color of text
#xxxxxx
colorname
Face font_family Specifies the font of text
Size Number Specifies size of text

5 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

8. <link>:
• The <link> tag defines a link between a document and
an external resource.
• The <link> tag is used to link to external style sheets.

Attribute Value Meaning


Specifies the location of the
Href URL
linked document
_blank
_self
Specifies where the linked
Target _parent
document is to be loaded
_top
framename
Specifies the relationship
Rel Stylesheet between current document
and the linked document

9. <div>:
• The <div> tag defines a division or a section in an HTML
document.
• The <div> tag is used to group block-elements to format
them with CSS.
Attribute Value Meaning
Align Left, Specifies the
Right, alignment of a
Center heading
Justify

10. <br>:
• The <br> tag inserts a single line break.

6 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

• The <br> tag is an empty tag which means that it has


no end tag.
11. <marquee>:
It is used for Scrolling images and text in the web page
Attribute Value Meaning
Scroll,
Defines the type of
behavior slide
scrolling.
alternate
rgb(x,x,x) Deprecated-Defines the
bgcolor #xxxxxx direction of scrolling the
colorname content.
Up, down, Defines the direction of
direction
left, right scrolling the content.
Specifies how many
times to loop. The
default value is
Loop Number
INFINITE, which means
that the marquee loops
endlessly.
Defines how long to
scrolldelay Seconds delay between
each jump.
Defines how how far to
scrollamount number
jump.

Text
The following HTML tags are used for format the
appearance of the text on your web page.
(a). Headings – <h1> to <h6>
(b). Bold - <b> </b> or <strong> </strong>
7 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

The text in between the tags will be displayed in bold


(c). Italic - <i> </i>
Renders the text in italics i.e displays the text at a slight
angle.
(d). Underline - <u> </u>
Underlines the text written in between the tags
(e). Strike out - <strike> </strike>
Defines strike through text, puts a line right through
the center of the text, crossing it out.
(f).Preformatted text - <pre> </pre>
Text in <pre> element is displayed in fixed width font,
and it preserves both spaces and line breaks.
(g). Typewriter Text - <tt> </tt>
The text appears to have been typed by a type writer\
(h). <big> </big> - Defines bigger text
(i). <small> </small> - Defines smaller text
(j). <sub> </sub> - Defines a subscript text. Subscript that
appears half a character below the baseline.
(k). <sup> </sup> - Defines a superscript text. Superscript
that appears half a character above the baseline.
(l). <center></center> - It align the text to the center of the
page
Example: TextFormattingTags.html
<html>
<body>
<h1>This is Heading 1</h1>
<b>This text is in bold</b><br>
<i>This text is in Italics</i><br>
<u>This text is in Underlined</u><br>
<strike>This text is Striked</strike><br>

8 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

<em>This text is Emphasized</em><br>


<tt>This text is Type Writer Text</tt><br>
<big>This text is Bigger</big><br>
<small>This text is Smaller</small><br>
H<sub>2</sub>O<br>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br>
<center>This Text is aligned to Center</center><br>
</body>
</html>
Output:

Link
<a>: Anchor Tag
• The <a> tag defines a hyperlink, which is used to link
from one page to another.
• The most important attribute of the <a> element is the
href attribute, which indicates the link's destination.
• By default, links will appear as follows in all browsers:
▪ An unvisited link is underlined and blue
▪ A visited link is underlined and purple
▪ An active link is underlined and red
Attribute Value Meaning
Specifies the destination of
href URL
the link

9 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

_blank
_self
Specifies where to open the
target _parent
linked document
_top
framename

Example: Link.html
<html>
<body>
<a href="http://www.google.com" target="_self">
GOOGLE</a>
<br>
<a href="http://www.yahoo.com"
target="_blank">YAHOO</a>
<br>
<a href="Headings.html" target="_parent"> My
Page</a>
</body>
</html>

Output:

TABLES:

• For Systematic arrangement of information we often


require Tabular Structure.

10 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

• The biggest advantage of using tables on the web page


is that the information gets arranged systematically.

• The <table> tag defines an HTML table.

• An HTML table consists of the <table> element and one


or more <tr>, <th>, and<td> elements.

• The <tr> element defines a table row, the <th> element


defines a table header, and the <td> element defines a
table cell.

• An HTML table has two kinds of cells:


o Header cells - contains header information
(created with the <th> element)
o Standard cells - contains data (created with the
<td> element)

• The text in <th> elements are bold and centered by


default.

• The text in <td> elements are regular and left-aligned by


default.
Attributes of <table> tag:
Name Value Meaning
Left Specifies the alignment of
align Right a table according to
center surrounding text
rgb(x,x,x)
Specifies the background
bgcolor #xxxxxx
color for a table
colorname
Specifies whether or not
0
border the table is being used
1
for layout purposes
cellpadding pixels Specifies the space

11 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

between the cell wall and


the cell content
Specifies the space
cellspacing pixels
between cells
Pixels Specifies the width of a
Width
% table

Attributes of <tr> tag:

Name Value Meaning


Left
Right Aligns the content in a table
align
Center row
justify
rgb(x,x,x)
Specifies a background color
bgcolor #xxxxxx
for a table row
colorname
top
middle Vertical aligns the content in
valign
bottom a table row
baseline

Attributes of <th> and <td> tags:


Name Value Meaning
Left, Right
align Center Aligns the content in a cell
justify
rgb(x,x,x)
bgcolor #xxxxxx Aligns the content in a cell
colorname
12 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

Specifies the number of


rowspan number
rows a cell should span
Specifies the number of
colspan number
rows a cell should span
Top,
middle Vertical aligns the content
valign
bottom in a cell
baseline
Pixels
Width Specifies the width of a cell
%
Example:
<html>
<body>
<table bgcolor="yellow" border="1" cellspacing="0"
cellpadding="10" bordercolor="green" align="center">
<tr>
<th rowspan="2">Header1</th>
<th colspan="3">Header2</th>

</tr>
<tr>
<td>r1,c1</td>
<td>r1,c2</td>
<td>r1,c3</td>

</tr>
<tr>
<td colspan="2">r2,c1</td>
<td>r2,c2</td>
<td>r2,c3</td>

13 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

</tr>
<tr>
<td>r3,c1</td>
<td>r3,c2</td>
<td colspan="2">
<table border="1" bgcolor="cyan"
cellspacing="0" bordercolor="red">
<tr>
<th colspan="2">Nested
Table</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

14 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Output:

IMAGE:

• Images increase the visual appearance of web pages and


make your web pages more attractive.

• The <img> tag defines an image in an HTML page.

• The <img> tag has two required attributes: src and alt.
Attributes of <img> tag:
Name Value Meaning
src URL Specifies the URL of an image
Top,
bottom Specifies the alignment of an image
align
middle according to surrounding elements
left, right
alt text Specifies an alternate text for an image
Specifies the width of the border
border pixels
around an image
width pixels Specifies the width of an image
height pixels Specifies the height of an image
Specifies the whitespace on left and
hspace pixels
right side of an image

15 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Specifies the whitespace on top and


vspace pixels
bottom of an image
Specifies an image as a server-side
ismap ismap
image-map
Specifies an image as a client-side
usemap #mapname
image-map

Example:
<html>
<body>
<br>
<img src="14.jpg" width="400" height="200" align="right">
<img src="C:\\Users\\Admin\\Desktop\\Others\\13.jpg"
width="300" height="250" border="3" alt="Alternative Text">
</body>
</html>
Output:

FORMS:

• Form is a typical layout on the web page by which a


user can interact with the web page.

• The <form> tag is used to create an HTML form for user


input.

• The <form> element can contain one or more of the


following form elements:

16 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

o <input> <textarea> <select>


<option> <label>
Attributes of <form> tag:
Name Value Meaning
Specifies where to send the
action URL form-data when a form is
submitted
get Specifies the HTTP method to
method
post use when sending form-data
name text Specifies the name of a form
_blank
Specifies where to display the
_self
target response that is received after
_parent
submitting the form
_top

<input>:
▪ The <input> tag specifies an input field where the
user can enter data.
▪ <input> elements are used within a <form> element
to declare input controls that allow users to input
data.
▪ An input field can vary in many ways, depending on
the type attribute.
Attributes of <input > tag:

Name Value Meaning


Button,
checkbox Specifies the type <input>
Type
date, file, element to display
hidden

17 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

image,
month,
number
password,
radio,
reset
submit,
text
Name text Specifies the name of an
<input> element
Specifies that an <input>
element should be pre-
Checked checked selected when the page
loads (for type="checkbox"
or type="radio")
Specifies the value of an
Value Text
<input> element

<textarea>:
o The <textarea> tag defines a multi-line text input
control.
o A text area can hold an unlimited number of
characters, and the text renders in a fixed-width
font (usually Courier).
o The size of a text area can be specified by the cols
and rows attributes
Attributes of <textarea > tag:

Name Value Meaning


Name text Specifies a name for a text area

18 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Specifies the visible number of


Rows number
lines in a text area
Specifies the visible width of a
Cols number
text area
<select>:
o The <select> element is used to create a drop-down
list.
o The <option> tags inside the <select> element define
the available options in the list.
Attributes of <select > tag:

Name Value Meaning


Defines a name for the drop-
Name name
down list
Specifies that multiple options
Multiple multiple
can be selected at once
Defines the number of visible
Size number
options in a drop-down list

<label>: The <label> tag defines a label for an <input>


element.
Example: Login.html
<html>
<body>
<form name="f1" method="post" action="">
<table align="center" cellspacing="10">
<tr>
<td><label> Username: </label> </td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
19 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

<td><label> Password: </label></td>


<td><input type="password" name="t2"></td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT" ></td>
<td><input type="reset" value="RESET" ></td>
</form>
</body>
</html>
Output:

WORKING WITH LISTS:

• Lists are used to collect a group of items.

• There are 3 types of Lists in HTML


1. Ordered List
2. Unordered List
3. Definition List

1. ORDERED LIST:
• These are those in which the items are arranged in
some specific order.

• This list can be numerical or alphabetic.

• <ol> tag: The <ol> tag defines an ordered list.

20 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Attributes:
Name Value Meaning
1
A
Specifies the kind of marker to
type a
use in the list
I
i
Specifies the start value of an
start number
ordered list
Specifies that the list order
reversed reversed
should be descending

<li> tag: defines a list item.


Example:
<html>
<body>
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ol type="A">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ol start=3 type="i">
<li>Red</li>
<li>Green</li>
<li>Blue</li>

21 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

</ol>
</body>
</html>
Output:

2. UNORDERED LIST:
• The Unordered lists are those in which the items are
not arranged in any order.

• This defines a Bulleted List.

• <ul> tag: defines an unordered (bulleted) list.


Attributes:
Name Value Meaning
Disc
Specifies the kind of marker to
Type Square
use in the list
Circle

<li> tag: defines a list item.


Example:
<html>
<body>
<ul>
<li>Red</li>
<li>Black</li>
<li>White</li>

22 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

</ul>
<ul type="circle">
<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
<ul type="square">
<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
</body>
</html>
Output:

3. DEFINITION LIST
• These are lists of items that have 2 parts, a term to be
defined and the definition.
• This create lists similar to a dictionary.
o <dl> tag: defines a definition list. It is used
in conjunction with <dt> and <dd>
o <dt> tag: defines a term/name in a
definition list.
o <dd> tag: used to describe a term/name in
a definition list.
23 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

• Example:
<html>
<body>
<dl>
<dt>HTML:</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS:</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
Output:

FRAMES:

• HTML Frames divide a browser window into several pieces


or panes, each pane containing a separate HTML page.

• Each portion is called as a Frame.

• A Collection of Frames in the browser window is known


as a Frameset.

• HTML Frames allow authors to present documents in


multiple views, which may be independent windows or
sub windows.

24 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

• One of the Key advantages that frames offer is that you


can load and reload single frames without having to
reload the entire contents of the browser window.

• <frameset>:
▪ The <frameset> tag defines a frameset.
▪ The <frameset> element holds one or
more <frame> elements. Each <frame> element can
hold a separate document.
▪ The <frameset> element specifies how many
columns or rows there will be in the frameset, and
how much percentage/pixels of space will occupy
each of them.
Attributes of <frameset> tag:
Name Value Meaning
Pixels, % Specifies the number and size of columns
cols
* in a frameset
Pixels, % Specifies the number and size of rows in a
rows
* frameset

<frame>:
▪ The <frame> tag defines one particular window
(frame) within a <frameset>.
▪ Each <frame> in a <frameset> can have different
attributes, such as border, scrolling, the ability to
resize, etc.
Attributes of <frame> tag:

Name Value Meaning


Specifies the URL of the document to
src URL
show in a frame

25 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

0 Specifies whether or not to display a


frameborder
1 border around a frame
name text Specifies the name of a frame
noresize noresize Specifies that a frame is not resizable
yes
Specifies whether or not to display
scrolling no
scrollbars in a frame
auto
Example:
Frames.html:
<html>
<frameset cols="25%,*,25%">
<frame src="http://www.bing.com" name="f1" noresize>
<frame src="http://www.w3schools.com" name="f2" noresize>
<frame src="Mypage.html" name="f3" noresize>
</frameset>
</html>

26 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

CSS3(CASCADING STYLE SHEET)


INTRODUCTION TO CSS:

• A Style sheet is a set of Stylistic rules that expresses the


Presentation and Layout of Structured documents (Web
Pages).

• Using CSS we can determine the style and layout of the


web page.

• CSS is a style sheet language used to describe the


presentation semantics of a document written in Markup
Language.

• They allow us to specify rules for how the content of


elements within your document appears.

• With CSS, all formatting could be removed from the


HTML document and stored in a separate CSS file.

• Advantages of CSS:
1. Improves the formatting capability of a HTML page
2. Reduced Document size
3. Reduced Complexity and repetition – can reuse
the same style sheet with many different HTML
documents.
4. Saves time
5. A style sheet can import and use styles from other
style sheets.
CSS RULES:

• CSS consists of set of rules that determines how the


content of elements within your document should be
formatted.

• Syntax:
Selector { property1:value ; property2:value; }

27 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

• CSS rule is made up of 2 parts:


1. Selector
2. Declaration

• Selector : Element/ set of elements to which


declaration must be applied to

• Declaration: (i). Property: CSS Property that is to be


applied
(ii). Value: Value of CSS property

• Example:
h1
{
font-family : arial;
color : blue;
text-align : center;
}

• Grouping of Selectors: Separate selector with a


Comma
h1, h2, h3
{
color : blue;
font-family : calibri;
text-align : center;
}
‘CLASS’ SELECTOR / STYLESHEET CLASS:-

• ‘Class’ selector allows us to define multiple styles for the


same type of HTML element.

• Syntax:
selector.classname
{

28 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Property1 : valuel; property2 : value;


}

• To define a style that can be used by multiple HTML


elements remove tag name/selector.

• Syntax:
.classname
{
Property1 : valuel; property2 : value;
}
THE ‘id’ SELECTOR:

• The #id selector styles the element with the specified id

• Syntax:
#id
{
Property1 : valuel; property2 : value;
}

EXAMPLE:
<html>
<head>
<style type="text/css">
p.center
{ text-align:center; }

p.right
{ text-align:right; }

h2
{ text-align:center; color:orange; font-family:calibri; }

.cl1
29 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

{ color:green; }

#id1
{ color:blue; background-color:orange; }
</style>
</head>
<body>
<p class="center">This paragraph is styled by class
'center'</p>
<p class="right">This paragraph is styled by class
'right'</p>
<p class="cl1">This paragraph is styled by class
'cl1'</p>
<p id="id1">This paragraph is selected by ID
selector</p>
<h1 class="cl1">This Heading is styled by class
'cl1'</h1>
</body>
</html>

Output:

TYPES OF CSS:

• When a browser reads a style sheet, it will format the


HTML document according to the information in the style
sheet.

• There are three ways of inserting a style sheet:


1. Inline style sheet

30 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

2. Internal/Embedded style sheet


3. External style sheet

1. INLINE STYLE SHEET:


• Inline styles are placed directly inside a specific HTML
element in the code.
• The style is applied at the occurrence of the HTML
element by using “style” attribute in the relevant tag.
• The style attribute can contain any CSS Properties
• Inline styles cannot be reused at all
• Example:
<html>
<body>
<h1>This is Normal Text</h1>
<p style="color:red;font-size:30pt;text-
align:center">This Text is Styled</p>
</body>
</html>
Output:

2. INTERNAL STYLE SHEET:


• An internal style sheet may be used if one single page
has a unique style.
• Internal styles are defined within the <style> element,
inside the <head> section of an HTML page.
• All the desired selectors along with the properties and
values are included in the header section between
<style> and </style> tags.
• Example:
31 Chapter 1 - HTML5 and CSS3
FULL STACK TECHNOLOGIES

<html>
<head>
<style>
body {
background-color:pink;
}
h1 {
color: maroon;
font-family: verdana;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

3. EXTERNAL STYLE SHEET:


• External Style Sheets are useful when we need to
apply particular style to more than one web page.
• The central idea in this type of style sheet is that the
desired style is stored in an external .css file.

32 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

• The name of the external .css file has to be mentioned


on our web pages. Then the styles defined in the .css
file will be applied to all those web pages.
• <link> tag is used to link the external style sheet to a
web page.
• Example:
Mystyle.css:
p.left
{
text-align:left;
color:red;
text-decoration:overline;
font-family:tahoma;
font-size:20pt;
}
p.center
{
color:green;
text-align:center;
text-decoration:underline;
font-family:calibri;
font-size:30pt;
}
Ext.html:
<html>
<head>
<link rel="stylesheet" href="Mystyle.css">
</head>
<body>

33 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

<p class="left">This paragraph is


styled by class 'left'</h1>
<p class="center">This paragraph is
styled by class 'center'</p>
</body>
</html>
Output:

CSS PROPERTIES:
CSS BACKGROUND PROPERTIES:

PROPERTY NAME VALUE


background- fixed, scroll
attachment
background-color Rgb(X,X,X), #XXXXXX, colorname
background-image url(‘ url of image’)
background-position left top,left center, left bottom
center top,center bottom, center
center
right top,right center, right bottom
Example:
<html>
<head>
<style type="text/css">
h1
{
background-image:url('2.gif');
background-attachment:fixed;
background-repeat:no-repeat;

34 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

}
body
{
background-position:center top;
background-image:url('bunny giving flower.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-color:green;
}
</style>
</head>
<body>
<h1>This element is Styled</h1>
</body>
</html>

Output:

CSS TEXT PROPERTIES:

PROPERTY VALUE
NAME
color Color name
direction ltr,rtl
text-align left, right, center, justify
text- Underline, overline, Line-through,
decoration blink
text- none, uppercase, lowercase,

35 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

transform capitalize
text-indent length, %
vertical-align length, %, top, middle, bottom,
sup, super
letter-spacing normal, length(-ve)
word-spacing normal, length

CSS FONT PROPERTIES:

PROPERTY NAME VALUE

font-family Arial, Times New Roman, Etc……


font-size Small, smaller, medium, large,
larger, length, %
font-style normal, italic
font-variant normal, small-caps
font-weight normal, bold, bolder, 100-900
font-stretch Normal, wider, narrower

Example:
TextFont.css:
p.right
{
color:red;
font-size:large;
text-transform:capitalize;
text-align:right;
font-weight:200;
letter-spacing:-3;
word-spacing:5;
}

36 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

p.center
{
color:blue;
text-align:center;
text-decoration:underline;
text-tranform:uppercase;
font-style:italic;
font-size:30;

}
.left
{
color:green;
text-indent:20;
text-decoration:overline;
text-transform:lowercase;
font-family:tahoma;
font-size:small;
font-style:italic;

}
#id1
{
color:purple;
font-weight:900;
font-family:verdana;
text-decoration:line-through;
text-align:right;
font-variant:small-caps;
font-size:20;

37 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

}
TextFont.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="TextFont.css">
</head>
<body>
<p>This Paragraph is not styled</p>
<p class="left">This paragraph is styled by class left</p>
<p class="right">This paragraph is styled by class right</p>
<p class="center">This pragraph is styled by class center</p>
<p id="id1">This paragraph is styled by id</p>
</body>
</html>
Output:

CSS POSITIONING ELEMENTS:


PROPERTY NAME VALUE
Position static (normal flow), fixed (will
not move)
relative (can overlap), absolute ( x
& y co-ordinates)
Left, right, top, any Numeric value
bottom

38 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Example:
<html>
<body>
<h1 style="position:relative;left:10;top:10;z-
index:3;background-color:yellow">This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-
index:2;background-color:red"> This is layer 2</h1>
<h1 style="position:relative;left:100;top:-50;z-
index:1;background-color:green"> This is layer 3</h1>
<br><br><br>
<h1 style="position:relative;left:10;top:10;z-
index:2;background-color:yellow"> This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-
index:3;background-color:red"> This is layer 2</h1>
<h1 style="position:relative;left:100;top:-50;z-
index:1;background-color:green"> This is layer 3</h1>
<br><br><br>
<h1 style="position:relative;left:10;top:10;z-
index:1;background-color:yellow"> This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-
index:2;background-color:red"> This is layer 2</h1>
<h1 style="position:relative;left:100;top:-50;z-
index:3;background-color:green"> This is layer 3</h1>
</body>
</html>

39 Chapter 1 - HTML5 and CSS3


FULL STACK TECHNOLOGIES

Output:

40 Chapter 1 - HTML5 and CSS3

You might also like