Scribd
Upload
16 views

HTML Css

Uploaded by

purna
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

HTML Css

Uploaded by

purna
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 18

webdeveloper extension - too remove css from page

!+tab

structure
----------
<!DOCTYPE html> ---------tells browser that its html page
<html lang="en">
<head>
<meta charset="UTF-8"> -----encodeing standard
<meta http-equiv="X-UA-Compatible" content="IE=edge"> if ie render the page
then use latest version edge
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hi...kl</h1>
</body>
</html>

alt+shift + down arrow - copy same in next line


ctrl+/ ---- comment

h1 to h6
<p>lorem40</p> ---generate 40 character
<p>hello india <br> in this world</p> -----------break tag will add a new line

<a href="http://google.com" target="blank">Google</a> --------blank new page,href-


path of file in folder structure
<a href="./home.html">Home</a>

hyperlink
------------
<p>Click here to open google <a href="http://google.com" target="blank"
title="Click here">Google</a></p>
<a href="./home.html">Home</a>

image
------
<img src="./tree-276014__340.webp" alt="Boy playing football">

<ol type="A">
<li>Python</li>
<li>Java</li>
<li>cpp</li>
<li>odata</li>
</ol>

<ul style="list-style-type: circle;">


<li>Python</li>
<li>Java</li>
<li>cpp</li>
<li>odata</li>
</ul>
<dl>
<dt>Guiter</dt>
<dd>6 String</dd>
<dt>piano</dt>
<dd>0 String</dd>
</dl>

<b> -- bold tag


<strong>
<i> -- italic
<em> -- emphasize
<del> --- delete
<sub>
<sup> H2o

table

<table border="1">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>

<tbody>
<tr>
<td>purna</td>
<td>patra</td>
</tr>

<tr>
<td>purna</td>
<td>patra</td>
</tr>
</tbody>
</table>

<form action="home.html" method="GET">


<label for="username">UserName</label>
<input type="text" name="username" id="username">
<br>
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="email">Email</label>
<input type="email" name="email" id="email">
<br>
<input type="submit" value="Sign In">
</form>

"for=" and "id=" value must be same


"name=" is required for sending data useing "GET" or "POST" method
in "GET", we send data in url after we click submit button
http://127.0.0.1:5500/home.html?username=purna&password=1234&email=purna
%40gmail.com

in "POST", we send data in header request

required
placeholder

radiobutton
input:radio + tab

<p>select your gender</p>


<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">

<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">

<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">

"name=" for all must be same


"value=" is required to send selected value to backend

dropdown list
-------------

<label for="age-group">Age group</label>


<select name="age-group-values" id="age-group">
<option value="10-20">10-20</option>
<option value="21-30">21-30</option>
</select>

text area,color,date,file
--------------------------
<p>comment below</p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
pick color <input type="color" name="" id="">
date <input type="date" name="" id="">
file <input type="file" name="" id="">

class(group of element) and id(unique element)


use this inside style tag

<style>
.class{

#id{

}
h1{

}
</style>

div - block level element - takes whole width - acts like a container
span - inline element - takes only that much length

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container1{
background-color: blue;
}

.container2{
background-color: blueviolet;
}
.cls1{
background-color: cyan;
}
</style>
</head>
<body>
<div class="container1">
<p>Lorem ipsum, <span class="cls1">dolor</span>dolor sit amet consectetur
adipisicing elit. Eaque dolorem mollitia voluptas doloribus, excepturi doloremque
molestias ab illo reiciendis aliquam sit assumenda perferendis aspernatur ea
recusandae hic. Cupiditate corporis, illum repudiandae vitae adipisci quidem
provident voluptatibus sunt, libero temporibus similique tempora veniam sint
asperiores architecto dolorum aliquam eum sit praesentium?</p>
<ul style="list-style-type: circle;">
<li>Java</li>
<li>Python</li>
<li>cpp</li>
<li>odata</li>
</ul>
</div>

<div class="container2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque dolorem
mollitia voluptas doloribus, excepturi doloremque molestias ab illo reiciendis
aliquam sit assumenda perferendis aspernatur ea recusandae hic. Cupiditate
corporis, illum repudiandae vitae adipisci quidem provident voluptatibus sunt,
libero temporibus similique tempora veniam sint asperiores architecto dolorum
aliquam eum sit praesentium?</p>
<ul style="list-style-type: circle;">
<li>Python</li>
<li>Java</li>
<li>cpp</li>
<li>odata</li>
</ul>
</div>
</body>
</html>

semantic elements: <form>, <table>, and <article> - Clearly defines its content.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

it helps to special abled people

If you use the less than (<) or greater than (>) signs in your text, the browser
might mix them with tags.
Character entities are used to display reserved characters in HTML

o display a less than sign (<) we must write: &lt;


A non-breaking space is a space that will not break into a new line.

§ 10
10 km/h
10 PM

If you write 10 spaces in your text, the browser will remove 9 of them. To add real
spaces to your text, you can use the &nbsp; character entity.

meta tag - it helps it SEO optimization

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="purna">
<meta name="description" content="This is hels to display SEO">
<meta name="keywords" content="html,js">
<title>Document</title>
</head>
<body>

</body>
</html>
css
-----
3 ways to add css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="purna">
<meta name="description" content="This is hels to display SEO">
<meta name="keywords" content="html,js">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
/* h1{ ------------------------------>
color: green;
} */
</style>
</head>
<body>
<!-- <h1 style="color: green;">hello css</h1> --> -------------------------->
<h1>Hello css</h1>
</body>
</html>

style.css
----------
h1{
color: green;
}

fonts - sherif font(uneven font)


- sans-serif font (recommendet)

body{
font-family: Arial, Helvetica, sans-serif;
}

first it will look for Arial if not present den Helvetica then sans-serif

css-color
----------
h1{
/* color: rgb(32, 160, 32); */
color: #3254a8;

}
google "color picker"
rgb - 0-255,hex - 0-9a-f
css selector - 3 ways
-------------
p{
background-color: black;
}

#id{
background-color: black;
}

.classname{
background-color: black;
}

utility classes
-----------------
.text-red{
color: red;
}

.text-green{
color: green;
}

.bg-dark{
background-color: black;
}

<p class="text-red bg-dark">test data</p> ------------use of more then one


class

css selector
-------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="purna">
<meta name="description" content="This is hels to display SEO">
<meta name="keywords" content="html,js">
<link rel="stylesheet" href="style.css">
<title>Document</title>

</head>
<body>
<header>
<p>short paragraph inside header</p>
<h1 class="main-logo">main logo</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Location</a></li>
</ul>
<p>short paragraph inside header</p>
</header>
<main>
<h2>Main content of our home page</h2>

<section class="my-articles">
<h2>Article section</h2>
<article>
<h2>Article heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo,
possimus!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Commodi, dolorum.</p>
</article>
<article>
<h2>Article heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo,
possimus!</p>
</article>
</section>
</main>
</body>
</html>

style.css
-----------

body{
font-family: Arial, Helvetica, sans-serif;
}

header{
background-color: #f0ebeb;
}

/* get the section tag which has class "my-articles" */


section.my-articles{
background-color: #f2a9a9;
}

/* universal selector
*{
color: blue;
} */

/* select all the p child tag present under header */


header p{
color: red;
}

/* select all the a child tag present under li */


li a{
color: blue;
}

/* select section whose class is my-articles then select all h2 under that */
section.my-articles h2{
color: green;
}

/* select section whose class is my-articles then select h2 which is dirctly


linked with that section*/
section.my-articles > h2{
color:aqua;
}

/* select all h2+p combination */


h2+p{
color: orange;
}

/* select all ul+p combination */


ul+p{
color: gray
}

/* select section with class my-article then select all h2+p combination */
section.my-articles h2+p{
color:aqua;
}

Attribute selector
-------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="purna">
<meta name="description" content="This is hels to display SEO">
<meta name="keywords" content="html,js">
<link rel="stylesheet" href="style.css">
<title>Document</title>

</head>
<body>
<h2>links</h2>
<a href="https://google.co.in">google india</a>
<a href="https://google.co.uk">Google uk</a>
<a href="https://flipkart.com">Flipkart</a>

<h2>form</h2>
<form action="">
<label for="fname">first name</label><br>
<input type="text" id="fname"><br>
<label for="lname">Last name</label><br>
<input type="text" id="lname"><br>
<label for="pass">password</label><br>
<input type="password" id="pass"><br><br>
<input type="button" value="submit"><br>
</form>
</body>
</html>

style.css
----------
input[type = "text"]{
color: red;
}

input[type ^= "t"]{ ----------starts with "t"


color: forestgreen;
}

input[type = "password"]{
background-color: pink;
}

a[href = "https://google.co.in"]{
color: red;
}

a[href *= "google"]{ -----------which contains "googel"


color: red;
}

a[href ^= "https"]{ ---------------starts with "https"


color: green;
}

a[href $= ".com"]{ --------------------end with ".com"


color: red;
}

inline style attribute > id selector > class selector > element selector

<body>
<h1 class="h1class" id="h1id" style="color: aqua;">Hello</h1>
</body>

#h1id{
color: green;
}

.h1class{
color: red;
}

h1{
color: blue !important;
}
if two class attached wuith a element then last class has high priority

<h1 class="h1class h1class2" >Hello</h1>

.h1class{
color: red;
}

.h1class2{
color: cornflowerblue; ------------this will active
}

if we change it to

h1.h1class{
color: red; ------------this will active because of more specificity -0,0,1,1
-> 11
}

.h1class2{
color: cornflowerblue; ----specificity --> 0,0,1,0 -> 10
}

calculate specificity in this order


inline style attribute > id selector > class selector > element selector

"!important" has highest priority of all in all above case

h1{
color: blue !important;
}

border
------

h1{
border: 3px solid red;( width, style , color)
/* border-width: 3px;
border-style: solid;
border-color: red; */
border-radius: 20px;
}

similarly border-top, border-left, border-right, border-button

h1{
padding: 40px;
padding: 20px 40px; top-buttom , right-left
padding: 20px auto; top-buttom , automatically adjuct
padding: 20px 30px 40px 10px; top - right -button - left (clockwise)
}
similarly margin
textallign: center

margin collapsing
-----------------
if two box is there up and down like this, then it will consider the heighest one
in below example its 90px

.box1{
margin-bottom: 80px;
}

.box2{
margin-top: 90px;
}

inline vs block level element


------------------------------

block level element(div , h1,p)


it takes whole available width , so,it starts with each new line
we can set height and width
magin works top,button,left,right
padding works top,button,left,right
display: inline - it convert into inline level

inline element -(a,span, img)


it takes width how much it required
we can not set height and wedth
magin works only left,right( no top,button)
padding works top,button,left,right but it will over flow in top , buttom
display: block - it convert into block level

but in img tag , we can add padding ,margin,height and width

inline-block
-------------

display: inline-block

by this we can control height, width , magin , padding of inline element but it
will does not take a new line
the link will show side by side
<a href="">My website</a>
<a href="">My new website</a>

border box

after giveing a width for a "content" , if we will give border, padding then width
will increase accordingly
so to make width fix to width use property box-sizing:border-box;

<hr>
<p>Lorem, ipsum dolor sit amet co</p>
hr{
width: 500px;
margin-left: 0px;
}

p{
width: 500px;
border: 20px solid black;
padding: 20px;
box-sizing:border-box;
}

css reset- means by default browser give some margin , padding,so to remove we make
it zero for whole page
and add border sizeing

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

how to make center allign of "a" tag- add "display: inline-block;"

a{
display: inline-block;
width: 500px;
text-align: center;
}

font property
----------------
h1{

font-family: 'Poppins', sans-serif';


font-weight: 400; ----------------------more weight more darker
font-style: italic;
font-size: 20px;
text-decoration: underline solid red;
}

p{
line-height: 10px; ----------space between two line
word-spaceing: 8px;
letter-spaceing: 8px;

psedo class anchor tag


-----------------------

a:link{
color: orange;
}
a:visited{
color: red;
}

a:hover{
color: green;
}

a:active{
color: black
}

the above example shows in a tag,it can apply in other tag too
the order in css file must be link->visited-> hover->active

active- when we click on link and page not opened, in that period "active" comes
into picture

psedo class- focus


-------------------

input:focus{
padding: 5px;
outline: none;
border: 2px solid green;
}

input:required {

color: red;
}

psedo class - first child ( calculate all element )


----------------------------

header
p1 ---first child
h1

p:first-child{
color:red; -------select if first child of parent is p
}

p:last-child{
color:red;
}

p:nth-child(2){
color: green
}

p:nth-child(2n){
color: green
}
p:nth-child(2n+1){
color: green
}

psedo class - first of type ( calculate only p)


------------------------------
header
h1
p1 ---first-of-type

p:first-of-type{
color: red; --------select first p of the parent
}

p:last-of-type(2){
color:red
}

ul li:nth-of-type{
color: red;
}

p:nth-of-type(2n){
color: red;
}

psedoclass -:not

body
h1
<p class="fancy">lorem120</p>

body :not(p){
color: blue;
}

body :not(.fancy){
color: blue;
}

empty
------
<div></div>
<p></p>
<div></div>

div:empty{
background: red;
border: 2px solid black;
height: 100px; ---------------height and width must
width: 100px;
}

:root{
background: red;
color: white;
}

html{
background: blue;
color: white;
}

body{
background: yellow;
color: white;
}

between root and html , root has more specificity that is why backgroundcolor will
be blue

pseudo element

p::first-letter{
font-size: 32px;
}

h1:selection{
background: black;
color: white;
}

::after,::before

for pseudo element we use "::" , for psedoclass we use ":"

<p class="cool">this is my paragraph</p>


<h1 class="main-heading">this is my heading</h1>
<img src="img.jpg" alt="a man holding shovel">

.cool::after{
display: block;
content: "hello"
color: green;
}

.main-heading::before{
content: 'hello';
color: red;
}

with img,br,input tag it will not work

percentage in css - child element ll take that much percentage with respect to its
parent element
--------------------
div{
header:2px solid black;
font-size: 20px;
}

p{
border: 1px solid green;
width : 50%
margin: 10px auto;
}

"p"'s width will be 50% of div's width

rem
----

html{

font-sizze: 62.5% -----------responsive when in setting font size changed


font-size : 10px ........not responsive
}

.box1{
font-size: 2rem -----------means 2 times then parent element 20px
}

em
----
in em font size calculatted with respect to parent font size
but all other size calculated from current font size

h1{
font-size: 2em; --------------parent fontsize * 2(16*2 = 32)
border: 2em solid black;
padding: 3em ------ cureent font-size*3 32* 3
}

suggest to use em and rem for compatibility


font size -rem
padding/margin - em

view port - it refers to the entire screen in which we show the web element

.box{
border: 4px solid red;
width: 50%;
padding: 5px;
}

h1{
border: 2px solid green;
width: 50vw ------------------it will take 50% of screen
width: 50% ---------------- it will take 50% of its parent element
}

2174984
GSD 1800-572-0473
https://outlook.office.com

https://onecognizant.cognizant.com

https://be.cognizant.com

onedrive video
associate 360
add dependent beneficiary
gsd
peoplesoft hcm
nationalid-pancard
bank details
medi details
mypay
thru time and time sheet

Purna.Patra3@cognizant.com

943842

You might also like