Scribd
Upload
8 views

Codess For HTML and Css

Uploaded by

dakshgoyal2703
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Codess For HTML and Css

Uploaded by

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

Coding cheat sheet

HTML – Hyper Text Markup Language


CSS – Cascading Style Sheets
JavaScript
Bootstrap

Tag HTML
Purpose Example
<html>…</html> This tag is used to specify that the<html>
webpage is written in html, it is ……
used at the very first and last line……
of the code. </html>
<head>…</head> This tag includes the title and the <head>
links to JS and CSS scripts. <link ….>
<title>…. </title>
</head>
<body>…</body> Everything user sees on the <body>
webpage is written inside this tag. <h1>…. </h1>
</body>
<title>…</title> This tag contains the name of the <title>Cheat sheet</title>
webpage.
<link> It is used to link JS and CSS <link rel=” stylesheet”
scripts. href=”style.css”>
<h1…h6>…</h1… 6 different ways of writing a <h1>Cheat sheet</h1>
h6> heading, h1 is the largest while h6 <h2>HTML</h2>
is the smallest.
<div>…</div> It is a block-level element, it is <div>
used as a container for html <h1>…</h1>
elements. </div>
<span>…</span> It is an inline element, it is also <span>
used as a container for html <h1>…</h1>
elements. </span>
<p>…</p> It is used to write paragraphs. <p>HTML stands for Hyper
Text Markup Language</p>
<hr> It divides the elements by <hr>
drawing a horizontal line. (doesn’t have an ending tag)
<img> This tag is used to display images <html>
on webpage. <body>
<img src=” html.png”>
The URL where the image is </body>
src=”url” located on the drive/web. </html>
<a href=”…”>…</a> <a href=”…”>…</a> <a href=” youtube.be”>
id=”…” Id is used to identify one element. <div id=” htmlid”>

class=”…” Class is used to identify more <class id= “mainid”>


than one element.
<ol>…..</ol> This element represents an <ol type=”A/a/1/1)/1./i/I>
ordered list of items, many types <li>Coffee</li>
of markers could be used. <ol> is <li>Milk</li>
basically the container of multiple <li>Tea</li>
<li> elements. </ol>
<ul>…</ul> This element represents an <ul>
unordered list of items, typically <li>Apple</li>
displayed as a bulleted list. <li>Banana</li>
<ul> is basically the container of <li>Orange</li>
multiple <li> elements. </ul>
<li> The <li> tag defines a list item.
One <li> tag will show 1 item in a <li>Strawberry</li>
list. The <li> tag is added inside
the <ul> tag.
<section> <section> tags work like a div. It <section>
works as a container for other <p>Interesting fact – First
elements. computer was made out of
wood</section>
<br> Used to break a line. It means it <h1>Hello</h1>
adds a new line in between the <br>
page. <h2>I am Daksh</h2>
<iframe> This tag is used to insert/embed a <iframe width=”800”
HTML document or video or height=”500”
image inside another HTML src=”youtube.com”></iframe>
document.
<script>…</script> This tag is used to write js code <script>
inside html.(internal js) console.log(“Daksh”)
</script>

CSS
Tag Purpose Example
text-align This tag is used to align body {
the text in centre, left, text-align: centre;
right or bottom. }
font-family This tag specifies the font body {
of the text. font-family: arial;
}
color This tag specifies the body {
colour of the text. color: red;
}
font-style This tag allows you to body {
make your text italic, font-style: italic;
normal or oblique. }
font-weight This tag sets the body {
thickness/boldness of the font-weight: bold;
text. }
font-size This tag sets the size of body {
the font. font-size: 50px;
}
border This tag makes a border body {
around the specified border: dotted red;
area. }
border-radius This tag is rounds the .circle {
corners of an element. border-radius: 50%;
}
background/background- This tag changes the body {
color background-colour. background: red;
}
background-image: This tag is used to set an body {
url(“image.jpg”); image as background. background-image:
url(”bird.jpg”);
}
background-image: linear- This tag is used to set a body {
gradient linear gradient as background-image: linear-
background gradient(to
top/bottom/left/right,blue,red);
}
margin This tag sets a margin body {
around the area. margin: 20px
}
width and height This tag sets height and img {
(used for images mostly) width of the element. width: 50% or 30px;
height: 100px;
}
#id (when id needs to be This tag gives properties #cssid {
styled) to the mentioned id. color: white;
}
.class (when class needs to This tag gives properties .cssclass {
be styled) to the mentioned class. color: white;
}
padding This tag makes space body {
inside the element. padding: 20px;
}
line height This tag makes space body {
between lines of the line-height: 8px;
sentence. }
display This tag sets the display span {
behaviour of an element. display: inline-block;
}
text-decoration This tag is used to a{
decorate an element. text-decoration: none;
}
vertical-align The vertical-align img.a {
property in CSS controls vertical-align: baseline;
how elements set next to }
each other on a line are
lined up. img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}
float The float CSS property img {
places an element on the float: left;
left or right side of its }
container, allowing text
and inline elements to
wrap around it. Floated
elements are taken out of
the normal document
flow and do not take up
space. So it practically
does not have any
width/height.
overflow: hidden; Adding overflow: hidden; div {
triggers a new block overflow: hidden;
formatting context that }
prevents <ul> from collapsing
when it has floated children.
!important !important in CSS means that body {
all the previous styles on an background-color: blue;
element are to be ignored, background-color:red;!important;
and the style denoted by !
important is to be applied.
background-color:white;
position: sticky; Position: sticky will stick the .class {
element to a position position:sticky;
specified when we scroll }
up/down the web page.
a:link This tag is used to specify a:link{
the property of the link. color: red;
}
a:visited This tag is used to specify a:visited{
the property of the link color: red;
visited. }

a:hover This tag is used to specify a:hover{


the property of the link color: red;
which is being hovered. }

a:active This tag is used to specify a:active{


the property of the link color: red;
which is active. }
z-index This tag is used to set the p{
order of elements if they z-index: 3;
overlap on each other }
.divtag {
z-index: 5;
}

JavaScript

Tag Purpose Example


function It is a set of statements function myFunction() {
that performs a task return 2*3;
}
document.getElementById(“_”).src=”_”; It is used to change the document.getElementById(“dog_image”)
source of image. .src=”cat.jpg”;
document.getElementById(“image”).sty It is used to set an image’s document.getElementById(“image”).style
le.width=””; size .width=”200px”;
document.getElementById(“image”).sty document.getElementById(“image”).style
le.height=””; .height=”200px”;
Any parameter .style.width=”_”; It is used to set an image’s Function img(y) {
Any parameter .style.height=”_”; size y.style.width=”100px”;
y.style.height=”100px”;
}

Bootstrap

Tag Purpose Example

You might also like