BOX Model

 /* BOX MODEL */

/* height and width */
div {
  height: 200px;
  width: 300px;
}

/*BORDER */
div {
  border-width: 10px;
  border-style: solid;
  border-color: black;
}
h1 {
  border-width: 15px;
  border-style: solid;
  border-color: blue;
}
button {
  border: 3px solid violet;
}
p{
  border:5px dotted black;
}
h2{
  border:7px double blue;
}

/* BORDER SIDES */
div {
  /* BORDER LEFT */
  border-left-color: tan;
  border-left-style: dotted;
  border-left-width: 10px;

  /* BORDER RIGHT */
  border-right-color: lightcoral;
  border-right-width: 5px;
  border-right-style: double;

  /* BORDER TOP */
  border-top-color: orange;
  border-top-width: 7px;
  border-top-style: dashed;

  /* BORDER BOTTTOM */
  border-bottom-color: lightseagreen;
  border-bottom-width: 11px;
  border-bottom-style: solid;
}

/* BORDER RADIUS */
div {
  border-radius: 15px;
}
h1 {
  border-top-left-radius: 10px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 10px;
}

/* PADDING */
div{
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 15px;
  padding-right: 21px;
}
/* padding shorthands */
button{
  padding: 30px;
}
p{
  padding:20px 21px;
}
h1{
  padding:12px 22px 20px
}
h2{
  padding:10px 11px 12px 13px;
}

/* MARGING */
div{
  margin-left: 1px;
  margin-right: 2px;
  margin-top: 3px;
  margin-bottom: 4px;
}
/* margin shorthand */
button{
  margin: 5px;
}
p{
  margin: 3px 5px;
}
h1{
  margin: 3px 4px 5px;
}
h2{
  margin: 1px 2px 3px 4px;
}

Comments

Post a Comment

Popular posts from this blog

Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Assignment </ title > </ head > < body > < div class = "container" >     < form >         < h2 class = "text-center" > Pricing </ h2 >         < p class = "text-center" > please checkout our most effective payment models </ p >         < div class = "row text-center justify-content-evenly" >             < div class = "card col-sm-5 col-md-3 mb-3" >                     < div class = "card-he...
Read more

OverFlow

Image
HTML <! DOCTYPE html > < html lang = "en" >   < head >     < link rel = "stylesheet" href = "style.css" >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > ovewrflow </ title >   </ head >   < body >     < div class = "visible" >       Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod velit       quisquam minima. Odio similique repellendus corporis accusamus dolorum       iusto quasi ullam libero quisquam voluptatem. Dolorem suscipit libero       ratione voluptas perferendis! Ipsa officia aliquid cum dignissimos nobis       fugiat nisi odio deleniti amet explicabo quidem, accusantium porro       voluptatibus sequi debitis nulla temporibus possimus! Adipisci similique ...
Read more

FRONT-END PROJECT SPOTIFY CLONE

 HTML <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < link       rel = "stylesheet"       href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"       integrity = "sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="       crossorigin = "anonymous"       referrerpolicy = "no-referrer"     />     < link rel = "icon" href = "./assets/logo.png" />     < title > Spotify - Web Player: Music for everyone </ title >     < link rel = "stylesheet" href = "style.css" />     < link rel = "preconnect" href = "https://fonts.googleapis.com" />     < link ...
Read more