HTML and Css

HTML
1.Hyper Text Markup Language is standard markup language for creating web page
Markup Language=>using tags to define the elements ,human readable
eg:<title>title name</title>(title= tag)
2.It is used to describe the structure of the web page and its content
1. <!DOCTYPE html> declaration defines that this document is an HTML5 document

2. <html>=root element of an HTML page
3. <head>=meta information about the HTML page
meta information=information about the web page(eg:title)it will not display in the web page
it is machine parsable(machine readable)=>eg:we will tell the computer want to do when
reload
4. <title>=a title for the HTML page (which is shown in the browser's title bar)
5. <body> =document's body,
6. <h1> =large heading
7. =a paragraph
Html element
An HTML element is defined by a start tag, some content, and an end tag
this is my paragraph
=start tag;this is my paragraph=content;=end tag
Some HTML elements have no content (like the element). These elements
are called empty elements. Empty elements do not have an end tag!
HTML headings
HTML headings are defined with the <h1> to <h6> tags.[h1>h6]
HTML links
HTML links are defined with the <a> tag
<a href="https://www.w3schools.com">This is a link</a>
HTML Attributes
Provide additional info of the element
Only present in start tag
It’s form=>name=”value”
eg:href=”value”
HTML empty tag
<hr>=horizontal line
 =new line
HTML tags
<pre></pre>=>what we have written in the html document will be presented without any
change in the web page (eg:poem)
HTML Style
The HTML style attribute is used to add styles to an element
<tagname style="property:value;">
HTML text formatting(does not start in new line)
● - Bold text(blue)

● - Important text(blue)
● - Italic text(blue)
● - Emphasized(important) text(blue)
● - highlighted text(blue)
● - Smaller text(blue)href
● <del> - Deleted text(strike a line through deleted text)
● <ins> - Inserted text(blue)
● - Subscript text( H2O)
● - Superscript text( 2^3)
HTML quotation
<abb>=>abbreviation word and contain the abbreviation in the title

attribute
<blockquote>block quote from external website
<q>=>short inline quotation
<bdo>=>Defines the text direction(rtl=right to left or ltr )
<address>=>Defines contact information for the author/owner of a

document(italic)
<cite>=>title of the work(italic)
HTML Comment
<!-- Write your comments here →
HTML LINKS
Anchor tag<a>= used for links uses,
1. href attributes in <a> tag to indicate the destination
2.Target attributes in <a> tag to indicate where the link should get opened
_blank=new window,_self=same window
3.Use mailto: inside the href attribute to create a link that opens the
user's email program in <a> tag
4.title attributes is used to shown tooltip text
Tooltip text =>we hover the mouse over the text it will define that text
eg:abbreviation[WHO]
5.Use the <img> element (inside <a>) to use an image as a link
Absolute and relative url

Absolute url=>path from the root directory ,eg:/home/index.html[here /
represents the root],eg:https://www.w3schools.com/html/html_links.asp (a full web
address) for better understanding=>actual address of the house
Relative path=>path from the current directory,local address, (without the

"https://www" part),eg: ../dep/college/index.html[here ../ indicates the parent of the
current directory] for better understanding=>from your location to the
address of the house
HTML image
<img> tag=>empty tag,attributes scr=url of the

image,alt=text to be shown when image is
unavailable,style=width,height and float property;float property to let
the image float to the left or to the right
<picture>=>Resize the browser window to load different images,contain two

tags source(empty tag)=2 attributes media=min-width,srcset=url and
image(empty tag),format is the source tag followed by the image tag
<map>=>image map,contain area tag
<area>=>empty tag,define the clickable area on the image map,contain

attributes like shape,coords=coordinates of shape,href=path,alt
HTML favicon
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
rel=relation type=media type href=location
CSS SELECTORS
1.universal selector
All the element in css

*{property:”value”};
2.element selector
Specified element
h1{};
3.group of element selector
Specified group of elements
H1,h2{};
4.div.class{};
[it will select only div that has a class name that was specified
in the selector]
5.div b{};
[space indicates=>b inside the div will be selected no matter if

its direct or indirect child it will be get selected]
6. direct child
ul>li{};[direct child of unordered list]
ul>:nth-child(){};
7.general sibling selector
selects all elements that are next siblings of a specified element
Li.red~li{};
[~=>after the list that comes after the li.red will get the css
property]
8.li.red+li{};[adjacent sibiling selector]
[+=>very next chlid the list that comes after li.red will get the
css property]
select an element that is directly after another specific element.
9.pseudo class
H2:hover{};[if we hover the element the css property will get

defined]
10.Pseudo elements
Style the first letter, or line, of an element and Insert content before, or
after, the content of an element
Div::first-letter{};
11.class and id
.class name{};#id name{};
12.attribute selector
The [attribute] selector is used to select elements with a specified

attribute.
input[type=”text”]{}
Multiple style sheet
If some properties have been defined for the same selector (element) in
different style sheets[internal ,external,inline], the value from the last read
style sheet will be used.
Inline style >internal,external style
Padding{all side}=>padding{3px}
padding{Top right bottom left}=> padding{10px 20px 30px 10px}
Padding{top/bottom left/right}=>padding{10px 30px}
padding=>Padding is used to create space around(inside) an element's

content, inside of any defined borders
Margin
Margins are used to create space around elements, outside of any
defined borders.
POSITION
STATIC
Normal document flow,default position is static.
RELATIVE
If we set element to position relative we also want to specifies the left
right top bottom of the position from its original position
ABSOLUTE
If we set element to position absolute set the left,right… of the position
from its parent position .To define the absolute property for child element the parent
element must be relative to the child.If the parent position is not defined it will take
the viewport as parent
FIXED
The positon will be fixed .its position is corresponds to the view port
STICKY
Static+fixed.It will be in formal document flow when the element which
the position is defined sticky get arrival it will get fixed in the screen
z-index=> define the stack order of the element(which element should be placed in
front of, or behind, the others).
Specificity
inline(1000)>id(100)>class,pesudo class,atrribute(10)>element,pesudo
element(1)>*(0)
!important rule, it will override ALL previous styling rules

HTML and Css

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and Css

Uploaded by

Copyright:

Available Formats

HTML

1. <!DOCTYPE html> declaration defines that this document is an HTML5 document

● <b> - Bold text(blue)

<abb>=>abbreviation word and contain the abbreviation in the title

<blockquote>block quote from external website

<q>=>short inline quotation

<bdo>=>Defines the text direction(rtl=right to left or ltr )

<address>=>Defines contact information for the author/owner of a

<cite>=>title of the work(italic)

<!-- Write your comments here →

4.title attributes is used to shown tooltip text

5.Use the <img> element (inside <a>) to use an image as a link

Absolute and relative url

Relative path=>path from the current directory,local address, (without the

<img> tag=>empty tag,attributes scr=url of the

<picture>=>Resize the browser window to load different images,contain two

<map>=>image map,contain area tag

<area>=>empty tag,define the clickable area on the image map,contain

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

rel=relation type=media type href=location

All the element in css

3.group of element selector

Specified group of elements

[space indicates=>b inside the div will be selected no matter if

ul>li{};[direct child of unordered list]

7.general sibling selector

selects all elements that are next siblings of a specified element

8.li.red+li{};[adjacent sibiling selector]

select an element that is directly after another specific element.

H2:hover{};[if we hover the element the css property will get

.class name{};#id name{};

The [attribute] selector is used to select elements with a specified

Multiple style sheet

Inline style >internal,external style

padding{Top right bottom left}=> padding{10px 20px 30px 10px}

Padding{top/bottom left/right}=>padding{10px 30px}

padding=>Padding is used to create space around(inside) an element's

You might also like