HTML & CSS
Basics
Hyper Text Markup Language
not case-sensitive
Rendered without any compiler
Where to write?
![](https://upload.wikimedia.org/wikipedia/en/d/d2/Sublime_Text_3_logo.png)
![](https://www.gnu.org/software/emacs/images/emacs.png)
![](https://cdn.makeuseof.com/wp-content/uploads/2011/05/vim-editor_logo-300x300.png)
![](https://en.opensuse.org/images/e/e8/Vscode.png)
HTML render
Just open with a Browser
Elements and Tags
![](https://s3.amazonaws.com/media-p.slid.es/uploads/553291/images/3416247/html-tag.gif)
Shamelessly copied from Google Images
HTML
HEAD title
BODY
<a href="path" title="">
<img src="path" alt="">
<p> <pre><b><i>
<head>
<link rel="stylesheet" type="text/css" >
<script src="" type="text/javascript"></script>
</head>
<br/>
<hr/>
<div class="" id="" style="">
<span>
Images as Links
Just insert an image inside a link
Semantic HTML
<blockquote>
|
TABLES & LISTS
USES
- Organisation of text in neat columns and rows
- Some older websites uses them to set the layout
- Used in navigation bar
<table>
<tr>
<th>
<td> rowspan,colspan
<ul> <li>
<ol> <li>
<dl> <dt><dd>
FORMS
<form method="" action="">
<label for=""></label>
<input type="" id="" name="" >
input type:
text, radio ,checkbox, submit
password ,range , color
Some attributes:
placeholder, disabled, autofocus ,required
Reserved characters
&name; &#num;
- <
- >
- &
- "
- '
- ¢
- ©
CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/831137/images/5697699/10-Beautiful-Animated-CSS-SVG-Landscape-Designs-1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/553291/images/3416263/css-selectors-lrg.png)
Syntax
How to include
-
Inline style
-
Internal stylesheet
-
External stylesheet
CSS Selectors
tag {
}
.class {
}
#id {
}
CSS Colors
RGB(?)
Fonts
Font-size
Font-style
Font Family
Font Weight
CSS Styling Links
-
hover
-
active
-
visited
-
link
Some more pseudo-classes
-
first-child
-
last-child
-
nth-child
display
-
none
-
inline
-
inline-block
-
block
position
-
static
-
relative
-
fixed
-
absolute
Box Model
![](https://okdevtv.com/images/css/boxmodel.png)
![](http://dualeoblog.com/wp-content/uploads/2016/07/flexbox-css.png)
![](https://s3.amazonaws.com/thecharles2.0/uploads/unorderedlist/flexbox-main.png)
Flexbox basics
-
flex-direction
-
justify-content
-
align-items
-
-webkit-
-
-moz-
-
-o-
Vendor prefixes
DOM and CSSOM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/831137/images/5698354/html-dom-illustration.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/831137/images/5698366/cssom-defined.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/831137/images/5698376/render-tree-construction.png)
-
Process HTML markup and build the DOM tree.
-
Process CSS markup and build the CSSOM tree.
-
Combine the DOM and CSSOM into a render tree.
-
Run layout on the render tree to compute geometry of each node.
-
Paint the individual nodes to the screen.
5 steps to a rendered webpage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/553291/images/3416265/Bootstrap.png)
W3Schools
Mozilla Developer Network
CSS Tricks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/553291/images/3416268/google_fonts-dark.png)
Developer Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/553291/images/3416282/Google_Search_Take_Five.gif)
Any Problem?
HTML & CSS
By Harshit Maurya
HTML & CSS
- 191