Html-CS50
Lecture2
● <1DOCTYPE html>
It means it’s a html 5 document written in the laser version of html.
● <html></html>
Beginning of the content of html website
● <head></head>
Information that is helpful for the web browser not stuff that is going to
be displayed in the main contents of the web page
----------------------------------------------------------------------------------------------------
HTML
● <a href=”link” >text</a> (links0.html)
“Href have the hyperlink that we want to link to when some one clicks
on the contents of inside the tag.”
<a herf=”hello.html”<click here</a> by clicking on “click here” it will
redirect you to web page hello.html
“You can also use href tags to link contents on the same page”
Linking diff parts on the same page ( links1.html)
# pound signs mean rather than linking to an individual page link to
something with specific ID .It means by clicking on section1 link to
whatever has ID section1
Each heading<h> has an ID(it’s an attribute og HTML element to give an
HTML element a unique name) so by giving <h2 id=”section1”>section
1</h2> you can refer h2 heading as section1
HTML 5 Organization
● <header>
● <nav>
● <section>
● ….
These tags are useful for instance in CSS you can say take anything
inside of the <nav> tag & give it particular stylic properties
New html5 elements
● <audio>
● <video>
● <datalist> (form.html)
CSS
Selectors
(multiple.html)
,-- It is used when you want you apply same style to
multiple elements
Ex. <style>
h1, h2 { color : red; }
</style>
● Descendant or space operator (descendant.html)
We have a list inside of a list( nested list)
ol li { colour: red; } -SPACE means that style all the descendants/list that
are contained within the ordered list .The only rule CSS following here is if
there is a list that is the descendant of or contained within ol than its going
to be red
The contents of ol are children and the content of the ul list are
grandchildren of the ol (child.html)
If you want to select only the immediate children but not the contents
of ul
ol > li { colour: red; }
> syntax for identifying directly descendants of ol
● Attribute selector(Styling the generic tags) (attribute.html)
<style>
Input [ type=text] { background-colour: red; }
Input [ type=number] { background-colour: yellow; } </style>
CSS pseudo-class
A CSS pseudo-class is a keyword added to a selector that specifies a special
state of the selected element(s)
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
● Hover (hover.html)
<button>Clickme</button>
<style>
Button:hover { background-colour :orange; } </style>
The colon : syntax represents the pseudo-class(representing a specific
state of a html element)
CSS pseudo-elements
Pseudo elements affect a particular part of html element
● : : before (before.html)
It means that I want to apply the styling before the contents of a
paricular code
<style>
a : : before {
content: “/21d2 click here:” ;
Font-weight: bold; } </style>
: : after does the same thing but after the contents of the code
● : : selection
When something is selected it behaves a certain way e.g change
colour
