Scribd
Upload
199 views20 pages

Basics of Website Design

This document provides information and examples about HTML and CSS concepts. It includes explanations of common tags like <a>, <link>, <button>, <script>, and <div>. It also covers CSS properties and selectors including colors, background images, classes, and media queries. The document uses these concepts to style a multi-course menu for a restaurant website.

Uploaded by

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

Basics of Website Design

This document provides information and examples about HTML and CSS concepts. It includes explanations of common tags like <a>, <link>, <button>, <script>, and <div>. It also covers CSS properties and selectors including colors, background images, classes, and media queries. The document uses these concepts to style a multi-course menu for a restaurant website.

Uploaded by

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

<!

DOCTYPE html>
<head>
<link href="/normalize.css" rel="stylesheet">
<style>
header{
text-align: center;
}
ul{
padding: 10px;
}
li{
display: inline;
}

</style>
</head>
<body>
<header>
<img src="/assets/jeff.png">
<h1>Jeff's Blog</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Best Poems</a></li>
<li><a href="#">Worst Poems</a></li>
</ul>
</header>
</body>
<a> --> Used to insert/make hyperlink to a text.
It has an attribute called href(hypertext reference) which controls the
URL that your browser
opens when you click the link on the page. e.g
<a href="#">Worst Poems</a>
or

<li>
<a href="#">Worst Poems</a>
</Li>
<link> --> It is a link tag. Used to include an external CSS file.
It is an alternative to <style> tag which is used to add/write CSS
within the file.
It is used within <head> tag. eg.
<link href ="/normalize.css" rel="stylesheet">
A <link> tag always needs 2 attributes.
1.) href --> a url where CSS file presents.
2.) rel --> it should always be set to "stylesheet"
--------------------------------------navigation styles-------------------------
--------------
display property --> It is used to set how the data/content is displayed.
Inline attribute of display property is used to display all
the contents of a tag within a single line.
e.g
display: inline;
--------------------------------------responsive design & java script-----------
----------------------------
<!DOCTYPE html>
<head>
<link href="/normalize.css" rel="stylesheet">
<style>
header {
text-align: center;
background: url('http://dash.ga.co/assets/jeff-bg.png');
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {
font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article{
max-width:500px;
padding: 20px;
margin: 0 auto;
}
@media(max-width: 500px){
h1{
font-size:36px;
}
li{
display: block;
padding: 5px;
}
body{
background:red;
}
}


</style>
</head>
<body>
<header>
<img src="/assets/jeff.png">
<h1>Jeff's Blog</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Best Poems</a></li>
<li><a href="#">Worst Poems</a></li>
</ul>
</header>
<article>
<h2>VHS umami pop-up trust fund</h2>
<p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Ech
o Park. Street art swag brunch, next level roof party Schlitz hella organic keff
iyeh selfies. You probably haven't heard of them polaroid hashtag +1, meggings b
iodiesel Portland High Life cray tumblr retro.</p>
<button>Like</button>
</article>
<article>
<h2>Sartorial synth Echo Park, roof party</h2>
<p>chambray you probably haven't heard of them pour-over viral selvage umami s
kateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycl
e rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlks
hk bitters. Four loko leggings chambray Vice.</p>
<button>Like</button>
</article>
<article>
<h2>Forage food truck keytar master cleanse</h2>
<p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic Cosby swe
ater single-origin coffee, bicycle rights organic lo-fi street art american appa
rel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
<button>Like</button>
</article>

<script>
alert("javascript works!");
$("button").on("click", function() {
alert("a button was clicked!")
});

</script>
</body>
The third character controls the amount of blueness,together they are RGB.
e.g #000 - black
#FFF - white
#F00 - Red
rgba property --> Hex codes aren't the only way to do color in CSS.
Another good method is " rgba() ".this lets you add alpha(tr
ansparency) to the mixture.
e.g ul {
background: rgba(0,0,0,0.5);
}
RGBA colours are a lot like hex colours with a slightly less confusing syntax :
rgba(255,255,255,1)
Instead of a " 0-F " scale ,RGBA colors use a 0-255 scale,and the last digit(tra
nsparency) uses a 0-1 scale.
e.g
(0,0,0) --> black
(255,0,0) --> red
(0,255,0) --> green
(0,0,255) --> blue
(255,255,255) --> white
(0,255,255) --> cyan
(255,0,255) --> magenta
(255,255,0) --> yellow
<button> --> It is a button tag. Used to create a button.
<script> --> It is a script tag. Used to include javascript in an html page.
It is used inside body tag and in the end of body tag where we writ
e the whole javascript/jquery.
But if we are importing some javascript/jquery from anywhere then w
e have to use <script> tag inside head,
in order to define the source of that javascript/jquery.
e.g
<script src="/assets/jquery.js"></script>

e.g <script>
alert("javascript works!")
</script>

Now we will use jquery to listen the events of an element.

Syntax: $(element).on(event-type,things-to-be-done);
e.g
$("button").on("click", function()

{
alert("a button was clicked!")
});

Explanation: step 1.) firstly, we select the element(s) who's
events we want to listen to.
e.g $("button")

in this example we are trying to listen
the events of "button" element

Note: we can also select paragraphs wit
h $("p") or headings with $("h1")
step 2.) Then we call the " on() " function, whic
h sets up an event listener for our
button element, inside its parenthesis a
re two options(parameters or arguments)
e.g
on("click", function() {
alert("a button was clicked!")
});
2.1) Now, the first parameter is the type of
event we want to listen to. In this example
it is "click" but we could also listen f
or other type of events like : hover, scroll etc.
It must be in quotes because its a strin
g,which basically means its a text(as opposed to
numbers or lists or functions.

2.2) Now, the second parameter is a function
cotaining the things to be done when our event happens.
In this example we will pop up an alert
with the text " a button was clicked!",
note: functions group together chunks of
code and allow them to be executed at a later time.
--------------------------------------visuals-----------------------------------
----
<!DOCTYPE html>
<head>
<style>
body {
font-family: helvetica, sans-serif;
margin:0 auto;
max-width: 600px;
}

div{
height: 200px;
background-size:cover;
position: relative;
border-radius: 12px;
margin: 40px 0 0 0;
}
.first {
background: url("http://dash.ga.co/assets/firstcourse.jpg");
}
.second {
background: url("http://dash.ga.co/assets/secondcourse.jpg");
}
.dessert {
background: url("http://dash.ga.co/assets/dessertcourse.jpg");
}
p{

color: rgba(255,255,255,1);
background: rgba(0,0,0,1);
padding: 10px;
text-align:justify;
line-height: 28px;
position:absolute;
bottom: 0;
margin: 40px 0 0 0;
}
</style>
</head>
<body>
<h1>esha's restaurant</h1>
<div>
<div class="first">
<p>welsh onion soko $14<br />
<small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel
amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small>
</p>
</div>
<div>
<div class="second">
<p>pastrami boudin tongue $22<br />
<small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumsti
ck. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork l
oin prosciutto bresaola.</small></p>
</div>
<div>
<div class="dessert">
<p>fruitcake marzipan pudding dragee $8<br />
<small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o
bear claw ice cream candy canes.</small></p>
</div>
</body>
<div> --> It allows you to style a group of elements with the same CSS.
note: <div> tag is a non-semantic tag. semantic tags are like <article
>,<header>,<nav>,<footer>
semantic tags means it says something useful and defining about
its contents.
Non-semantic tags means its all-purpose tag,you can use it as a
container to group any type of content so it can be styled
by a single bit of CSS.
e.g
<div>
<h2>welsh onion soko $14</h2>
<p>Mustard sierra leone bologi kale chard beet g
reens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslan
e asparagus lentil. </p>
</div>
<div> tag styling -->
e.g
div{
height: 200px;
background: url("http://dash.ga.co/assets/firstcou
rse.jpg");
background-size:cover;
margin:0 auto;
max-width: 600px;
}
class property --> class property lets you name and group HTML tags.
e.g <tag class="name">
here class is the tag's property and name is the propert
y value.
Now in order to use class and then style it, firstly you
have to assign the class names
to the tag in which you want to use the class attribute.
e.g
<div>
<div class="first">
<h2>welsh onion soko $14</h2>
<p>Mustard sierra leone bologi kale char
d beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer
purslane asparagus lentil. </p>
</div>
<div>
<div class="second">
<h2>pastrami boudin tongue $22</h2>
<p>Tri-tip capicola kielbasa salami bris
ket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl.
Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</p>
</div>
Note: Instead of writting "class", we can only use names
while styling because class names differ from tag names in that they begin with
periods.
e.g
body {
font-family: helvetica, sans-serif;
margin:0 auto;
max-width: 600px;

}
div{
height: 200px;
background-size:cover;
background: url("http://dash.ga.co/assets/
firstcourse.jpg");
}
.first {
background: url("http://dash.g
a.co/assets/firstcourse.jpg");
}
.second {
background: url("http://dash.g
a.co/assets/secondcourse.jpg");
}
.dessert {
background: url("http://dash.g
a.co/assets/dessertcourse.jpg");
}
Note: even though every <div> is supposed to display the
first image,where the div and class disagree,class wins because styles flow dow
n in order of specificity.
so now the background attribute in div tag becomes
cruft(an excess code that doesn't perform a meaningfull function).

--------------------------------------Positioning elements----------------------
-----------------
Note:
1.) If you want to add some exact space on all sides, then you use paddi
ng
e.g
padding: 10px;
2.) If you want to add different space on all sides, then you use margin
e.g
margin: 40px 0 0 0;
3.) If you want to add same value to "top and bottom" or "left and right
"
e.g
margin: 0 auto;
here the first value controls top and bottom margin and second v
alue(which could be a number)
controls the left and right margins.
div{
height: 200px;
background-size:cover;
position: relative;
border-radius:12px;
margin: 40px 0 0 0;
}
p{

color: rgba(255,255,255,1);
background: rgba(0,0,0,1);
padding: 10px;
text-align:justify;
line-height: 28px;
position:absolute;
bottom: 0;
margin: 40px 0 0 0;
}
line-height property --> It lets you to increase or decrease the vertical space
between lines.
e.g
line-height: 28px;
text-align property--> it lets you to align the the content(text).
e.g
text-align:justify;
position attribute property --> It will help you to break it out of the document
regular flow.
e.g
position:absolute;
position: relative;
NOTE: there can be two attributes/values for position at
tribute.
1.) absolute
2.) relative
bottom property --> It helps you to move the text to zero pixels from the bottom
.
e.g
bottom: 0;
<br /> --> It is a break tag, It ends with a slash because it is a self closing
tag.
Used to break a line.
Note: while using br tag , include a space between word "br" and "/ "
and slash is used after
the word br and not in front of it as it is usually used in orde
r to close other tags.
<small> tag --> it is used to make the text in lower case form.
e.g
<small>Tri-tip capicola kielbasa salami brisket chicken
rump strip steak drumstick. Meatloaf
chuck boudin ribeye pork jowl. Andouille bacon jo
wl meatloaf pork loin prosciutto bresaola.
</small>
/* */ --> It is comment. Used to hide any lines of code without deleting it or
used to provide any comment about code.

note: /* means stop reading this CSS
*/ means start paying attention to CSS again.
--------------------------------------Advanced layouts--------------------------
-------------
<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='styles
heet' type='text/css'>
<style>
h1 {
font-family: 'Londrina Shadow', cursive;
font-size: 75px;
text-align: center;
margin: 60px 0 0 0;
text-color: #aaaaaa;
}
h2 {
text-align: center;
margin: 0 0 70px 0;
text-color: #bbbbbb;
}
body {
font-family: helvetica, sans-serif;
margin: 0 auto;
max-width: 600px;
background: #232323;
}
div {
height: 200px;
background-size: cover;
position: relative;
margin: 40px 0 0 0;
border-radius: 12px;
}
p {
color: rgba(255,255,255,1);
background: #000;
background:-webkit-linear-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.4));
background:-moz-linear-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: absolute;
bottom: 0;
margin: 0;

}
.first{
background-image: url("http://dash.ga.co/assets/firstcourse.jpg");
}
.second{
background-image: url("http://dash.ga.co/assets/secondcourse.jpg");
}
.dessert{
background-image: url("http://dash.ga.co/assets/dessertcourse.jpg");
}
.price{
float: right;
}
</style>
</head>
<body>
<h1>esha's restaurant</h1>
<h2>A New York City Eatery</h2>
<div class="first">
<p>welsh onion soko <span class="price">$14</span><br />
<small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel
amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small>
</p>
</div>
<div class="second">
<p>pastrami boudin tongue <span class="price">$22</span><br />
<small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumsti
ck. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork l
oin prosciutto bresaola.</small></p>
</div>
<div class="dessert">
<p>fruitcake marzipan pudding dragee <span class="price">$8</span><br />
<small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o
bear claw ice cream candy canes.</small></p>
</div>
</body>
<span> tag --> It lets you to manipulate any specific span of content that you
want,
in order to make that contents behaviour different from the rest
of the content.
e.g
if you want some part of text to have a different behavi
our i.e layout or alignment etc.
then you have to add that content inside <span> tag, and
then define specific content with different classes
so that they can be differentiated while applying styles
to them.
note: text-align can only align BLOCKS to the right,it didn't wo
rk on span as spans are inline elements.
e.g
Block elements: paragraphs (<p>), headers (<h1>,<h2>) ,
lists (<ul>,<ol>,<li>) , div (<div>)
Inline elements: hyperlinks (<a>), images (<img>) , form
-fields (<input>) , spans (<span>)
So, now in order to align any text within <span> tag or
any inline element we have to use " float attribute "
e.g
<p>welsh onion soko <span class="price">$14</span><br />
<small>Mustard sierra leone bologi kale chard beet green
s black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane as
paragus lentil.
</small>
</p>
float property --> float lets you to slide the content around inside its contain
er element.
e.g
.price{
float: right;
}
manipulating colours: There are 2 ways by which you can manipulate colours.
1.)By using alpha transparency channel in rgba
e.g rgba(0,0,0,1)
2.)By using Gradients. There are 2 types of gradients
a) radial - it radiate outward in all directions
,from a central point.
b) linear - it goes only in one direction in a l
ine.
e.g
background: linear-gradient (bottom,rgba(0,0,0,1
), rgba(0,0,0,.4));
Now, here you are using " linear-gradient " property, "
bottom " word signifies that
the gradient effect starts from bottom of the HTML
element that contains it.
NOw, first rgba(0,0,0,1) states that when it starts
at bottom, it is black with 100% opacity,
and second rgba(0,0,0,.4) states that when it ends
at top, it is black with 40% opacity.
Note: here your gradient is black and only opacity chang
es but you can define colours to it,
like starting with rgba(255,255,0,1) which is yell
ow and ends with rgba(255,0,0,1) which
is red then you will get orange in the middle auto
matically.
Imp Note: gradients are so cutting edge tech. that you c
annot use them directly.
you have to use some special codes which are s
pecific to the browsers.
e.g
for safari,chrome and opera ---> backgr
ound:-webkit-linear-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.4));
for firefox ---> background:-moz-linear
-gradient(bottom,rgba(0,0,0,1), rgba(0,0,0,.4));
for internet explorer ---> IE doesn't su
pport gradients.
There must not be any gap or spaces between the
special word like " -webkit- " and linear-gradient statement as shown in example
.
fancy fonts: Now instead of using default fonts ,you can use other fo
nts for your website/
Search new fonts from here: " google.com/fonts "
then use the code given in #3 and paste it in your <hea
d> tag above <style> tag
then use the code given in #4 and add it to the tag to
which you want to give another font.
e.g
for the font : 'Londrina Shadow'
#3 code is : <link href='https://fonts.googleapi
s.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
#4 code is : font-family: 'Londrina Shadow', cur
sive;
Note: if the font is still not appearing the way it is s
upposed to, then try to change "http" to "https" in the link that you defined in
side <head> tag.
--------------------------------------Increasing adaptability of website for dif
ferent screen sizes and introducing interactive javascripts---------------------
------------------
Using "background-size:cover" instead of "background-size: 100" or using "div" t
ags or defining images not from <img> tag
but defining it through cascading are some of the best pratices for mobile sites
.
because if you define a specific size to the images then when it has to be displ
ayed on smaller screens
then they got stacked poorly on each other in order to maintain their size ratio
.
Note: Always insert the " Media-Queries " at the end of stylesheets because brow
sers read CSS from top to bottom.When you give a command that conflicts
with something you told it previously,it forgets the old style and runs wi
th the new ones.
<!DOCTYPE html>
<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='styles
heet' type='text/css'>
<style>
body {
font-family: helvetica, sans-serif;
margin: 0 auto;
max-width: 600px;
background: #232323;
}
div {
height: 200px;
background-size: cover;
position: relative;
margin: 40px 0 0 0;
border-radius: 12px;
}
h1 {
font-family: 'Londrina Shadow', cursive;
text-align: center;
font-size: 75px;
color: #aaaaaa;
margin: 60px 0 0 0;
}
h2 {
text-align: center;
color: #bbbbbb;
margin: 0px 0 70px 0;
}
small{
opacity:0;
}
p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 30px;
text-align: justify;
position: absolute;
bottom: 0;
margin: 0;
height:30px;
transition: height .5s;
-webkit-transition:height .5s;
-moz-transition: height .5s;
}
.first{
background-image: url("http://dash.ga.co/assets/firstcourse.jpg");
}
.second{
background-image: url("http://dash.ga.co/assets/secondcourse.jpg");
}
.dessert{
background-image: url("http://dash.ga.co/assets/dessertcourse.jpg");
}
.price {
float: right;
}
.show-description p{
height:150px;
}
.show-description small{
opacity:1;
}
@media (max-width:500px){
h1 {
font-size:50px;
margin-top: 20px;
line-height:40px;
}
h2 {
font-size:20px;
margin:20px 0 30px 0;
}
div{
margin: 20px 12px 0 12px;
}
p{
font-size: 20px;
line-height: 24px;
}
small{
font-size: 16px;
}
}
</style>
</head>
<body>
<h1>esha's restaurant</h1>
<h2>a New York City eatery</h2>
<div class="first show-description">
<p>welsh onion soko <span class="price">$14</span><br />
<small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorre
l amaranth garlic tigernut spring onion summer purslane asparagus lentil. </smal
l></p>
</div>
<div class="second show-description">
<p>pastrami boudin tongue <span class="price">$22</span><br />
<small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drums
tick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork
loin prosciutto bresaola.</small></p>
</div>

<div class="dessert show-description">
<p>fruitcake marzipan pudding dragee <span class="price">$8</span><br />
<small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly
-o bear claw ice cream candy canes.</small></p>
</div>
<script>
$('div').on('click',function() {
$(this).toggleClass('show-description');
});
</script>
</body>
opacity property --> It is used to directly set the text opacity.
e.g
small{
opacity:0;
}
Explanation ::::
.show-description p{
text-height:150px;
}
Here, p tag will have a height of 150px when it is inside class called " show-d
escription "
.show-description small{
opacity:1;
}
Here, small tag will have opacity to 1 when it is inside class called " show-de
scription "
Note: 1.) If we have to apply different styling to the content according
to different classes then we write
e.g
.dessert{
background-image: url("http://dash.ga.
co/assets/dessertcourse.jpg");
}
here " dessert " is the name of class and inside it, is what we
have to perform on the content inside that class.
2.) If we have to apply different styling to a tag according to di
ff. classes then we write
e.g
.show-description p{
text-height:150px;
}
here " show-description " is the name of class and " p " is the
name of tag and inside it, is what we have to perform on the content inside that
class.
3.) When we have to define 2 classes of 1 tag ,then write like thi
s
e.g
<div class="first show-description">
Here, there are 2 classes of div tag.
1.) first
2.) show-description
Jquery --> Jquery is a javascript library, its basically a collection of shortcu
ts that reduce the amount of code you have to write out.
Explanation:::
<script>
$('div').on('click',function() {
$(this).toggleClass('show-description'
);
});
</script>
Here, " div " is the name of tag on which jquery is performed.
Now, in second line " this " refers to the " div " tag but not just any
old div tag
it refers to the div tag that the function was called on which mea
ns only the div that was most recently clicked.
Now, toggleClass is a jquery shortcut, it adds or removes a specific cla
ss from a specific HTML element, depending on whether or not that class is prese
nt.
toggleClass already knows that whatever follows it will be a class,
so don't need the period at the start of the name.
transition property --> It is also a very new attribute , so not all browsers ca
n execute it.
It lets you to define the timing after which the effect
/event occurs,in order to give a smooth flow to the appearance/visuals.
e.g
transition: height .5s;
-webkit-transition:height .5s;
-moz-transition: height .5s;
--------------------------------------Shapes and flows--------------------------
-------------
Previously we used <div> tag as a container for either text or images or both.
But by default <div> tags are invisible rectangles, in order to make an empty <d
iv> visible you need (1) a width (2) a height (3) either a background or a borde
r colour.
margin: top right bottom left
padding: top right bottom left
border-radius: topleft topright bottomright bottomleft
<!DOCTYPE html>
<head>
<style>
div{
height: 150px;
width: 300px;
background: #cc5;
}
.foot{
height: 40px;
width: 40px;
background: #ccc;
border-radius: 40px;
border:15px solid #999;
}
</style>
</head>
<body>
<div class="brain"></div>
<div class="torso"></div>
<div class="foot"></div>
</body>
Note: If you want to define the same value for all corners in " border-radius "
then you can provide only a single value as you have done while using margin/pad
ding.
e.g
border-radius: 100px;
this will give you a circle.
Now just as <div> tag , in order to make border property visible you need to def
ine its 3 attributes (1)width (2)style (3)color .
border styles can be solid,dashed,dotted or double.
e.g
border: width style color;
border:15px solid #999;

You might also like