Unit 2-Css and HTML
Uploaded by
nilam.patoliyaUnit 2-Css and HTML
Uploaded by
nilam.patoliyaUnit2 – Html and CSS
Looping
Outline HTML Outline CSS
Introduction to HTML What is CSS?
What is a Web Page? Syntax and structure of CSS
My First HTML Page CSS rules for Backgrounds, Colors and
HTML Code Formatting properties
Basic HTML Tags Manipulating texts, Fonts
Heading The Box Model
Paragraph
borders and boxes
Color
Margins and Padding
Font
List Lists
Anchor CSS Positioning and Float Property
Image Animations
HTML Tables Tooltip
HTML Forms Style images
HTML Meta tags Variables
Media tags Media Queries
HTML 5 tags and validation Wildcard Selectors (*, ^ and $) in CSS
Working with Gradients, Pseudo Class
Pseudo elements
What is a Web Page?
A webpage is a document, commonly written in HTML, that is viewed in an
Internet browser.
HTML – Hyper Text Markup Language is the notation for describing
document structure (semantic markup)
formatting (presentation markup)
A web page can be accessed by entering a URL into a browser's address
bar.
A web page may contain text, graphics, and hyperlinks to other web
pages and files.
The first web page was created at CERN by Tim Berners-Lee on August 6,
1991.
You can visit and browse the first website and the first web page at the
info.cern.ch address.
Creating HTML Pages
An HTML file must have an .htm or .html file extension
HTML files can be created with text editors:
NotePad, NotePad ++, PSPad
Or HTML editors (WYSIWYG Editors):
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Visual Studio
Open any above mentioned editors and create a new file with .html
extension and save the file.
After saving the file you can open the file with any Web Browser in order
to view the output.
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML Structure
HTML is comprised of “elements” and “tags”
Begins with <html> and ends with </html>
Elements (tags) are nested one inside another:
<html> <head></head> <body></body>
Tags</html>
have attributes:
<img src="logo.jpg" alt="logo" />
HTML describes structure using two main sections: <head> and <body>
The HTML source code should be formatted to increase readability and
facilitate debugging.
Every block element should start on a new line.
Every nested (block) element should be indented.
Browsers ignore multiple whitespaces in the page source, so formatting is harmless.
For performance reasons, formatting can be sacrificed
First HTML Page
<!DOCTYPE HTML> HTML header
<html> Opening tag
<head>
<title>My First HTML Page</title>
</head>
Closing tag
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
Basic HTML Tags
1. Headings
2. Paragraph
3. Colors
4. Fonts
5. List
6. Anchor Tag
7. Image
8. Table
9. Form
1) Headings
Headings are important because search engines use the headings to index
the structure and content of your web pages.
<h1> text </h1> -- largest of
the six
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> -- smallest of the six
align="position" --left (default), center
or right
2) <p> Paragraph
The HTML <p> element represents a paragraph.
Paragraphs are usually represented in visual media as blocks of text
separated from adjacent blocks by blank lines and/or first-line indentation,
but HTML paragraphs can be any structural grouping of related content,
such as images or form fields.
Paragraphs are block-level elements, and notably will automatically close
if another block-level element is parsed before the closing </p> tag.
We can use align attribute of the paragraph tag to specify the text
alignment for the text inside the paragraph, ex. <p align=“center”>our
test</p>
3) Colors
We can use color values for mainly two attributes named bgcolor and
color.
Possible values for the color are,
• many are predefined (red, blue, green, ...)
• all colors can be specified as a six character hexadecimal value: #RRGGBB
• #FF0000 – red
• #888888 – gray
• #00FF00 –green
• #000000 – black
For example, <body bgcolor=“red”> or <body bgcolor=“#888888”>
4) Fonts
The <font> tag specifies the font face, font size, and color of text.
The <font> tag is not supported in HTML5.
<font color="red" size="2" face="Times Roman">
This is the text of line one
</font>
<br/>
<font color="green" size="4" face="Arial">
Line two contains this text
</font>
<br/>
<font color="#FF9933" size="6" face="Courier">
The third line has this additional text
</font>
5) List
Ordered
List a) Block-A A. Block-A i. Block-A I. Block-A
1. Block-A b) Block-B B. Block-B ii. Block-B II. Block-B
2. Block-B c) Block-C C. Block-C iii. Block-C III. Block-C
3. Block-C d) Block-D D. Block-D iv. Block-D IV. Block-D
4. Block-D
o Block-A Block-A
Unordered
o Block-B Block-B
List
o Block-C Block-C
• Block-A
o Block-D Block-D
• Block-B
• Block-C
• Block-D
5.1) Ordered List (OL)
<ol> Types:
<li> Item one </li>
<li> Item two </li> Type = 1
<ol type="I"> (default)
<li> Sublist item one </li> Type = a
<li> Sublist item two </li> Type = A
<ol type="i"> Type = I
<li> Sub-sub list item one </li> Type = i
<li> Sub-sub list item two </li>
</ol>
</ol> Output
</ol>
5.2) Unordered List (UL)
<ul>
<li> One </li> Types:
<li> Two </li> Type = disc
<ul type="circle"> (default)
<li> Three </li> Type = circle
<li> Four </li> Type = square
<ul type="square">
<li> Five </li> Output
<li> Six </li>
</ul>
</ul>
</ul>
6) <a> Anchor Tag (Hyperlinks)
The <a> tag defines a hyperlink, which is used to link from one page to
another.
An Anchor tag have 3 important attributes:
the href attribute (hypertext reference) defines the target address of the document.
the name attribute of the anchor tag can be used to enable users to “jump” to a
specific point on a page.
the target attribute specifies how the destination page or the target document
should be opened. target="_ blank" is used for opening of the target page in a
new tab.
Link to an absolute URL:
Example, <a href="http://www.darshan.ac.in"> Darshan </a>.
Link to a relative URL:
Example, <a href=“./index.php"> Home </a>.
Link to a section within a URL:
Example, <a href=“#reference"> Reference Section. </a>.
7) Images
The HTML <img> element embeds an image into the document.
Syntax: <img src= "pathToImage" />
Attributes:
the src attribute is required, and contains the path to the image we want to embed.
the alt attribute holds a text description of the image, which isn't mandatory but is
incredibly useful for accessibility (screen readers read this description out to their
users so they know what the image means). Alt text is also displayed on the page if
the image can't be loaded for some reason: for example, network errors, content
blocking etc…
the width & height attribute can be in units of pixels or percentage of page or
frame.
the align attribute (currently deprecated) will aligns the image with its surrounding
context (Use the float and/or vertical-align CSS properties instead of this attribute).
8) Table
<table border=1> <table> table tag
<caption>Table Caption</caption>
<caption> optional table title
<tr> <tr> table row
<th>Heading1</th> <th> table header
<th>Heading2</th> <td> table data element
</tr>
<tr> Output
<td>Row1 Col1 Data</td>
<td>Row1 Col2 Data</td>
</tr>
<tr>
<td>Row2 Col1 Data</td>
<td>Row2 Col2 Data</td>
</tr>
</table>
HTML Forms
HTML forms are used to create GUIs on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down
menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in the form elements
to the server
• The form’s parameters tell browser how to send the information to the server (there
are two different ways it could be sent)
The <form> Tag
The <form parameters> ... </form> tag encloses form elements (and
probably other HTML as well)
The parameters to form tell what to do with the user input
• action="url" (required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
Form Elements
Input Input Types Input Types
(HTML4) (HTML5)
Select text number
password email
Textarea
checkbox search
Button radio url
submit tel
Label button range
reset color
Fieldset
file date
Legend time
datetime-local
Etc… month
week
HTML5 Form Validation
Form validation is a “technical process where a web-form checks if the
information provided by a user is correct.”
The form will either alert the user that something is not in correct format
and need to fix to proceed, or the form will be validated and the user will
be able to continue with their process.
Form can be validated both in Client-Side as well as Server-Side, it is
recommended to validate the form in both the side.
Form validation generally performs two functions.
1. Basic Validation
Emptiness
Length Validation etc……
2. Data Format Validation
Secondly, the data that is entered must be checked for
correct form and value.
Email Validation
Mobile Number Validation
HTML5 Form Validation (Cont…)
We can use required attribute in order to stop user sending empty data
to 1server.
<input type="text" name="txtName" require
d/>
We can use pattern attribute in order to force some format on user
before sending
1 <input the name="txtName"
type="text" data to server.
pattern="[0-9]
{10}"/>
We1 can usetype="text"
<input title attribute for custom error message.
name="txtName"
pattern="[0-9]{10}"
title="Please enter 10 digit mobile numb
er"
required/>
META Tag
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page.
Meta elements are typically used to specify page description, keywords,
author of the document, last modified and other metadata.
The metadata can be used by search engines (keywords), browsers (how
to display content or reload page) or other web services.
Meta Tag Attributes
Attribut Value Description
e
charset character_se Specifies the character encoding for the HTML
t document
author
description
name keywords Specifies a name for the metadata
robots
expires
content-type
http- Provides an HTTP header for the
default-style
equiv information/value of the content attribute
refresh
Gives the value associated with the http-equiv
content text
or name attribute
Not supported in HTML5. Specifies a scheme to
format/URI
scheme be used to interpret the value of the content
USA/Europe
attribute
Media Tags
Video tag
Audio tag
Video Tag
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
The width and height attributes are used to set width and height
respectively.
The autoplay attribute start a video automatically.
The muted attribute will mute your video sound.
The <source> element allows you to specify alternative video files in src
attribute which the browser may choose from. The browser will use the
first recognized format.
The text written1 in between
<video the height="200"
width="300" <video> autoplay
and </video>
muted> tags will display
only if browser do not support
<source the <video>
src=“video.mp4" element.
type="video/mp4">
<source src=“video.ogg" type="video/ogg">
The video tag is not supported in your
browser.
</video>
Audio Tag
The HTML <audio> element is used to play an audio file on a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The autoplay attribute start a audio automatically.
The muted attribute will mute your audio sound.
The <source> element allows you to specify alternative audio files in src
attribute which the browser may choose from. The browser will use the
first recognized format.
The text written in between the <audio> and </audio> tags will display
only if browser do not support the <audio> element.
1 <audio controls autoplay muted>
<source src=“myaudio.ogg" type="audio/ogg">
<source src=“myaudio.mp3" type="audio/mpeg">
The audio tag is not supported in your
browser. </audio>
What is CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
CSS defines layout of HTML documents. For example, CSS covers Fonts,
colors, margins, lines, height, width, background images, advanced
positions and many other things.
Importance of CSS :
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files.
External style sheets enable you to change the appearance and layout of all the
pages in a Web site, just by editing one single file.
Advantages :
Improves Website Presentation
External CSS makes Updates Easier and Smoother
External CSS helps Web Pages Load Faster
Disadvantages :
Browser Dependent
Basic Syntax of CSS
A CSS rule has two main parts: a selector, and one or more declarations
Selector Declaration 1 Declaration 2
h {color:blue; font-
1 size: 12px;}
property value property value
The selector can be HTML element, id or class.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has
a value.
The “id” selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined
with a "#“ in css.
The style rule below will be applied to the element with id="para1":
HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }
<h1> Output
How are you Hello Friends
</h1> How are you
The “class” selector
The class selector is used to specify a style for a group of elements.
The class selector uses the HTML class attribute, and is defined with a ".“
in css.
HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you
Different ways to write CSS
There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
1) Inline Style
It is possible to place CSS right in your HTML code, and this method of CSS
usage is referred to as inline css.
Inline CSS has the highest priority out of external, internal, and inline
CSS.
This means that you can override styles that are defined in external or
internal by using inline CSS.
If you want to add a style inside an HTML element all you have to do is
specify the desired CSS properties with the style HTML attribute.
Example: HTML
<p style="background: blue; color: white;"> My Inline CSS
</p>
2) Internal Style Sheet
This type of CSS is only for Single Web Page.
When using internal CSS, we must add a new tag, <style>, inside the
<head> tag.
The HTML code below contains an example of <style>'s usage.
HTML
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's
content!</p></body>
</html>
3) External Style Sheet
When using CSS it is preferable to keep the CSS separate from your
HTML.
Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS).
External CSS is a file that contains only CSS code and is saved with a
".css" file extension.
This CSSDemo.html
file is then referenced in your test.css
HTML using the <link> instead of
<html> #para1{
<style>.
<head> text-align: center;
<link rel=“stylesheet” }
type=“text/css” p
href=“test.css”> {
</head> color : blue;
<body> }
<p> Hello Friends </p>
<p id=“para1”> How are Output
you? </p> Hello Friends
</body> How are you?
</html>
3) External Style Sheet (Cont.)
Advantages:
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it in a separate file. Instead of
typing the same CSS code on every web page you have, simply have many pages
refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a single
CSS file.
Assign Multiple Classes
We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html test.css
<html> . class1
<head> {
<link rel=“stylesheet” color : blue;
type=“text/css” }
href=“test.css”> . class2
</head> {
<body> text-align : center;
}
<h1 class=“class1 class2”>
How are you? Output
</h1>
How are you?
</body>
</html>
Multiple Selection
We can apply same css to multiple selectors using comma separated
selector Demo.html
list, for example : test.css
<html> p, h1
<head> {
<link rel=“stylesheet” color : blue;
type=“text/css” }
href=“test.css”>
</head>
<body>
<p> Hello Friends </p> Output
<h1> How are you? </h1> Hello Friends
</body>
How are you?
</html>
Multi-level Selection
We can use hierarchical path to target html element by space
separated element/class/id names, for example :
Demo.html test.css
<html> div h1
<head> {
<link rel=“stylesheet” color : blue;
type=“text/css” }
href=“test.css”>
</head>
<body>
<h1>Hello Friends…</h1>
<div> Output
<h1>How are Hello Friends…
you?</h1>
</div>
How are you?
</body>
</html>
Background Property
Property Name
Background Color (background-color)
Background Image (background-image)
Background Image Repeat (background-repeat)
Fixed Background Image (background-attachment)
Background Image Positioning (background-position)
Background Color
The background-color property specifies the background color of an
element.
The background color of a page is defined in the body selector:
Below is example of CSS backgrounds
test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
Background Image
The background-image property specifies an image to use as the
background of an element.
For Example, test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
Background Image Repeat
You can have a background image repeat vertically (y-axis), horizontally
(x-axis), in both directions, or in neither direction.
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}
Fixed Background Image
The background-attachment property sets whether a background image is
fixed or scrolls with the rest of the page.
For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
Background Image Positioning
The background-position property sets the starting position of a
background image. test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
}
CSS Font
CSS font properties define the font family, boldness, size, and the style of
a text. Property Name
1. Font Color (color)
2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
CSS Font (Cont.)
h4{
• Font Color color : red;
• Set the text-color for different elements }
h4{
font-family : sans-
• Font Family serif;
}
• The font family of a text is set with the font-family
h4{ property.
font-size: 120%;
font-size : 10px;
• Font Size font-size : small;
font-size : smaller;
• The font-size property sets the size of the text. font-size : x-small;
• font-size : 120% font-size : xx-small;
• font-size : 10px; font-size : large;
• font-size : x-large; font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
CSS Font (Cont.)
• Font Style h4{
font-style: italic ;
• The font-style property is mostly used to }
specify italic text.
h4{
font-weight : 300;
• Font Weight font-weight : bolder;
font-weight : lighter;
• The font-weight property sets how thick or }
thin characters in text should be displayed.
h4{
font-variant: small-
• Font Variant caps;
• The font-variant property specifies whether or
}
not a text should be displayed in a small-caps
font.
• font-variant : small-caps;
CSS Text Property
While CSS Font covers most of the traditional ways to format your text,
CSS Text allows you to control the spacing, decoration, and alignment of
your text. Property Name
1. Text Decoration (text-decoration)
2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
CSS Text Property (Cont.)
Text Decoration h4{
The text-decoration property is used to set or remove text-decoration : line-
decorations from text. through;
text-decoration :
The text-decoration property is mostly used to remove
overline;
underlines from links for design purposes. text-decoration :
Text Indent underline;
h4{ text-decoration : none;
The text-indentation property is used to specify the text-indent : 20px;
}
indentation of the first line of a text. text-indent : 30%;
Text Align }
The text-align property is used to set the horizontal h4{
alignment of a text. text-align : right;
text-align : justify;
text-align : left;
text-align : center;
}
CSS Text Property (Cont.)
Text Transform h4{
The text-transform property is used to specify text-transform :
uppercase and lowercase letters in a text. capitalize;
text-transform :
uppercase;
White Space text-transform :
The white-space attribute allows you to prevent text lowercase;
h4{
from wrapping until you place a break <br /> into } white-space :
your text. nowrap;
white-space :
normal;
Word Spacing white-space : pre;
}
h4{
With the CSS attribute word-spacing you are able to
specify the exact value of the spacing between your word-spacing : 10px;
words. Word-spacing should be defined with exact }
values.
CSS Text Property (Cont.)
Letter Spacing h4{
With the CSS attribute letter-spacing you are able to letter-spacing : 3px;
specify the exact value of the spacing between your }
letters. Letter-spacing should be defined with exact
values.
h4{
Line Height line-height : 10px;
The line-height attribute will set the height of the line }
in the page.
The Box Model
All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements,
and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space
elements in relation to other elements.
The Box Model (Cont)
The image below illustrates the box model:
Margin
Border
Padding
Content
The Box Model (Cont)
margin-top
border-top
padding-top
padding-right
margin-right
border-right
padding-left
margin-left
border-left
Content
padding-bottom
border-bottom
margin-bottom
CSS Padding
The CSS padding properties define the space h4{
between the element border and the element padding : 10px;
}
content.
h4{
The top, right, bottom, and left padding can be padding-top : 10px;
padding-right :
changed independently using separate 20px;
properties. padding-bottom : 30
px;
padding-left : 40 px;
}
h4{
padding : 10px 20px
30px 40px;
A shorthand padding property can also be used, }
to change all padding at once.
CSS Border
• The CSS border properties allow you to specify the h4{
style and color of an element's border. border : 1px solid
red;
• Border Style Types }
h4{
• The border-style property specifies what kind of border border-style : solid;
to display. border-style :
• Border Width dotted;
border-style :
• The border-width property is used to set the width of double;
the border. h4{
}
border-width : 7px;
• Border Color }
• The border-color property is used to set the color of the
h4{
border.
border-color : red;
• Border colors can be any color defined by RGB, }
hexadecimal, or key terms. Below is an example of
each of these types. h4{
border-top : 1px
• The top, right, bottom, and left border can be solid red;
changed independently using separate properties. }
CSS Margin
• The CSS margin properties define the h4{
margin: 10px;
space around elements }
h4{
• The top, right, bottom, and left margin margin -top : 10px;
can be changed independently using margin -right : 20px;
margin -bottom : 30
separate properties. px;
margin -left : 40 px;
}
h4{
margin : 10px 20px 30px
40px;
}
• A shorthand margin property can also
be used, to change all margins at once.
CSS Positioning
• Absolute Positioning
h1{
• With absolute positioning, you define the exact pixel position : absolute;
value where the specified HTML element will left : 50px;
appear. top : 100px;
• The point of origin is the top-left of the browser's }
viewable area, so be sure you are measuring from h1{
that point. position : relative;
• Relative Positioning left : 50px;
• Relative positioning changes the position of the top : 100px;
HTML element relative to where it normally appears }
• Fixed Positioning h1{
• The element is positioned relative to the browser position : fixed;
window, in fixed position, element will be in the top : 50px;
same place even we scroll the screen. left : 100px;
• Sticky Positioning }
• An element with position: sticky; is positioned based h1{
on the user's scroll position. position : sticky;
• A sticky element toggles between relative and fixed, top : 0px;
depending on the scroll position. }
Styling Links
Anchor/Link States
The four links states are:
1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouse over it
4. a:active - a link the moment it is clicked
a:link{
color:#FF0000; /*unvisited link*/
}
a:visited{
text-decoration : none; /*visited link*/
}
a:hover{
color:#00FF00; /*mouse over link*/
}
a:active{
color:#0000FF; /*selected link*/
}
CSS list
The CSS list properties allow you to:
Set different list item markers for ordered & unordered lists
Set an image as the list item marker
Set the position of the marker
CSS List Style Type
CSS List with Image
CSS List Position
ul{
list-style-type: circle;
list-style-type: disc;
list-style-type: square;
list-style-type: armenian;
list-style-type: cjk-ideographic;
list-style-type: decimal-leading-zero;
}
ol{
list-style-image : url(‘imgPath’);
}
ol{
list-style-position : outside;
list-style-position : inside;
CSS Layers
• CSS allows you to control which CSS
#division1{
item will appear on top with the use position : absolute;
of layers. height : 100px;
width : 100px;
• In CSS, each element is given a left : 100px;
priority. top : 150px;
background-color :
• If there are two overlapping CSS red;
z-index : 5;
positioned elements, the element }
with the higher priority will appear #division2{
on top of the other. HTML
position : absolute;
height : 200px;
• To manually define a id="division1">
<div priority, set the width : 200px;
left : 50px;
z-index value. The</div>
larger the value, top : 100px;
<div id="division2">
the higher the priority
</div> the element
background-color :
blue;
will have. z-index : 2;
}
CSS Float Property
The CSS float property defines that an element should be taken out of the
normal flow of the document and placed along the left or right side of its
containing block.
Text and inline elements will then wrap around this element.
CSS
#division1{
background-color : red;
HTML float : left;
width: 40%;
<div id="division1"> }
ABC Content #division2{
</div> background-color : blue;
<div id="division2"> float : right;
XYZ Content width: 40%;
</div> }
Introduction to CSS3
CSS3 is the latest standard for CSS.
CSS3 is completely compatible with earlier versions of CSS.
CSS3 has been split into "modules". It contains the "old CSS specification"
(which has been split into smaller pieces). In addition, new modules are
added.
CSS3 Transitions are a presentational effect which allow property changes
in CSS values, such as those that may be defined to occur on :hover to
occur smoothly over a specified duration – rather than happening
instantaneously as is the normal behavior.
Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
Introduction to CSS3 (Cont)
Some of the most important CSS3 modules are:
CSS Animations and Transitions
Calculating Values With calc()
Advanced Selectors
Generated Content and Counters
Gradients
Webfonts
Box Sizing
Border Images
Media Queries
Multiple Backgrounds
CSS Columns
Animations
CSS animations make it possible to animate transitions from one CSS style
configuration to another.
Animations consist of two components,
a style describing the CSS animation
a set of keyframes that indicate the start and end states of the animation’s style, as
well as possible intermediate waypoints.
There are three key advantages to CSS animations over traditional script-
driven animation techniques:
They’re easy to use for simple animations; you can create them without even having
to know JavaScript.
The animations run well, even under moderate system load. Simple animations can
often perform poorly in JavaScript.
Letting the browser control the animation sequence lets the browser optimize
performance and efficiency by, for example, reducing the update frequency of
animations running in tabs that aren't currently visible.
Configuring the animation
To create a CSS animation sequence, you style the element you want to
animate with the animation property. This lets you configure the timing,
duration, and other details of how the animation sequence should
progress.
Note: This does not configure the actual appearance of the animation, which is done
using the @keyframes
The sub-properties of the animation property are:
animation-name : Specifies the name of the @keyframes at-rule describing the
animation’s keyframes.
animation-duration : Configures the length of time that an animation should take
to complete one cycle.
animation-timing-function : Configures the timing of the animation; that is, how
the animation transitions through keyframes, by establishing acceleration curves.
(linear, ease, ease-in, ease-out etc…)
animation-delay : Configures the delay between the time the element is loaded
and the beginning of the animation sequence.
animation-iteration-count : Configures the number of times the animation should
repeat; you can specify infinite to repeat the animation indefinitely.
Defining the animation sequence using
keyframes
Once you’ve configured the animation’s timing, you need to define the
appearance of the animation. This is done by establishing two or more
keyframes using the @keyframes at-rule.
Each keyframe describes how the animatedCSS element should render at a
given time during
HTML the animation sequence.
p {
animation-duration: 3s;
animation-
<p>
name: slidein;
Hello World
}
</p>
div {
@keyframes slidein {
width: 100px;
from { /* or 0% */
margin-left: 100%;
height: 100px;
width: 300%;
background-color: red;
}
animation-name: example;
to { /* or 100% */
animation-duration: 4s;
margin-left: 0%;
}
width: 100%;
@keyframes example { }
from {background-color: red;} }
Tooltip
A tooltip is often used to specify extra information about something when
the user moves the mouse pointer over an element.
HTML CSS
.tooltip .tooltiptext {
<div class="tooltip">Hover here to visibility: hidden;
see tooltip width: 120px;
<span class="tooltiptext">Tooltip background-color: black;
text</span> color: #fff;
</div> text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
CSS }
.tooltip {
position: relative; .tooltip:hover .tooltiptext {
display: inline-block; visibility: visible;
border-bottom: 1px dotted black; }
}
Style Images
We can use many properties with Images like,
Opacity(The opacity property can take a value from 0.0 - 1.0. The lower value, the
more transparent)
img {
opacity: 0.5;
}
border-radius(Round image-border-radius: 8px; , circle image-border-
radius: 50%;)
img {
border-radius: 8px;
}
margimax-width to be 100% and height to be auto (to make it responsive)
img {
max-width: 100%;
height: auto;
margin-left, margin-right to be auto and display to be block (to make it aligned
center)
img {
display: block;
Filter
.blur{filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
CSS Variables / Custom Properties
Custom properties (sometimes referred to as CSS variables or cascading
variables) are entities defined by CSS authors that contain specific values
to be reused throughout a document.
Advantages of using CSS variables are:
makes the code easier to read (more understandable)
makes it much easier to change.
CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document.
To create a variable with global scope, declare it inside the :root selector. The :root selector
matches the document's root element.
local variables can be used only inside the selector where it is declared.
To create a variable with local scope, declare it inside the selector that is going to use it.
We can use var() function in order to access the variable set in the css.
A good way to use CSS variables is when it comes to the colors of your
design. Instead of copy and paste the same colors over and over again,
you can place them in variables.
CSS Variables / Custom Properties
First of all: CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while
local variables can be used only inside the selector where it is declared.
To create a variable with global scope, declare it inside the :root selector.
The :root selector matches the document's root element.
To create a variable with local scope, declare it inside the selector that is
going to use it.
The following example is equal to the example above, but here we use
the var() function.
First, we declare two global variables (--blue and --white). Then, we use
the var() function to insert the value of the variables later in the style
sheet:
The variable name must begin with two dashes (--) and it is case
sensitive!
CSS Variables (Example)
HTML CSS
:root{
<p> --myFavColor : orange;
Hello World --myNextFacColor : green;
</p> }
<div> p{
How are you? background-color: var(--myFavColor);
</div> color: var(--myNextFacColor);
}
div{
background-color: var(--
myNextFacColor);
color: var(--myFavColor);
}
Media Queries
Media queries are a way to target browser by certain characteristics,
features, and user preferences, then apply styles based on those things.
Perhaps the most common media queries in the world are those that
target particular viewport ranges and apply custom styles.
General syntax for the media queries in CSS is,
Syntax
@media [media-type] ([media-feature]) {
/* Styles! */
}
It consists of:
A media type, which tells the browser what kind of media this code is for (e.g.
all,print, screen etc…).
A media feature, which is a rule, or test that must be passed for the contained CSS
to be applied.
A set of CSS rules that will be applied if the test passes and the media type is
correct.
Media Query (Cont.)
Media Types:
All(Used for all media type devices)
Print(Used for print preview mode)
Screen(Used for computer screens, tablets, smart-phones etc).
speech
Media Features:
width & height(Height of the viewport, Width of the viewport)
min-width, min-height, max-width & max-height
Orientation(Orientation of the viewport, Landscape or portrait)
<!DOCTYPE html><html><head>
<style>
body {
background-color: pink;}
@media screen and (min-width: 1200px) {||breakpoint
body {
background-color: lightgreen;
}}
</style></head><body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the
viewport is 480px wide or wider.</p></body>
Media Query (Example)
<!DOCTYPE html><html><head>
<style>body {
background-color: pink;
font-size:100px;}
@media screen and (max-width: 1200px) {
body {background-color: lightgreen;
font-size:100px; }}
@media screen and (max-width: 1000px) {
body {background-color: red;font-size:75px;}}
@media screen and (max-width: 700px) {
body {
background-color: blue;
font-size:50px; }}
@media screen and (max-width: 500px) {body {
background-color: yellow;
font-size:25px; }}
</style></head><body>
<h1>Resize the browser window to see the effect!
</h1>
<p>The media query will only apply if the media
type is screen and the viewport is 480px wide or
Media Query (cont.)
We can also use and/or logic in media query, for example
We can use and as a separator if we want two condition to satisfy before applying
the CSS. CSS
@media screen and (min-width: 600px) and (max-width: 900px) {
body {
color: blue;
}
}
We can use , (comma) as a separator if we want anyone of the condition to satisfy
CSS
before applying the CSS.
@media (min-width: 600px), (orientation: landscape) {
body {
color: blue;
}
}
Wild Card Selectors
Wildcard selector is used to select multiple elements simultaneously.
It selects similar type of class name or attribute and apply CSS property.
Some of the wild card selector are,
[attribute*=”str”] Selector ( e.g. [class*="str"] )
It will select all the elements with the given attribute containing the str.
[attribute^=”str”] Selector ( e.g. [class^="str"] )
It will select all the elements with the given attribute starts with the str.
[attribute$=”str”] Selector ( e.g. [class$="str"] )
It will select all the elements with the given attribute ends with the str.
Gradients
CSS gradients let you display smooth transitions between two or more
specified colors.
CSS defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction (or an angle) along with the gradient effect.
Radial Gradients (defined by their center)
The radial-gradient() function sets a radial gradient as the background image.
A radial gradient is defined by its center.
To create a radial gradient you must define at least two color stops.
Linear Gradients
To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction (or an angle) along with
the gradient effect.
Syntax
background-image: linear-gradient(direction, color-stop1, color-
stop2, ...);
direction:
to bottom
to top
to right
to left
to bottom left
180deg
Etc…
Linear Gradients (Example)
Example:
CSS
background-image: linear-gradient(red, yellow);
Output:
background-image: linear-gradient(to right, red , yellow);
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: linear-gradient(180deg, red, yellow);
A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to
"to right". A value of 180deg is equivalent to "to bottom".
Radial Gradients
To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction (or an angle) along with
the gradient effect. Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-
color);
shape:
Ellipse (defalt)
Circle
size:
farthest-corner (default)
closest-corner
farthest-side
closest-side
position:
Center (default)
Etc…
Radial Gradients (Example)
Example:
CSS
background-image: radial-gradient(red, green, yellow);
Output:
<!DOCTYPE html><head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
</style></head><body>
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
<div id="grad1"></div></body>
</html>
Pseudo Classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to: Syntax
Style an element when a user mouse over it selector:pseudo-class {
Style visited and unvisited links differently property: value;
Style an element when it gets focus }
Some important pseudo classes are:
active
disabled
first-child
nth-child()
focus
hover
visited
<html><head><style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;}
div:hover {
background-color: blue;}</style></head><body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
<!DOCTYPE html><html><head>
<style>
p:first-child {
color: blue;}
</style></head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div></body></html>
Pseudo Elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to: Syntax
Style the first letter, or line, of an element selector::pseudo-element {
Insert content before, or after, the content of an element
property: value;
pseudo elements are, }
after(we can add text as well as image)
before
first-letter
first-line
selection
<!DOCTYPE html><html><head><style>
p::first-line {
color: #ff0000;
font-variant: small-caps;}
</style></head><body>
<p>You can use the ::first-line pseudo-element to add a special effect to
the first line of a text. Some more text. And even more, and more, and
more, and more, and more, and more, and more, and more, and more,
and more, and more, and more.</p>
</body>
</html>
<!DOCTYPE html><html><head>
<style>
::selection {
color: red;
background: yellow;}
</style></head><body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Bootstrap
Bootstrap is Free front-end framework made of HTML, CSS and
JavaScript Plugins (optional) for developing Responsive Websites.
Responsive websites means websites which Automatically Adjust
themselves to look good on all devices like mobile, desktop,laptop,tablet
etc…
Why to Use Bootstrap?
Easy to use
Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features
It's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach
Mobile-first styles are part of the core framework
Browser compatibility
Compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Free
Responsive Web Design
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
Designing For The Best Experience For All Users
Web pages can be viewed using many different devices: desktops, tablets,
and phones. Your web page should look good, and be easy to use,
regardless of the device.
Web pages should not leave out information to fit smaller devices, but
rather adapt its content to fit any device:
It is called responsive web design when you use CSS and HTML to resize,
hide, shrink, enlarge, or move the content to make it look good on any
screen.
What is The Viewport?
The viewport is the user's visible area of a web page.
Before tablets and mobile phones, web pages were designed only for
computer screens, and it was common for web pages to have a static
design and a fixed size.
HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web
pages:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
This gives the browser instructions on how to control the page's
dimensions and scaling.
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is
