Scribd
Upload
9 views19 pages

Jamshaid

caccas

Uploaded by

chabdulmanan8953
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views19 pages

Jamshaid

caccas

Uploaded by

chabdulmanan8953
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

<!

DOCTYPE html> html version

<html></html> --- core element

<head></head> --- hidden data/ links etc

<body></body> --- main webpage

<element></element> ---

<title></title> --- title on page (tab name)

<h1></h1> --- heaing 1 largest

<h2></h2> --- heaing 1 largest

<h3></h3> --- heaing 1 largest

<h4></h4> --- heaing 1 largest

<h5></h5> --- heaing 1 largest

<h6></h6> --- heaing 1 largest

<p></p> --- paragrph for data to write

<br/> --- line break (invisible)

<hr> --- heading row (visible)

<img src="image_path" alt="alternative_text_if_img_not_avaliable" width="widthValueInNumbers"


height="heightValueInNumbers">

<a href="link address" target="_blank" >raw string</a> --- link insertion

<a href="index.html">back to HomePage</a> --- to homepage

<a href="link address" target="_blank" > About </a> --- to another page
<!---->while at top

<h1 id="top">Top of the page</h1>

<a href="#top" > Go to Top </a> --- to go to top of the page

<sup></sup> --- supersucript (in power)

<sub></sub> --- subsucript (in base)

<strong></strong> --- bold

<em></em> --- italic

&copy; copyright sign

<h1>Copyright &copy;</h1>

ordered list.

<ul>

<li href="link"> Home </li>

<li href="link"> About </li>

<li href="link"> Login </li>

</ul>

table

<table>

<tr>

<th>O</th>

<th>2</th>

<th>3</th>

</tr>
<tr>

<td>one</td>

<td>two</td>

<td>three</td>

</tr>

</table>

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

<form action="link" method="sendMethod">

Name:<input type="text" name="name" id="">

Email:<input type="submit" name="name" id="">

<button type="submit">Submit Data</button>

</form>

use <label></label> to display name email etc.

<input type="text" name="name" id="" placeholder="enter name here">

<input type="password" name="name" id="" placeholder="enter name here">

<input type="submit" name="name" id="">

<input type="email" name="name" id="" placeholder="enter name here">

<input type="text" name="name" id="" value="enter name here"> // difference b/w placeholder and
value
csssssssssssss

inline css

internal css

external css

selecting html content in css

element selector --- h1, h2, p, hr, ul, etc.

id selector --- html element must have attribute id="name_u_like"; //there should be unique name of id

while in css #idName{property:value;}

class selector --- html element must have attribute class="nameULike"; //group all same in class

while in csss .className{property:value;}

universal selector --- *{property:value;}

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

div --- block to group elements. -- starts at newline -- block level element

span --- sub portion of element's data -- starts inline -- inline level element

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

inheritence works in DOM

child will inherit all parent properties

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

color :color name;

background-color

color names
rgb 0-255 red green blue (255,255,255)

rgba 0-255 red green blue (255,255,255) 0-1 opacity

hex #000000 #RRGGBB F means full

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

absolute units vs relative units

absolute units dont depends upon anything. (1px is one dot at viewport)

relative units depends upon parent element. em (16px default font size of chrome browser = 1em =
16x1 = 16px).

as <p> is in body tag and body is inhereting values from browser so 2rem is 16x2 = 24px

rem : default ever (root(html) font size). uses 16xcount values to calc data for px. deos not depends on
parent element.

vh vw : only depend upon screen i.e. relative to screen

1vw = 1% of screen width;

100vh = 100% of screen height

min-height: if the content coming after does not provide height to display, use min height.

but min-height will use its own 100vh or vw, use calc(100vh - size in of element before elemeint using
min-height)

*{

margin: 0; // sets default margin provided by browser to 0.

--------------------------------------------------------------
font-size: 1rem;

font-family: verdana(font-stack);

google fonts link in html or import in css

font-weight: bold;

font-style: itlic;

text-align: left(default) right center etc.

text-indent: 10px; // starts text after 10 points in screens.

line-height // spacing between lines

letter-sapcing // spacing between chracters

word-spacing // spacing between words

text-tranform // uppercse lowercase capitalize

text-decoration // underline overline line-throw

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

css box model

margin = distance between outside space and element border

margin = 0px 0px 0px 0px = top right bottom left

border = the border of element's data

border = 0px 0px 0px 0px = top right bottom left

padding = distance between data inside element and border

pading = 0px 0px 0px 0px = top right bottom left

border-radius // to make ractangle towards circular

negative margin // to move element at document.


margin-top: -100px // move element above 100px

outline - colored margin

outline is same as border except one property.

outline-offset = move outline inside or outside of element in direction top bottom left right

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

display properties

block

inline

inline-block

box-sizing:border-box;

inline level element = always starts in line(anywhere at current line) , takes only width that content is
using.

new line is not used in inline elements.

top bottom margin is not respected by browser.

block level elements = always starts and ends at new line. takes 100% width

top bottom margin is respected by browser.

imp: if u want to make an inline element to be top bottom margin respected by browser, and dont want
to make it block lvl element.

use display:inline-block.

border-box = when padding is applied on an element, it is added with its heigh and width.
for example a div is of 200px width and 200px height, after applying 20px on all sides, it will be 240px by
240px.

to over come that problem, use borderbox, now padding will be added and then managed by box model

200px width and 200px height, after padding of 20px on all sides, it will be same 200px by 200px ,
internal content will be mde 160x160.

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

display: none; // elements will be removed from DOM

opacity:0; // element will be 0 view level/ hidden

opacity:0.5; // 50% clear element

opacity:1; // visible element / normal

visibility:hidden; // self explanetory / 0 opacity

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

background:url('image.jpg')

background-repeat // no-repeat round

background-size // cover contain

background-position // center 0% 0% relative to container

background-attacement // fixed

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),

url('./imgs/big.jpg') center/cover no-repeat fixed;

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

float -- to get element out of normal flow and stick it with left or right (newspaper mode)

clear -- to force set an element after the element having float property to use new line.

overflow -- element is floated and size greater than parent, overflow:hidden will set element inside
parent and increase parent size.
position-static -- default position set by DOM

position-relative -- relative only to html container, top = 50%, left = 50%

position-absolute -- same as relative but it can be set relative to any ancestor.

position-fixed -- fixed position relative to html or parent element.

media-quires --

@media screen and (min-width: 576px)

// css properties that only apply if screen width is between 0px and 576px.

// if screen resolution is above than 576px, these properties wont work.

@media screen and (min-width: 768px)

// css properties that only apply if screen width is between 576px and 768px.

// if screen resolution is above than 768px or below 576px, these properties wont work.

z-index - control elements that are at back .

position absolute will relative to any container,

use position absolute on images and position relative on div, so position of images can be set with
respect to div parent.

img{

width: 100px;

height: 100px;

position: absolute;

}
.banner{

width: 80vw;

height: 70vh;

border: 5px solid cyan;

position: relative;

.one{

top: 0;

left: 0;

z-index: 0;

.two{

top: 10%;

left: 10%;

z-index: -1;

.three{

top: 20%;

left: 20%;

z-index: -2;

::before and ::after pseudo elements

img cant be used, use div with img

:hover

a:link

a:visited

a:active
:root{

// redefine DOM html

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

tranform translate() -- move element in x or y direction or to -x -y

tranform rotate() -- rotate element in o to 360deg

tranform scale() -- grow or shrink element of size

tranform skew() -- make ||gram.

*{

margin: 0;

padding: 0;

box-sizing: border-box;

div{

width: 100px;

height: 100px;

margin: 10px;

font-size: 1.5rem;

text-align: center;

color: rgb(228, 1, 1);

text-transform: uppercase;

font-weight: bold;

overflow: hidden;

.one{

background-color: aqua;
transition: all 2s linear;

transform: translate(100px, 200px);

.two{

background-color: rgb(0, 255, 0);

transform: rotate(360deg);

transition: all 2s linear;

.three{

background-color: rgb(27, 16, 187);

transform: scale(2);

transition: all 2s linear;

.four{

background-color: rgb(138, 202, 18);

transform: skew(-20deg);

transition: all 2s linear;

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

transition-property -- all or explicit type name

transition duration -- seconds or mili seconds 1s or 0.5s

transitioin-delay -- 2s, after this time transition will take place

transition: propertyName duration delayTime/optional;

if u want all properties to be same in duration and delay, use code below.

transition: all/propertyName duration/1s timing-function/linear/ease delay/2s/optional;

----------------------------------------------------
animation

unlike transition property which takes places form 0 to 100% in one try,

animation property can be adjusted instantaneously.

i.e. at 0%, at 20% and so on.

animation: animationName duration iterationCount;

div{

width: 100px;

height: 100px;

background-color: springgreen;

div:hover{

animation: move 5s infinite;

@keyframes move {

0%{

background-color: steelblue;

50%{

font-size: 2rem;

color: red;

overflow: hidden;

text-transform: uppercase;

border-radius: 30%;

transform: translateX(100px);
}

100%{

background-color: #222;

color: salmon;

transform: translateX(-50px);

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

animation-fill-mode: usually after animation element will move to its initial stage, if u want that element
will retain the properties at last keyframe,

use animation-fill-mode: forward;

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

css vars

local and global;

global;

:root{

--varName:properties;

--myColor: #222;

--myTranslate; translate(100px, 100px);

.one{

color: var(--myColor); //#222

transform : var(--myTranslate);

//use any where in css

local vars;
can be used only by childs of parent or parent itself.

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

font awosome icons

use cdn or download from fontawsome website

text-shadow

shadow of text.

text-shadow: x-axisVal y-axis-Val BlurRadius spreadRadius/optional colorName;

text-shadow: 10px 5px 10px 10px grey;

box-shadow

browser prefixes

sementic HTML

Emmet Snippts

css flexbox and grid

div.container>div.item.item-$>{item $}

div.container>(div.item.item-$>{item $})*10

<!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">

<link rel="stylesheet" href="./styles.css">

<title>Document</title>

</head>

<body>

<div class="container">

<div class="item item-1">item 1</div>

<div class="item item-2">item 2</div>

<div class="item item-3">item 3</div>

<div class="item item-4">item 4</div>

<div class="item item-5">item 5</div>

<div class="item item-6">item 6</div>

<div class="item item-7">item 7</div>

<div class="item item-8">item 8</div>

<div class="item item-9">item 9</div>

<div class="item item-10">item 10</div>

</div>

</body>

</html>

*{

margin: 0;

padding: 0;

.container{

display: flex;

flex-direction: column;
}

.item{

flex: 0 0 300px;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

font-size: 2rem;

text-transform: uppercase;

font-weight: bold;

.item-1{

background-color: turquoise;

@media screen and (min-width:576px){

.container{

display: grid;

height: 100vh;

grid-template-columns: repeat(5, 1fr);

grid-template-rows: repeat(4, 1fr);

grid-template-areas:

"one one two three three"

"one one four five five"

"six seven seven five five"

"six eight nine nine ten"

}
.item-1{

background-color: blue;

grid-area: one;

.item-1:hover{

background-color: tomato;

.item-2{

background-color: gray;

grid-area: two;

.item-3{

background-color: springgreen;

grid-area: three;

.item-4{

background-color: chartreuse;

grid-area: four;

.item-5{

background-color: cyan;

grid-area: five;

.item-6{

background-color: indigo;

grid-area: six;

.item-7{

background-color: lemonchiffon;
grid-area: seven;

.item-8{

background-color: lightgreen;

grid-area: eight;

.item-9{

background-color: navy;

grid-area: nine;

.item-10{

background-color: wheat;

grid-area: ten;

You might also like