Scribd
Upload
51 views

Introduction HTML and CSS

HTML is used to define the structure and layout of web pages. It uses tags like <html>, <head>, <title>, <body> to define overall page structure. CSS is used to style and lay out elements on the page using selectors, properties, and values. CSS can be applied via internal, inline, or external stylesheets. Common CSS properties include color, font, background, border, margin, padding, position, and display.

Uploaded by

Syed Aqib Raza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

Introduction HTML and CSS

HTML is used to define the structure and layout of web pages. It uses tags like <html>, <head>, <title>, <body> to define overall page structure. CSS is used to style and lay out elements on the page using selectors, properties, and values. CSS can be applied via internal, inline, or external stylesheets. Common CSS properties include color, font, background, border, margin, padding, position, and display.

Uploaded by

Syed Aqib Raza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

HTML

 HTML stands for Hyper Text Markup Language that describes the
structure of Web pages using markup.
 HTML elements are the building blocks of pages.
 Element describe to the browser how a particular piece of text should be
treated.
 HTML Elements are expressed as tags or tags are element names
surrounded by angle brackets.
 Attributes specify additional information for tags.
 Document Basic Structure
 <!DOCTYPE html>
<html>
<head>
<title>page</title>
</head>
<body>
</body>
</html>
Basic Tags
 <!DOCTYPE> Defines the document type
 <html>... </html> Defines an HTML document
 <title>... </title> Defines a title for the document
 <body>....</body> Defines the document's body
 <h1>...</h1> Defines HTML headings i.e h1 to h6
 <p>....</p> Defines a paragraph
 <br> Inserts a single line break
 <hr> Defines a thematic change in the content
 <!--...--> Defines a comment
 <head>...</head> Defines information about the document
 <meta> Defines metadata about an HTML document
 <style>... </style> Defines style information for a document
 <script>... </script> Defines a client-side script
Text Tags
 <b>...</b> for bold text
 <i>...</i> for Italic Text
 <u>...</u> for Underlined Text
 <strike>...</strike> for strike Text
 <sup>...</sup> for Superscript Text
 <sub>...</sub> for Subscript Text
 <ins>...</ins> for Inserted Text
 <del>...</del> for Deleted Text
 <small>...</small> for Smaller Text
 <blockquote>... </blockquote> for quoted Text
 <em> ... </em> for emphasized text
 <strong>... </strong> for important text
 <div>...</div> Defines a division or a section in an HTML document.
 <span>..</span> Defines a section in a document
CSS
 CSS is the language that defines the presentation of a web page. It is used
to add color, background images, and textures, and to arrange elements on
the page. However, CSS does a lot more than just paint a picture. It is also
used to enhance the usability of a web site or application.
CSS
 CSS stands for Cascading Style Sheets and it is the language used to style
the visual presentation of web pages.
 CSS is the language that tells web browsers how to render the different parts
of a web page.
 Every item or element on a web page is part of a document written in a
markup language.
 A selector is a code snippet used to identify the web page element or
elements that are to be affected by the styles.
 A property is the aspect of the element that is to be affected. For example,
color, padding, margin, and background are CSS properties.
 A value is used to define a property. For example color:red;
 The combination of a property and a value is called a declaration.
 A declaration block is the term used to refer to all of the declarations applied
to a single selector.
 A single selector and the declaration block that follows it in combination are
referred to as a ruleset.
Linking CSS Rules to HTML Document
 Inline styles are applied to specific HTML elements. The HTML attribute
style is used to define rules that only apply to that specific element
<h1 style="color:red; padding:10px; text-decoration:underline;">
Example Heading</h1>
 Internal stylesheet is a block of CSS added to an HTML document Head
element and all CSS declarations are added between the style tags.
<head> <style>
h1 { color: red; padding: 10px; text-decoration: underline; }
</style> </head>
 External stylesheets are documents containing CSS statements. The rules
defined in the document are linked to one or more HTML documents by
using the link tag within the head tag of document.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
CSS Selector
 CSS supports a rich set of selectors for specifying to which particular
element(s) a CSS rule applies.
 CSS initially supported basic selectors to indicate a particular tag, group of
tags, or position in the document tree.
 #id selector styles the element with the specified id.
#id {
css declarations;
}
 element selector selects all elements with the specified element name.
element {
css declarations;
}
 .class selector selects elements with a specific class attribute.
.class {
css declarations;
}
CSS:Text Formation
 Color: red | #ff0000 | rgb(255,0,0) // set the color of the text
 text-align: center |left |right | justify //set the horizontal alignment
 text-decoration: overline | line-through| underline| none
 text-transform: uppercase lowercase capitalize
 text-indent: 50px; //set indentation of the first line of a text
 letter-spacing: 3px | -4px //set space between letters.
 line-height: 0.8 | 1.8 //set space between lines.
 direction: rtl // change the direction of text
 word-spacing: 10px| -5px //set space between words.
 vertical-align: baseline|length|sub|super|top|text-top |middle |
bottom |text- bottom|initial|
CSS:Text Formation
 text-shadow: h-shadow v-shadow blur-radius color|none|initial
 text-shadow: 3px 2px red;

 font-size: length | percentage | larger | smaller | xx-small | x-small


| small |medium | large | x-large | xx-larger | inherit
 font-style: italic | normal | oblique | inherit
 font-variant: normal | small-caps | inherit
 font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | inherit
 font-family: "Times New Roman", Georgia, Serif;
 font: font-style font-variant font-weight font-size/line-height font-
family;
CSS: Box Model

 Border: border-width, border-style (required),


border-color;
border-style: dotted | dashed | solid | double |
outset |..
For example border: 5px solid red;
CSS: Box Model
 Border |border-top, border-right, border-bottom,border-left
 Outline: outline-width, outline-style (required), outline-color
 border-radius: 5px|3em|5mm;
 Margin: margin-top, margin-right, margin-bottom,margin-left |
2px |5em|1in|2mm;
 Height & max-height & min-height : 5px|3em|5mm;
 Width & max-width & min-width: 5px|3em|5mm;
 Padding: padding-top, padding-right, padding-bottom,
padding-left| 5px|3em|5mm;
CSS: Display & Background
 Block-level element always starts on a new line and takes up
the full width available. For example <p> <div> <form> <h1>
<h2>
 Inline element does not start on a new line and only takes up
as much width as necessary. <img> <a> <span>.
 Display is used to override the default display value
 display: inline | block | inline-block
 background-color: lightblue;
 background-image: url(“abc.gif");
 background-repeat: repeat-x| repeat-y|no-repeat;
 background-position: right top|100px 50px;
 background-attachment: fixed|scroll;
 background: background-color, background-image,
background-repeat,background-
attachment, background-position
CSS: Float & Clear
 Float : block-level elements have a well-defined default
behavior. They take the entire width of the page and the next
element appears below.
 float CSS property specifies that an element should be placed
along the left or right side of its container, allowing text and
inline elements to wrap around it.
 float: left | right | none;
 Clear float's sister property is clear. An element that has the
clear property set on it will not move up adjacent to the float
like the float desires, but will move itself down past the float.
clear: left |right | both
 Setting the clear attribute to left means you want nothing to the
left of this element.
 Setting the clear attribute to both means you want nothing to
the left or the right. It should occupy a line all its own.
Position
 Position CSS property specifies how an element is positioned in a
document. The top, right, bottom, and left properties determine the
final location of positioned elements.
position: relative | absolute | fixed | sticky |static (default)
 Relative positioned element computed position value is relative. The
top and bottom properties specify the vertical offset from its normal
position; the left and right properties specify the horizontal offset.
 Absolute positioned element computed position value is absolute or
fixed. The top, right, bottom, and left properties specify offsets from
the edges of the element's containing block
 Stickily positioned element computed position value is sticky. It's
treated as relatively positioned until it's containing block crosses a
specified threshold (such as setting top to value other than auto)
within it's flow root (or the container it scrolls within), at which point it
is treated as "stuck" until meeting the opposite edge of it's containing
block.
Z-index & Media Tags
 z-index CSS property specifies the z-order of a positioned element
and its descendants. When elements overlap, z-order determines
which one covers the other.
z-index: auto | integer ;
 An element with a larger z-index generally covers an element with a
lower one.
 For a positioned box (that is, one with any position other than static),
the z-index property specifies the stack level of the box in the current
stacking context.
 <link> element is used to define the relationship between a
document and an external resource
 <img> element is used to embeds an image into the document.
<img src="poster.jpg" width="100px" alt="Poster Image">
 src the image URL, mandatory for the <img> element.
 Alt Users will see this text displayed if the image URL is wrong, the
image format is not supported, or if the image is not yet downloaded
Media Tags
 <audio> element is used to embed sound content in documents. It
may contain one or more audio sources. It can also be the
destination for streamed media, using a MediaStream.
<audio controls="controls" autoplay loop="false" muted="true">
browser does not support
<source src="1.mp3" type="audio/mpeg; />
<source src=“2.mp3" type="audio/mpeg"/>
</audio>
 <source> is used to defines multiple media resources for media
elements
 <video> is use to embed video content in a document.
<video width="500px" height="200px" poster="poster.jpg">
<source src="2.mkv" />
</video>
 Poster a URL indicating a poster frame to show until the user plays or
seeks
List
 <ul>...</ul> Defines an unordered list
 <ol>...</ol> Defines an ordered list
 <li>...</li> Defines a list item
 <dl>...</dl> Defines a description list
 <dt>...</dt> Defines a term/name in a description list
 <dd>..</dd> Defines a description of a term/name in a
description list.
 list-style-type: square| disc| circle| none
 list-style-type: decimal|decimal-leading-zero|lower-alpha |upper-
alpha| lower-roman| upper- roman|lower-greek|lower-latin|upper-
latin
 list-style-position: outside|inside| none
 list-style-image: url(img.png)
 list-style: list-style-type list-style-position list-style-image
Link
 <a> element (or anchor element) creates a hyperlink to other
web pages, files, locations within the same page, email
addresses, or any other URL.
 <a href=“URL” target=“_self” > text/image </a>
 Href contains a URL or a URL fragment
 URL fragment is a name preceded by a hash mark (#), which
specifies an internal target location (an ID of an HTML
element) within the current document.
 Target specifies where to display the linked URL.
target=“_self | _parent | _blank | _top”
 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
Table Tags
 <table> element represents tabular data — information presented in a two-
dimensional table comprised of rows and columns of cells containing data.
 <caption>....</caption> Defines a table caption
 <th>...</th> Defines a header cell in a table
 <tr>...</tr> Defines a row in a table
 <td>...</td> Defines a cell in a table
 <thead>...</thead> Groups the header content in a table
 <tbody>...</tbody> Groups the body content in a table
 <tfoot>....</tbody> Groups the footer content in a table
 colspan & rowspan are attributes of <th> and <td>. elements
 colspan allows a single table cell to span the width of more than one cell or
column.
 Rowspan allows a single table cell to span the height of more than one cell
or row.
Form Tags
 <form> is one of the main points of interaction between a user and a
web site or application. They allow users to send data to the web site.
Most of the time that data is sent to the web server,
<form action=“URL” method=“GET|POST” > ........ </form>
 action attribute defines the location (URL) where the form's collected
data should be sent when it is submitted.
 method attribute defines which HTTP method to send the data with (it
can be "get" or "post").
 <fieldset> element is used to create groups of widgets(elements) that
share the same purpose, for styling and semantic purposes.
 <fieldset> can be included just below the opening <fieldset> tag. The
text content of the <legend> formally describes the purpose of the
<fieldset>.
 <label> element is the formal way to define a label for an form widget.
for attribute on <label> elements is used to link a label to a form widget.
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
Get vs Post
GET POST
BACK Harmless Data will be re-submitted)
button/Reload
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
History Parameters remain in browser Parameters are not saved
history in browser history
Data length Length of a URL is limited to No restrictions
2048 characters
Data type Only ASCII characters allowed No restrictions. Binary data
is also allowed
Security GET is less secure POST POST is secure than GET
because data sent is part of the because the parameters
URL are not stored in browser
Never use GET when sending history or in web server
passwords or other sensitive logs
information!
Visibility Data is visible to everyone in Data is not displayed in the
the URL URL
Form Tags
 <input/>. Defines an input control
 <input type="text" id="comment" name="comment" value="I'm a text field">
 name attribute specify the name of the element, this is submitted with the
form data.
 value attribute specify the element's initial value.
 Placeholder attribute specify the text that appears inside the text input box
that describes the purpose of the box briefly.
 Type specify the type of data required from user.
 type=“email“ user is required to type a valid e-mail address into the field
 type=“datetime“ user is required to type/select datetime into/from the field
 type=“date“ user is required to type/select date into/from the field
 type=“time“ user is required type/select time into/from the field
 type=“number“ user is required to type a valid e-mail address into the field.
 min and max attributes to specify a minimum and maximum value that the
number field can have. the step attribute to constrain valid values to a
certain set of steps.
Form Tags
 type=“password“ user is required to type password into the field
 type=“search“ user is required to type a search text into the field
 type=“url“ user is required to type URL into the field
 type=“color“ user is required to select color from the field
 type=“file“ let user to choose one or more files from their device storage.
Acceptable file types can be specified with the accept attribute, which takes
a comma-separated list of allowed file extensions or MIME types.
accept="image/png" or accept=".png"
accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg
 type=“button" buttons to programmed to control custom functionality
 type=“submit" buttons to submit the form to the server.
 type=“reset“ button to resets all of the inputs in the form to their initial
values.
 type=“radio“ to create a single radio button or radio button group. A radio
group is defined by giving each of radio buttons in the group the same name.
Form Tags
 type=“checkbox“ to create a single or list of checkboxes
 <textarea/> Defines a multiline input control (text area).
 rows attribute defines number of visible text lines for text area control.
 cols attribute defines visible width of text lines for text area control.
 <button>...</button> Defines a clickable button
 <select>...</select> Defines a drop-down list
 <progress> element displays a progress bar.
<progress value="70" max="100"> 70 %</progress>
 <option>...</option> Defines an option in a drop-down list
<select name="text"> <!--comments-->
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
CSS: Form Selectors
 The [attribute] selector is used to select elements with a specified attribute.
input[name] {background-color: #3CBC8D }
// All input elements having name attribute
input[name=Search] { background-color: #3CBC8D}
// All input elements with name = Search
input[type=text] { width:300px; height:30px; }
// All input elements with type= text
input[type=submit], input[type=reset] { background-color: #4CAF50; }
// All input elements with type= submit & type= reset
 input:checked { width:30px; height:30px;}
// All checked elements
 :enabled { border: 2px solid red;}
// All enabled elements
 :disabled { border: 2px solid black; }
// All disabled elements
CSS: Form Selectors
 :in-range { background-color: green;}
 // All in-range elements
 :out-of-range { background-color: red;}
 // All out-of-range elements
 input:valid { background-color: green;}
 // All valid elements
 input:invalid { background-color: red;}
 // All invalid elements
 input:optional { background-color: green;}
 // All optional elements
 input:required { background-color: red;}
 // All required elements
 input:read-only { background-color: green;}
 // All readonly elements
 input:read-write { background-color: pink;}
CSS: Form Pattern
 Modifiers are used to perform case-insensitive and global searches
 Modifier Description
 i Perform case-insensitive matching
 g Perform a global match (find all matches rather than stopping
after the first match)
 m Perform multiline matching.
 Brackets are used to find a range of characters
 Expression Description
 [abc] Find any character between the brackets
 [^abc] Find any character NOT between the brackets
 [0-9] Find any digit between the brackets
 [^0-9] Find any digit NOT between the brackets
 (x|y) Find any of the alternatives specified.
CSS: Form Pattern
 Meta characters are characters with a special meaning.
 . Find a single character, except newline or line terminator
 \w Find a word character
 \W Find a non-word character
 \d Find a digit
 \D Find a non-digit character
 \s Find a whitespace character
 \S Find a non-whitespace character
 \b Find a match at the beginning/end of a word
 \B Find a match not at the beginning/end of a word
 \0 Find a NUL character
 \n Find a new line character
 \f Find a form feed character
 \r Find a carriage return character
 \t Find a tab character
 \v Find a vertical tab character
 \xxx Find the character specified by an octal number xxx
CSS: Form Pattern
 Quantifier Description
 n+ Matches any string that contains at least one n
 n* Matches any string that contains zero or more occurrences of n
 n? Matches any string that contains zero or one occurrences of n
 n{X} Matches any string that contains a sequence of X n's
 n{X,Y} Matches any string that contains a sequence of X to Y n's
 n{X,} Matches any string that contains a sequence of at least X n's
 n$ Matches any string with n at the end of it
 ^n Matches any string with n at the beginning of it
 ?=n Matches any string that is followed by a specific string n
 ?!n Matches any string that is not followed by a specific string n
 A string containing capital letters (zero or more)
<input type="text" pattern="[A-Z]*" />
 A string containing capital letters with minimum length 2 and maximum length 5.
<input type="text" pattern="[A-Z]{2,5}" />
CSS: Form Pattern
 A string containing small letters with maximum length 5
<input type="text" pattern="[a-z]{5}" />
 A string containing capital, small letters and digits with minimum length 3 and
maximum length 6.
<input type="text" pattern="[a-zA-Z0-9]{3,6}" />
 A string containing capital, small letters and digits with minimum length 3
<input type="text" pattern="[a-zA-Z0-9]{3, }" />
 Pattern to validate CNIC
<input type="text" pattern="[1-9]{1}[0-9]{4}-[0-9]{7}-[1-9]{1}" />
 A string start with MR. followed by any four characters
<input type="text" pattern="^MR.\w{4}" />
 A string start with MR. followed by any four characters and end with Khan.
<input type="text" pattern="^MR.\w{4} Khan$" />
 Pattern to validate Hexadecimal color codes
<input type="text" pattern="^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />
CSS: Transformation
 2D Transform
transform: translate(60px,30px)
transform: scale(1.5,0.5)
transform: rotate(30deg)
transform: skew(30deg,30deg )
 The matrix() method combines all the 2D transform methods into one.
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
 3D Transform
Rotate3d(x,y,z) OR RotateX,RotateY, RotateZ
translate3d(x,y,z)
scale3d(x,y,z)
CSS: Transitions
 Transitions : change property values smoothly (from one value to another),
over a given duration. specify two things:
 the CSS property you want to add an effect to
 the duration of the effect
 For example
div:hover { width: 300px; height:200px; transform: rotate(30deg); }
transition: width 2s,height 2s,transform 2s;
 The transition-delay property specifies a delay (in seconds) for the transition
effect to start. transition-delay: 1s
 transition: width 2s 0s,height 2s 2s,transform 2s 4s
 Animations allows animation of most HTML elements without using
JavaScript or Flash. First pecify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
CSS: Animation
 div { width: 100px;height: 100px; background-color: red;
position: relative;
animation-name: animate; animation-duration: 5s;
animation-timing-function: linear | ease | ease-in | ease-out;
animation-delay: 2s; animation-iteration-count: infinite|2;
animation-direction: alternate| reverse |; }
 @keyframes animate {
0% {background-color:red; width:20px; height:20px;}
25% {background-color:yellow; width:30px; height:30px;}
50% {background-color:blue; width:40px; height:40px;}
75% {background-color:green; width:50px; height:50px;}
100% {background-color:red; width:60px; height:60px;}
}
CSS: Shorthand Animation
 div { animation: example 5s linear 2s infinite alternate; }
 div { width:200px; height:200px; margin:20px;
background-image: url('1.png');
animation-name: slides;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
 @keyframes slides{
0% { background-image: url('1.png'); }
25% { background-image: url('2.png'); }
50% { background-image: url('3.png');}
75% { background-image: url('4.png');}
100% { background-image: url('5.png'); }
}
CSS: Bootstrap
 Bootstrap is a powerful front-end framework for faster and easier web
development. It includes HTML and CSS based design templates for
common user interface components like Typography, Forms, Buttons,
Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel
and many other as well as optional JavaScript extensions.
 Use class .container to wrap a page's content and easily center the content's
as shown below.
 <div class = "container"> </div>
 Image Classes
 <img class="img-thumbnail" src="1.png“ >
 <img class="img-responsive" src="1.png" >
 <img class="img-rounded" src="1.png" >
 <img class="img-circle" src="1.png" >
CSS: Bootstrap
 Button Classes
 The classes below can be used to style any <a>, <button>, or <input> element:
 .btn, .btn-default, .btn-primary, btn-success,.btn-info .btn-warning .btn-danger
 .btn-link
 .btn-lg Makes a large button
 .btn-sm Makes a small button
 .btn-xs Makes an extra small button
 .btn-block Makes a block-level button (spans the full width of the parent
element
 .active Makes the button appear pressed
 .disabled Makes the button disabled
 Table classes
 Table, table-hover, table-condensed, table-striped, table-bordered, table-responsive,
 .active Applies the hover color to the table row or table cell
 .success Indicates a successful or positive action
 .info Indicates a neutral informative change or action

You might also like