HTML CSS Bootstrap2
Uploaded by
hiteshsinghr274HTML CSS Bootstrap2
Uploaded by
hiteshsinghr274Introduction to HTML ,CSS And
Bootstrap
What Is HTML
• HTML stands for Hyper Text Markup Language
• It is used to design web pages using a markup language.
• HTML is used to create the structure of web pages and
website that are displayed on the Internet. HTML
basically contains Tags and Attributes that are used to
design the web pages.
• Project1, Project2(http://localhost/ischool/index.php)
• Project3
• The markup language is used to define the text document
within the tag which defines the structure of web pages.
• HTML 5 is the fifth and current version of HTML.
HTML Basic Structure of Web Page
HTML Basic Tags
• <Doctype>: A doctype or document type declaration is an
instruction that tells the web browser about the markup
language in which the current page is written. It is not an element
or tag. The doctype declaration is not case-sensitive.
• <HTML>: This tag is used to define the root element of HTML
document. This tag tells the browser that it is an HTML document
• <Head>:This tag is used to define the head portion of the HTML
document that contains information related to the document.
Elements within the head tag are not visible on the front-end of a
webpage.
• <Body>:The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser
will show on the front end.
• <Head>The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include:
• <style>-This html tag allows us to insert styling into our web pages and make
them appealing to look at with the help of CSS.
• <title>-The title is what is displayed on the top of your browser when you visit a
website and contains the title of the webpage that you are viewing.
• <base>-It specifies the base URL for all relative URL’s in a document.
• <noscript>– Defines a section of HTML that is inserted when the scripting has
been turned off in the users browser.
• <script>-This tag is used to add functionality in the website with the help of
JavaScript.
• <meta>-This tag encloses the meta data of the website that must be loaded every
time the website is visited. For eg:- the metadata charset allows you to use the
standard UTF-8 encoding in your website. This in turn allows the users to view
your webpage in the language of their choice. It is a self closing tag.
• <link>– The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self
closing.
• !DOCTYPE html>
• <html>
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <!--The above meta characteristics make a website compatible with different
devices. -->
• <title>Demo Web Page</title>
• </head>
•
• <body>
• <h1>Wel come to Full Stack Web Development </h1>
•
• <p>A computer science portal Web Development</p>
•
• </body>
• </html>
Example 1
• <!DOCTYPE html>
• <html>
•
• <!-- Head Section content -->
• <head>
•
• <!-- Page title -->
• <title>Basic Web Page</title>
• </head>
•
• <!-- Body Section content -->
• <body>
•
• <!-- Used to display heading content -->
• <h1>Welcome to My First Page </h1>
•
• <!-- Used to display paragrapg content -->
• <p>A computer science Full Stack Web Development Course</p>
• </body>
•
• </html>
HTML Comments
• The comment tag (<!– Comment --> ) is used to insert comments in the HTML code.
• It is a simple piece of code that is wiped off (ignore) by web browsers i.e. , not displayed by
the browser.
• Use CTR + / for comment short cut key
• <!DOCTYPE html>
• <html>
• <body>
• <!--This is heading Tag, It wont be displayed by the browser -->
•
• <h1>Hello </h1>
• <!--This is single line comment,It wont be displayed by the browser -->
•
• <h2>This is single line comment</h2>
• </body>
• </html>
• Web Browsers
• The purpose of a web browser (Chrome, Edge,
Firefox, Safari) is to read HTML documents and
display them correctly.
• A browser does not display the HTML tags, but
uses them to determine how to display the
document:
HTML Head
• <!DOCTYPE html> • OUTPUT
• <html>
• <body> • This is heading 1
• <h1>This is heading 1</h1> • This is heading 2
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3> • This is heading 3
• <h4>This is heading 4</h4>
•
• This is heading 4
<h5>This is heading 5</h5>
• <h6>This is heading 6</h6>
• This is heading 5
• This is heading 6
• </body>
• </html>
• HTML Pragraph:These tags help us to write
paragraph statements on a webpage. They
start with the <p> tag and ends with </p>.
• HTML Break: – These tags are used for
inserting a single line type break. It does not
have any closing tag. In HTML the break tag is
written as <br>.
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Full Stack Web Development</title>
</head>
<body>
<h1>Praghraph without Break </h1>
<p> A Computer Science portal for Full Stack Web Develpment
A Computer Science portal for geeks Stack Web Develpment
A Computer Science portal for geeks Stack Web Develpment
</p>
<h1>Praghraph with Break </h1>
<p> A Computer Science portal for Full Stack Web Develpment <br>
A Computer Science portal for geeks Stack Web Develpment <br>
A Computer Science portal for geeks Stack Web Develpment <br>
</p>
</body>
</html>
OUTPUT
• Praghraph without Break
• A Computer Science portal for Full Stack Web Development
A Computer Science portal for geeks Stack Web
Development A Computer Science portal for geeks Stack
Web Development
• Praghraph with Break
• A Computer Science portal for Full Stack Web Development
A Computer Science portal for geeks Stack Web
Development
A Computer Science portal for geeks Stack Web
Development
Horizantal Line <HR>
• The <hr> tag is used to break the page into
various parts, creating horizontal margins with
help of a horizontal line running from the left
to right-hand side of the page.
• This is also an empty tag and doesn’t take any
additional statements.
Example 3
<!DOCTYPE html>
<html>
<head>
<title>Full Stack Web Developmwnr </title>
</head>
<body>
<h1>Hello Full Stack Web Development </h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
Output:
Hello Full Stack Web Development
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
A Computer Science portal for SPU
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other
elements).
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• Explain
• The <html> element is the root element and it defines the whole HTML document.
• It has a start tag <html> and an end tag </html>.
• Then, inside the <html> element there is a <body> element:
Empty HTML Elements
• HTML elements with no content are called
empty elements.
• The <br> tag defines a line break, and is an
empty element without a closing tag:
• Example
<p>This is a <br> paragraph with a line
break.</p>
HTML is Not Case Sensitive <p> OR <P>
<html> OR <HTML> are Same
HTML Attributes
• HTML attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• <a href="https://www.XYZ.com">Visit XYZ</a>
• <img src="img_girl.jpg">
• The width and height Attributes
<img src="img_girl.jpg" width="500" height="600">
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font, size, and more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an element
• Link of HTML Attribute List
• Attribute list
• The lang Attribute
• You should always include the lang attribute inside the
<html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.
• The following example specifies English as the language:
• <!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
<pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
• Example
• <pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Styles
• The HTML style attribute is used to add styles
to an element, such as color, font, size, and
more.
• <tagname style="property:value;">
• Example
• I am Red
• I am Blue
• I am Big
• Example1
• Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
EXample2:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
• Text Color
• The CSS color property defines the text color for an HTML element:
• Example
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
• Fonts
• The CSS font-family property defines the font to be used for an HTML element:
• Example
• <h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
• Text Size
• The CSS font-size property defines the text size for an HTML element:
• Example
• <h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
• Text Alignment
• The CSS text-align property defines the horizontal text alignment for an HTML element:
• Example
• <h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
• Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
• <b> <strong> Element: defines bold text, without any extra importance.
<b>This text is bold</b>
<strong> Element:element defines text with strong importance.
<strong>This text is important!</strong>
<i> Element: he content inside is typically displayed in italic.
<i>This text is italic</i>
• <em> element:emphasized text. typically displayed in italic.
<em>This text is emphasized</em>
• <small> Element:element defines smaller text:
<small>This is some smaller text.</small>
• <mark> Element: text that should be marked or highlighted:
<p>Do not forget to buy <mark>milk</mark> today.</p>
<del> Element : strike a line through deleted text:
<p>My favorite color is <del>blue</del> red.</p>
<ins> Element: underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<sub> Element: defines subscript text like H2O:
<p>This is <sub>subscripted</sub> text.</p>
<sup> Elementdefines superscript text. ike WWW[1]:
<p>This is <sup>superscripted</sup> text.</p>
Example
<HTML>
<BODY>
<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</BODY>
</HTML>
OUT PUT
• This text is bold This text is important!
• This text is italic
• This text is emphasized
• This is some smaller text.
• Do not forget to buy milk today.
• My favorite color is blue red.
• My favorite color is blue. red
• This is subscripted text.
• This is superscripted text
Quotation and Citation Elements
• this chapter we will go through the <blockquote>,<q>,
<abbr>, <address>, <cite>, and <bdo> HTML elements.
• Tag Description
• <abbr> Defines an abbreviation or acronym <address>
Defines contact information for the author/owner
of a document
• <bdo> Defines the text direction
<blockquote> Defines a section that is quoted from
another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
HTML Colors
• HTML colors are specified with predefined
color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
• HTML supports 140 standard color names.
HTML RGB and RGBA Colors
RGB color value
• represents RED, GREEN, and BLUE light sources.
• rgb(red, green, blue) ach parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.
• This means that there are 256 x 256 x 256 = 16777216 possible colors!
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and
blue) are set to 0.
• rgba(red, green, blue, alpha)
• RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
• rgba(255, 99, 71, 0)
• HEX Color Values
• In HTML, a color can be specified using a hexadecimal value in the form:
• #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
• #ff0000 is displayed as red
• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.
• #ff6347 mix color
• HTML HSL and HSLA Colors
• HSL stands for hue, saturation, and lightness. hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage value. 0% is black, and 100% is white.
• Example hsl(0, 100%, 50%)
• HSLA color values are an extension of HSL with an Alpha channel (opacity).
• HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.
• hsla(hue, saturation, lightness, alpha)
• hsla(9, 100%, 64%, 0)
• Background Color
• You can set the background color for HTML elements:
• <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
• Text Color
• You can set the color of text:
• <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
• Border Color
• You can set the color of borders:
• <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
• Color Values
• In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values.
• <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Example HTML Color
<!DOCTYPE html>
<title>My Sample</title>
<html>
<head>
<title>HTML BG Color</title>
</head>
<body style="background-color:red;">
<h1> This page is a demo </h1>
<h3 style="color:orange;">HTML Colors</h3>
<p style="color:orange;border-width:10px;border-style:solid;border-color:olivedrab;">
Remove the border color then refresh this example.
</p>
<h3 style="background-color:yellow;">I have a background color.</h3>
<h3 style="border:1px dashed orange;">I have a border color.</h3>
<h3 style="color:blue">Color Name</h3>
<h3 style="color:#0000ff">Hexadecimal</h3>
<h3 style="color:rgb(0,0,255)">RGB Value</h3>
</body>
</html>
HTML Images
• HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• <img src="url" alt="alternatetext">
• The required src attribute specifies the path (URL) to the image.
• <img src="img_chania.jpg" alt="Flowers in Chania">
• The alt Attribute
• The required alt attribute provides an alternate text for an image
• <img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height
• use the style attribute to specify the width and
height of an image.
• The width and height attributes always define
the width and height of the image in pixels.
• <img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
• <img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
EXample
• <!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src=“image\images1.jpeg" alt="HTML5 Icon" width="128" height="128">
<img src=“image\images1.jpeg “
alt="HTML5Icon" style="width:128px;height:128px;>
</body>
</html>
• Images in Another Folder
• <img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
• Animated Images
• <img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
• Image as a Link
• To use an image as a link, put the <img> tag inside the <a> tag:
• <a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
• Image Floating
• Use the CSS float property to let the image float to the right or to the left of a text:
• <p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
HTML Image Maps
• With HTML image maps, you can create clickable areas on an image.
• The HTML <map> tag defines an image map
• Example
• <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="
computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="p
hone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee
.htm">
</map>
Background Image on a Page
• <style>
body {
background-image: url('img_girl.jpg');
}
</style>
HTML Links
• Links allow users to click their way from page to
page.
• You can click on a link and jump to another
document.
• The HTML <a> tag defines a hyperlink. It has the
following syntax:
• <a href="url">link text</a>
• <a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
The target Attribute
• By default, the linked page will be displayed in the current browser window. To change this, you must
specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
•
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
• Absolute URLs vs. Relative URLs
• Both examples above are using an absolute URL (a full web address) in the href attribute.
• A local link (a link to a page within the same website) is specified with a relative URL (without the
"https://www" part):
• Example
• <h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p
• HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag:
• Example
• <a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
• Link to an Email Address
• Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new
email):
• Example
• <a href="mailto:[email protected]">Send email</a>
• Button as a Link
• To use an HTML button as a link, you have to add some JavaScript code.
• JavaScript allows you to specify what happens at certain events, such as a click of a button:
• Example
• <button onclick="document.location='default.asp'">HTML Tutorial</button>
• Link Titles
• The title attribute specifies extra information about an element. The information is most often shown as a tooltip
text when the mouse moves over the element.
• Example
• <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
• HTML Link Colors
• By default, a link will appear like this (in all
browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using
CSS:
• <!DOCTYPE html>
• <html>
•
•
•
•
<head>
<style>
a:link {
color: green;
EXample
• background-color: transparent;
• text-decoration: none;
• }
• a:visited {
• color: pink;
• background-color: transparent;
• text-decoration: none;
• }
• a:hover {
• color: red;
• background-color: transparent;
• text-decoration: underline;
• }
• a:active {
• color: yellow;
• background-color: transparent;
• text-decoration: underline;
• }
• </style>
• </head>
• <body>
• <h2>Link Colors</h2>
• <p>You can change the default colors of links</p>
• <a href="html_images.asp" target="_blank">HTML Images</a>
• </body>
• </html>
HTML Links - Create Bookmarks
• HTML links can be used to create bookmarks, so that readers
can jump to specific parts of a web page.
• Bookmarks can be useful if a web page is very long.
• To create a bookmark - first create the bookmark, then add a
link to it.
• When the link is clicked, the page will scroll down or up to the
location with the bookmark.
• Example
• First, use the id attribute to create a bookmark:
• <h2 id="C4">Chapter 4</h2>
• Then, add a link to the bookmark ("Jump to Chapter 4"), from
within the same page:
• Example
• <a href="#C4">Jump to Chapter 4</a>
HTML Tables
Table Table Table Table
Heading 1 Heading 2 Heading 3 heading4
Cell1 Cell2
Row 1
Row 2
Row 3
Row 4
Column1 Column1 Column1
<Table> : Use To create Table
<Tr> : Use to create Row
<Th> : Use to create Column Heading
<td> : Use to create cell
Example1
• <!DOCTYPE html>
• <html>
• <style>
• table, th, td {
• border:1px solid black;
• }
• </style>
• <body>
• <h2>A basic HTML table</h2>
• <table style="width:100%">
• <tr>
• <th>Company</th>
• <th>Contact</th>
• <th>Country</th>
• </tr>
• <tr>
• <td>Alfreds Futterkiste</td>
• <td>Maria Anders</td>
• <td>Germany</td>
• </tr>
• <tr>
• <td>Centro comercial Moctezuma</td>
• <td>Francisco Chang</td>
• <td>Mexico</td>
• </tr>
• </table>
• <p>To understand the example better, we have added borders to the table.</p>
• </body>
• </html>
• HTML Table Borders
To add a border, use the CSS border property on table, th, and td elements:
table, th, td {
border: 1px solid black;
}
• Collapsed Table Borders
• To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style Table Borders
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Round Table Borders
table, th, td {
border: 1px solid black;
border-radius: 10px;
• Dotted Table Borders
• With the border-style property, you can set the appearance of the border.
h, td {
border-style: dotted;
}
}
• Border Color
• With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}
HTML Table Sizes
• HTML tables can have different sizes for each column, row
or the entire table.
• Use the style attribute with the width or height properties
to specify the size of a table, row or column.
• <table style="width:100%">
• Column width
• <th style="width:70%">Firstname</th>
• HTML Table Row Height
• <tr style="height:200px">
• TagDescription
• <table> Defines a table
• <th> Defines a header cell in a table
• <tr> Defines a row in a table
• <td> Defines a cell in a table
• <caption> Defines a table caption
• <colgroup> Specifies a group of one or more columns in
a table for formatting
• <col> Specifies column properties for each column
within a <colgroup> element
• <thead> Groups the header content in a table
• <tbody> Groups the body content in a table
• <tfoot> Groups the footer content in a table
HTML Table Padding & Spacing
• HTML tables can adjust the padding inside the cells, and also the space between the cells.
• Cell Padding
• Cell padding is the space between the cell edges and the cell content.
• By default the padding is set to 0.
• To add padding on table cells, use the CSS padding property:
• Example
• th, td {
padding: 15px;
}
• Example
• th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
• Cell Spacing
• Cell spacing is the space between each cell.
• By default the space is set to 2 pixels.
• To change the space between table cells, use the CSS border-spacing property on the table element:
• Example
• table {
border-spacing: 30px;
}
Table Colspan & Rowspan
Column Span
Row Span
<th colspan="2">Name</th>
<th rowspan="2">Phone</th>
Table Colgroup
• The <colgroup> element is used to style specific columns of a table.
• The <colgroup> element should be used as a container for the column specifications.
• Each group is specified with a <col> element.
• The span attribute specifies how many columns that get the style.
• The style attribute specifies the style to give the columns.
• Example
• table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
HTML Lists
• An unordered HTML list:
• Item
• Item
• Item
• Item
• An ordered HTML list:
• 1 First item
• 2 Second item
• 3 Third item
• 4 Fourth item
• An unordered list
• starts with the <ul> tag. Each list item starts with the <li> tag.
• The list items will be marked with bullets (small black circles) by default:
• Example
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items will be marked with numbers by default:
• Example
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
• Example
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Iframes
• An HTML iframe is used to display a web page within a
web page.
• Syntax
• <iframe src="url" title="description"></iframe>
• Iframe - Set Height and Width
• Use the height and width attributes to specify the size
of the iframe.
• <iframe src="demo_iframe.htm" height="200" width="3
00" title="Iframe Example"></iframe>
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
• <form> Element
• The HTML <form> element is used to create an HTML form for user input:
• <form>
.
form elements
.
</form>
• The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
• <input type="text">Displays a single-line text input field
• <input type="radio">Displays a radio button (for selecting one of many choices)
• <input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
• <input type="submit">Displays a submit button (for submitting the form)
• <input type="button">Displays a clickable button
HTML <form> Elements
• <input> Element
• One of the most used form element is the <input> element
• The <label> Element
• The <label> element defines a label for several form elements.
• <select> Element
• The <select> element defines a drop-down list:
• <textarea> Element
• The <textarea> element defines a multi-line input field (a text area):
• <button> Element
• The <button> element defines a clickable button:
• Example
• <button type="button" onclick="alert('Hello World!')">Click Me!</button>
• <fieldset> and <legend> Elements
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset> element.
• <datalist> Element
• The <datalist> element specifies a list of pre-defined options for an <input> element.
• Users will see a drop-down list of the pre-defined options as they input data.
• Input Type Reset
• <input type="reset"> defines a reset button that will reset all form values to their default values:
• Input Type Radio
• <input type="radio"> defines a radio button.
• Input Type Checkbox
• <input type="checkbox"> defines a checkbox.
• Input Type Color
• The <input type="color"> is used for input fields that should contain a color.
• Input Type Date
• The <input type="date"> is used for input fields that should contain a date.
• Input Type Email
• The <input type="email"> is used for input fields that should contain an e-mail address.
• Input Type Image
• The <input type="image"> defines an image as a submit button.
• Input Type File
• The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
• Input Type Hidden
• The <input type="hidden"> defines a hidden input field (not visible to a user).
• Input Type Number
• The <input type="number"> defines a numeric input field.
• Input Type Range
• The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100
• Input Type Search
• The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
INPUT Type
• <input type="button"> defines a single-line text input field:
• <input type="password">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
HTML Input Attributes
• The value Attribute
• The input value attribute specifies an initial value for an input field:
• Example
<input type="text" id="lname" name="lname" value="Doe">
• The readonly Attribute
• The input readonly attribute specifies that an input field is read-only.
• <input type="text" id="fname" name="fname" value="John" reado
nly>
• The disabled Attribute
• The input disabled attribute specifies that an input field should be
disabled.
• <input type="text" id="fname" name="fname" value="John" disable
d>
• The size Attribute
• The input size attribute specifies the visible width, in characters, of an input field.
• The default value for size is 20.
• <input type="text" id="fname" name="fname" size="50"><br>
• The maxlength Attribute
• The input maxlength attribute specifies the maximum number of characters allowed
in an input field.
• input type="text" id="pin" name="pin" maxlength="4" size="4">
• The placeholder Attribute
• The input placeholder attribute specifies a short hint that describes the expected
value of an input field (a sample value or a short description of the expected
format).
• <label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
• The required Attribute
• The input required attribute specifies that an input field must be filled out before
submitting the form.
• <input type="text" id="username" name="username" required>
• <!DOCTYPE html>
• <html>
• <body>
• <h2>The input Element</h2>
• <form action="/action_page.php">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname"><br><br>
• <input type="submit" value="Submit">
• <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• </form>
• </body>
• </html>
Form Attributes
• The HTML <form> element contains several attributes for controlling data submission. They are as follows:
• action
• The action attributes define the action to be performed when the form is submitted. It is usually the url for the server where the form data
is to be sent.
• <form action="/login">
• <label for="email">Email:</label> <input type="email" name="email"><br><br>
• <label for="password">Password:</label>
• <input type="password" name="password"><br><br>
• <input type="submit" value="Submit"> </form>
• method
• The method attribute defines the HTTP method to be used when the form is submitted. There are 3 possible values for
the method attribute:
• post - It is used to send data to a server to update a resource.<form method = "post"> ... </form>
• get: It is used to request data from a specified resource.
<form method = "get"> ... </form>
• dialog: This method is used when the form is inside a <dialog> element. Using this method closes the dialog and sends a form-submit event.
•
name
• It specifies the name of the form. The name is used in Javascript to reference or access this form.
• <form name="login_form"> <label for="email">Email:</label> <input type="email" name="email"><br><br> <label
for="password">Password:</label> <input type="password" name="password"><br><br> <input type="submit" value="Submit">
</form>The above form can be accessed in javascript as:
• document.forms['login_form']
HTML Graphics
• Canvas
• The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript..
• Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
• <canvas id="myCanvas" width="200" height="100"></canvas>
• What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
• <svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>
Differences Between SVG and Canvas
• SVG is a language for describing 2D graphics in XML.
• Canvas draws 2D graphics, on the fly (with a JavaScript).
• SVG is XML based, which means that every element is available within
the SVG DOM. You can attach JavaScript event handlers for an element.
• In SVG, each drawn shape is remembered as an object. If attributes of
an SVG object are changed, the browser can automatically re-render
the shape.
• Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn,
it is forgotten by the browser. If its position should be changed, the
entire scene needs to be redrawn, including any objects that might
have been covered by the graphic.
HTML Media
• Multimedia comes in many different formats.
It can be almost anything you can hear or see,
like images, music, sound, videos, records,
films, animations, and more.
• Multimedia elements (like audio or video) are
stored in media files.
• Multimedia files have formats and different
extensions like: .wav, .mp3, .mp4, .mpg, .wmv,
and .av
HTML Video
• The HTML <video> element is used to show a video on a
web page.
• <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• HTML <video> Autoplay and mute
• To start a video automatically, use the autoplay attribute:
• <video width="320" height="240" autoplay mute>
HTML Audio
• The HTML <audio> element is used to play an
audio file on a web page.
• <audio autoplay mute>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>
HTML YouTube Videos
• To play your video on a web page, do the following:
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Example
• <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
• ouTube Loop
• Add loop=1 to let your video loop forever.
• Value 0 (default): The video will play only once.
• Value 1: The video will loop (forever).
• YouTube - Loop
• <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
• Using HTML Geolocation
• The getCurrentPosition() method is used to
return the user's position.
INTRODUCTION TO CSS
• Cascading Style Sheet
• Style sheet Language
– Standards-based set of properties and attributes to define
styles
• To describe the presentation a document written in
a ‘markup language’ like HTML or XML
– Markup encoding: <p>My paragraph here.</p>
– Defines the style of how things in <p> tags appear.
– Font, color, size, margins, etc.
• Cascading
– Rules to determine how to
– apply markup that contains
– other markup
CSS Solved a Big Problem
• HTML was NEVER intended to contain tags for formatting a
web page!
• HTML was created to describe the content of a web page,
like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to
the HTML 3.2 specification, it started a nightmare for web
developers. Development of large websites, where fonts
and color information were added to every single page,
became a long and expensive process.
• To solve this problem, the World Wide Web Consortium
(W3C) created CSS.
• CSS removed the style formatting from the HTML page!
CSS Example
<!DOCTYPE html>
<html>
• body { <head>
background-color: lightblue; <style>
} body {
background-color: lightblue;
}
h1 {
color: white;
h1 {
text-align: center;
color: white;
} text-align: center;
}
p{
font-family: verdana; p{
font-size: 20px; font-family: verdana;
} font-size: 20px;
}
</style>
</head>
<body>
CSS Syntax
• 3 Elements to a CSS Statement
– Selector
• What HTML sections does it affect?
– Property
• What attribute of that HTML section will be affected?
– Value
• What change will be made to that attribute?
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML elements
you want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain
state)
• Pseudo-elements selectors (select and style a part of an
element)
• Attribute selectors (select elements based on an attribute or
attribute value)
• CSS element Selector
• The element selector selects HTML elements based on the element name.
• Example
• Here, all <p> elements on the page will be center-aligned, with a red text color:
• p{
text-align: center;
color: red;
}
• The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one
unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
• Example
• The CSS rule below will be applied to the HTML element with id="para1":
• #para1 {
text-align: center;
color: red;
}
• The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
• Example
• In this example all HTML elements with class="center" will be red and
center-aligned:
• .center {
text-align: center;
color: red;
}
• p.center {
text-align: center;
color: red;
}
• <p class="center large">This paragraph refers to two classes.</p>
• The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• Example
• The CSS rule below will affect every HTML element on the page:
• *{
text-align: center;
color: blue;
}
• The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style
definitions.
• Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
• h1, h2, p {
text-align: center;
color: red;
}
How To Add CSS
• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire website by changing just
one file!
• Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• An external style sheet can be written in any text editor, and must be saved with a .css
extension.
Internal CSS
• An internal style sheet may be used if one single HTML page has a unique style.
• The internal style is defined inside the <style> element, inside the head section.
• <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
• Example
• Inline styles are defined within the "style" attribute of the relevant element:
• <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Multiple Style Sheets
• If some properties have been defined for the same
selector (element) in different style sheets, the value
from the last read style sheet will be used.
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
CSS Comments
• Comments are used to explain the code, and may help
when you edit the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the <style> element,
and starts with /* and ends with */:
• Example
• /* This is a single-line comment */
p{
color: red;
}
CSS Colors
• CSS Background Color
• You can set the background color for HTML elements:
• <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
• CSS Text Color
• You can set the color of text:
• Hello World
• <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
• CSS Border Color
• You can set the color of borders:
• CSS Border Color
• You can set the color of borders:
• CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
• <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS Backgrounds
• The CSS background properties are used to add
background effects for elements.
• In these chapters, you will learn about the following CSS
background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
• CSS background-color
• The background-color property specifies the background color
of an element.
• Example
• body {
background-color: lightblue;
}
• Opacity / Transparency
• The opacity property specifies the opacity/transparency of an
element. It can take a value from 0.0 - 1.0. The lower value, the
more transparent:
• div {
background-color: green;
opacity: 0.3;
}
CSS Background Image
• The background-image property specifies an image to use as the background of an element.
• By default, the image is repeated so it covers the entire element.
• body {
background-image: url("paper.gif");
}
• The background image can also be set for specific elements, like the <p> element:
• Example
• p{
background-image: url("paper.gif");
}
• CSS background-repeat
• By default, the background-image property repeats an image both horizontally and vertically.
• Example
• body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
• CSS background-position
• The background-position property is used to specify the position of the background image.
• Example
• Position the background image in the top-right corner:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
• CSS background-attachment
• The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with
the rest of the page):
• Example
• Specify that the background image should be fixed:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
CSS Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border
• example
• p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
• CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
• Example
• Demonstration of the different border widths:
• p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
• CSS Border - Individual Sides
• From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
• In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
• Example
• p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
• CSS Rounded Borders
• The border-radius property is used to add rounded borders to an element:
• p{
border: 2px solid red;
border-radius: 5px;
}
CSS Margins
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
• p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
CSS Padding
• Padding is used to create space around an element's content, inside
of any defined borders.
• Padding - Individual Sides
• CSS has properties for specifying the padding for each side of an
element:
• padding-top
• padding-right
• padding-bottom
• padding-left
• div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Height, Width and Max-width
• he CSS height and width properties are used to set the height and width of
an element.
• he height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm, etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
• div {
height: 200px;
width: 50%;
background-color: powderblue;
}
The CSS Box Model
• In CSS, the term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content. The image below illustrates the box model:
• Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
CSS Outline
• An outline is a line drawn outside the
element's border.
• CSS has the following outline properties:
• outline-style
• outline-color
• outline-width
• outline-offset
• outline
CSS Text
• Text Color
• The color property is used to set the color of the text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• body {
color: blue;
}
h1 {
color: green;
}
Text Color and Background Color
• In this example, we define both the background-color property and the color property:
• Example
• body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
CSS Text Alignment
• In this chapter you will learn about the following properties:
• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align
• h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
• div {
text-align: justify;
}
CSS Text Decoration
• The text-decoration-line property is used to add a decoration line to text.
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
• example
• Overline text decoration
• Line-through text decoration
• Underline text decoration
• Overline and underline text decoration.
• Note: It is not recommended to underline text that is not a link, as this often confuses
the reader.
CSS Text Transformation
• Text Transformation
• The text-transform property is used to specify uppercase and lowercase
letters in a text.
• Example
• p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Spacing
• The text-indent property is used to specify the indentation of the first line of a text:
• p{
text-indent: 50px;
}
• Letter Spacing
• The letter-spacing property is used to specify the space between the characters in a text.
• The following example demonstrates how to increase or decrease the space between characters:
• Example
• h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
• Line Height
• The line-height property is used to specify the space between lines:
• Example
• p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
• Word Spacing
• The word-spacing property is used to specify the space between the words in a text.
• The following example demonstrates how to increase or decrease the space between words:
• Example
• p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
• White Space
• The white-space property specifies how white-space inside an element is handled.
• This example demonstrates how to disable text wrapping inside an element:
• Example
• p{
white-space: nowrap;
}
CSS Text Shadow
• ext Shadow
• The text-shadow property adds shadow to text.
• Text shadow effect!
• h1 {
text-shadow: 2px 2px;
}
• h1 {
text-shadow: 2px 2px red;
}
CSS Fonts
• Choosing the right font for your website is important!
• Generic Font Families
• In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
• Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
• Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.
• font-family
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
CSS Font Style
• The font-style property is mostly used to specify italic text.
• This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
• p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
• Font Weight
• The font-weight property specifies the weight of a font:
• Example
• p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
CSS Font Size
• The font-size property sets the size of the text.
• h1 {
font-size: 40px;
}
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
body {
font-size: 100%;
}
• Responsive Font Size
• The text size can be set with a vw unit, which means the "viewport width".
• <h1 style="font-size:10vw">Hello World</h1>
• Viewport is the browser window size. 1vw = 1% of viewport width. If the
viewport is 50cm wide, 1vw is 0.5cm.
CSS Google Fonts
• If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
• Google Fonts are free to use, and have more than 1000 fonts to choose from.
• Just add a special style sheet link in the <head> section and then refer to the font in the
CSS.
• <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
• <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
• Use multiple google
• <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|
Sofia|Trirong">
• Enabling Font Effects
• Google has also enabled different font effects that you can use.
• First add effect=effectname to the Google API, then add a special class name to the element that is going to use
the special effect. The class name always starts with font-effect- and ends with the effectname.
• Example
• Add the fire effect to the "Sofia" font:
• <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
• Result:
CSS Icons
• How To Add Icons
• The simplest way to add an icon to your HTML
page, is with an icon library, such as Font
Awesome.
• Add the name of the specified icon class to any
inline HTML element (like <i> or <span>).
• To use the Font Awesome icons, go to
fontawesome.com, sign in, and get a code to add
in the <head> section of your HTML page:
• <script
src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
• Font Awesome 5
• Font Awesome 5 has a PRO edition with 7842 icons,
and a FREE edition with 1588 icons. This tutorial
will concentrate on the FREE edition
• <script src="https://kit.fontawesome.com/
yourcode.js" crossorigin="anonymous"></script>
• We got the code a076d05399 and by inserting the
script tag, with the code, we can start using Font
Awesom
• <script src="https://kit.fontawesome.com/
a076d05399.js" crossorigin="anonymous"></
script>
Styling Links
• Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
• Example
• a{
color: hotpink;
}
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
• /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
• Try it Yourself »
• Text Decoration
• The text-decoration property is mostly used to remove underlines from links:
• a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
• Background Color
• The background-color property can be used to specify a background color for links:
• Example
• a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
• Link Buttons
• This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
• Example
• a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
CSS Lists
• Order list Unorder list
• 1 Tea #Tea
• 2 Coffee #Cofee
• 3 Milk #Milk
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
• The list-style-type property specifies the type of list item marker.
• ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
• list-style-image property specifies an image as the list item marker:
• Example
• ul {
list-style-image: url('sqpurple.gif');
}
• list-style-position property specifies the position of the list-item markers (bullet points).
• ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
• Styling List With Colors
• We can also style lists with colors, to make them look a little more interesting.
• ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
• table, th, td {
}
border: 1px solid; CSS Tables
• Full-Width Table
• table {
width: 100%;
}
• Table Width and Height
• table {
width: 100%;
}
th {
height: 70px;
}
• Table aligne
• Horizontal Alignment
• td {
text-align: center;
}
• Vertical Alignment
• td {
height: 50px;
vertical-align: bottom;
}
• Table Padding
• th, td {
padding: 15px;
text-align: left;
}
• Horizontal Dividers
• th, td {
border-bottom: 1px solid #ddd;
}
• Hoverable Table
• tr:hover {background-color: coral;}
• Striped Tables
• tr:nth-child(even) {background-color: #f2f2f2;}
• Table Color
• th {
background-color: #04AA6D;
color: white;
}
• Responsive Table
• A responsive table will display a horizontal
scroll bar if the screen is too small to display
the full content:
• <div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
CSS Layout - The display Property
• The display property is the most important
CSS property for controlling layout.
• The display property specifies if/how an
element is displayed.
• Every HTML element has a default display
value depending on what type of element it is.
The default display value for most elements
is block or inline.
• Block-level Elements
• A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
• The <div> element is a block-level element.
• Examples of block-level elements:
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
• Inline Elements
• An inline element does not start on a new line and only takes up as much width as necessary.
• This is an inline <span> element inside a paragraph.
• Examples of inline elements:
• <span>
• <a>
• <img>
• Display: none;
• display: none; is commonly used with JavaScript to hide and show elements without deleting and
recreating
CSS Layout - width and max-width
• div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
• Explain With Example
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 HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left, and
right properties.
• Relative:An element with position: relative; is positioned relative to its
normal position.
• Fixed:An element with position: fixed; is positioned relative to the viewport
• Absolute:An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the viewport,
like fixed).
• Sticky:An element with position: sticky; is positioned based on the user's
scroll position
CSS Layout - The z-index Property
• When elements are positioned, they can
overlap other elements.
• 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
• z-index only works on positioned elements
float
• The CSS float property specifies how an element should
float.
• 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
clear and clearfix
• When we use the float property, and we want the next element below
(not on right or left), we will have to use the clear property.
• The clear property can have one of the following values:
• none - The element is not pushed below left or right floated elements.
This is default
• left - The element is pushed below left floated elements
• right - The element is pushed below right floated elements
• both - The element is pushed below both left and right floated
elements
• inherit - The element inherits the clear value from its parent
• The clearfix Hack
• ClearFix
• If a floated element is taller than the containing element, it will
"overflow" outside of its container. We can then add a clearfix hack to
solve this problem:
CSS Navigation Bar
• Having easy-to-use navigation is important for
any web site.
• Vertical Navigation Bar Horizantal Navigation
Bar
• Verical Navigation Bar
• ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
• ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
• Horizental Navigation Bar
• li {
display: inline;
}
• li {
float: left;
}
a{
display: block;
padding: 8px;
background-color: #dddddd;
}
• float: left; - Use float to get block elements to float next to each other
• display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
• padding: 8px; - Specify some padding between each <a> element, to make them look good
• background-color: #dddddd; - Add a gray background-color to each <a> element
• Sticky Navbar
• Add position: sticky; to <ul> to create a sticky navbar.
• 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).
• Responsive Nvigation Bar
• See Example
• Dropdown Navbar
• Explain With Example
•
CSS Dropdowns
Create a dropdown box that appears when the user moves the mouse over an element.
• <style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
• Example Explained
• HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.
• Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.
• Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
• CSS) The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown
button (using position:absolute).
• The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-
width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set
the width to 100% (and overflow:auto to enable scroll on small screens).
• Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a "card".
CSS Image Gallery
• CSS can be used to create an image gallery.
• Explain With Example
• Responsive Image Gallery
• How to use CSS media queries to create a
responsive image gallery that will look good
on desktops, tablets and smart phones.
CSS Image Sprites
• An image sprite is a collection of images put
into a single image.
• A web page with many images can take a long
time to load and generates multiple server
requests.
• Using image sprites will reduce the number of
server requests and save bandwidth.
CSS Forms
• The look of an HTML form can be greatly improved with CSS:
• Styling Input Fields
• Use the width property to determine the width of the input field:
• input {
width: 100%;
}
• The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:
• input[type=text] - will only select text fields
• input[type=password] - will only select password fields
• input[type=number] - will only select number fields
• etc..
• Use the padding property to add space inside the text field.
• input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
• Bordered Inputs
• input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Colored Inputs
• input[type=text] {
background-color: #3CBC8D; add backgrount color
color: white; textcolor
}
• Focused Inputs
• Use the :focus selector to do something with the input field when it gets focus:
• input[type=text]:focus {
background-color: lightblue;
} input[type=text]:focus {
border: 3px solid #555;
}
• Input with icon/image
• If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we
add a large left padding to reserve the space of the icon:
• input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
• Animated Search Input
• In this example we use the CSS transition property to animate the width of the search input when it gets focus.
• input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
• Styling Select Menus
• select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Styling Input Buttons
• input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
CSS Website Layout
There are tons of different layout designs to choose from. However,
the structure above, is one of the most common, and we will take a
closer look at it in this tutorial.
• Header
• A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website
name:
• .header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
• Navigation Bar
• A navigation bar contains a list of links to help visitors navigating through your website:
• /* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
• Content
• The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the
following:
• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)
• /* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens
(600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
• Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.
• Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.
• Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer
10 and earlier versions. If you require IE6-10 support, use floats (as shown above).
• Footer
• The footer is placed at the bottom of your
page. It often contains information like
copyright and contact info:
• .footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
CSS Rounded Corners
• With the CSS border-radius property, you can give any element "rounded corners".
• #rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
• CSS Multiple Backgrounds
• CSS allows you to add multiple background images for an element, through the background-image property.
• #example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
CSS Gradients
• CSS defines three types of gradients:
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)
• Syntax
• background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
• #grad {
background-image: linear-gradient(red, yellow);
}
Using Angles
• If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left,
to bottom right, etc.).
• background-image: linear-gradient(angle, color-stop1, color-stop2);
• #grad {
background-image: linear-gradient(180deg, red, yellow);
}
use multicolor stop
#grad {
background-image: linear-gradient(red, yellow, green);
}
•
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
• o create a transition effect, you must specify two things:
• the CSS property you want to add an effect to
• the duration of the effect
• If the duration part is not specified, the transition will have no effect, because the default value is 0.
• In this chapter you will learn about the following properties:
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• Example
• div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
• Example effact width and height
• div {
transition: width 2s, height 4s;
}
• Specify the Speed Curve of the Transition
• The transition-timing-function property specifies the speed curve of the transition effect.
• The transition-timing-function property can have the following values:
• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
• Delay the Transition Effect
• The transition-delay property specifies a delay (in seconds) for the transition effect.
• div {
transition-delay: 1s;
}
• ransition + Transformation
• The following example adds a transition effect to the transformation:
• Example
• div {
transition: width 2s, height 2s, transform 2s;
}
CSS Animations
• CSS allows animation of HTML elements without using JavaScript or Flash!
• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties you want, as many times as you want.
• The @keyframes Rule
• When you specify CSS styles inside the @keyframes rule, the animation will gradually
change from the current style to the new style at certain times.
• /* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
• Example1
• .button { Basic Button Styling
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
• Buttoncolor
• .button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
• Button Sizes
• .button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
• Use the padding property to change the padding of a button:
• 10px 24px 12px 28px 14px 40px 32px 16px 16pxExample
• .button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
• Rounded Buttons
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Colored Button Borders
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
Hoverable Buttons
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
Shadow Buttons
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
• Disabled Buttons
• Use the opacity property to add transparency to a button (creates a "disabled" look).
• .disabled {
opacity: 0.6;
cursor: not-allowed;
}
• Button Width
• .button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
• Button Groups
• .button {
float: left;
}
• Bordered Button Group
• .button {
float: left;
border: 1px solid green;
}
• Vertical Button Group
• Use display:block instead of float:left to group the buttons below each other, instead of side by side:
• .button {
display: block;
}
CSS Media Queries
• CSS3 Introduced Media Queries
• Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the
device.
• Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
• Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones
(such as iPhone and Android phones).
• Media Query Syntax
• A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.
• @media not|only mediatype and (expressions) {
CSS-Code;
}
• <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
• CSS3 Media Types
• Value Description
• All Used for all media type devices
• Print Used for printers
• Screen Used for computer screens, tablets, smart-phones etc.
• Speech Used for screenreaders that "reads" the page out loud
• The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less
than 480 pixels, the background-color will be pink):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
CSS Flexbox
• Before the Flexbox Layout module, there were four layout modes:
• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
• <div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
• The flex item properties are:
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
• <div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
• <div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
• <div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Responsive Flexbox
• For example, if you want to create a two-column layout for most screen
sizes, and a one-column layout for small screen sizes (such as phones and
tablets), you can change the flex-direction from row to column at a specific
breakpoint (800px in the example below):
• .flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Responsive Image Gallery using Flexbox
• See Example
• Responsive Website using Flexbox
• See Example
You might also like
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseNo ratings yet
- Chapter 1 Introduction to Web TechnologyNo ratings yetChapter 1 Introduction to Web Technology134 pages
- G. Pullaiah College of Engineering and TechnologyNo ratings yetG. Pullaiah College of Engineering and Technology55 pages
- Bachelore of Computer Applications ST - Xavier'S College - Krupa ShahNo ratings yetBachelore of Computer Applications ST - Xavier'S College - Krupa Shah75 pages
- A Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, GorakhpurNo ratings yetA Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, Gorakhpur37 pages
- Structuring Web Pages With XHTML: Session 1No ratings yetStructuring Web Pages With XHTML: Session 124 pages
- STD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: IntroductionNo ratings yetSTD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: Introduction17 pages
- Intro To HTML & Javascript: (With A Little CSS, +libraries/frameworks)No ratings yetIntro To HTML & Javascript: (With A Little CSS, +libraries/frameworks)57 pages
- Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, PatanNo ratings yetUnit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan72 pages
- Web Designing Training Course in Chandigarh@00001No ratings yetWeb Designing Training Course in Chandigarh@000015 pages
- STD 12 Computer Chapter 3 Designing Simple Website Using KompoZerNo ratings yetSTD 12 Computer Chapter 3 Designing Simple Website Using KompoZer5 pages
- Acunetix v12: Is Your Website Hackable?No ratings yetAcunetix v12: Is Your Website Hackable?32 pages
- Mobile Web Development With: Malek Kemmou CEO ArrabetaNo ratings yetMobile Web Development With: Malek Kemmou CEO Arrabeta34 pages
- Javascript - Part III: Indian Institute of Technology KharagpurNo ratings yetJavascript - Part III: Indian Institute of Technology Kharagpur24 pages
- Magento Anowave GTM Extension - Google Tag Manager Setup: Step-By-Step GuideNo ratings yetMagento Anowave GTM Extension - Google Tag Manager Setup: Step-By-Step Guide4 pages
- HTML Tags Chart: Tag Name Code Example Browser ViewNo ratings yetHTML Tags Chart: Tag Name Code Example Browser View9 pages
- I. Difference B/W Web Page and Web SiteNo ratings yetI. Difference B/W Web Page and Web Site25 pages
- JSON and JavaScript_ Comprehensive GuideNo ratings yetJSON and JavaScript_ Comprehensive Guide7 pages
- HTML Introduction: Structure and Formatting Tags100% (1)HTML Introduction: Structure and Formatting Tags17 pages
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
- Bachelore of Computer Applications ST - Xavier'S College - Krupa ShahBachelore of Computer Applications ST - Xavier'S College - Krupa Shah
- A Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, GorakhpurA Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, Gorakhpur
- STD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: IntroductionSTD: 11th Year: 2020-21 Subject: Information Technology Chapter: Impressive Web Designing Subtopic: Introduction
- Intro To HTML & Javascript: (With A Little CSS, +libraries/frameworks)Intro To HTML & Javascript: (With A Little CSS, +libraries/frameworks)
- Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, PatanUnit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan
- STD 12 Computer Chapter 3 Designing Simple Website Using KompoZerSTD 12 Computer Chapter 3 Designing Simple Website Using KompoZer
- Mobile Web Development With: Malek Kemmou CEO ArrabetaMobile Web Development With: Malek Kemmou CEO Arrabeta
- Javascript - Part III: Indian Institute of Technology KharagpurJavascript - Part III: Indian Institute of Technology Kharagpur
- Magento Anowave GTM Extension - Google Tag Manager Setup: Step-By-Step GuideMagento Anowave GTM Extension - Google Tag Manager Setup: Step-By-Step Guide
- HTML Tags Chart: Tag Name Code Example Browser ViewHTML Tags Chart: Tag Name Code Example Browser View