Style your page

Below you can see my initial style draft. This just makes the page look like an actual web page. So that we can continue writing some code for it. We are going to add additional style elements to this file as the site progresses.

You might want to take an extra look at how I managed the body-element outside and inside of the media-query. This is to make sure that the site responds well to different screen sizes. We will add some more of these media-queries as we go along and find things that behave bad when the screen gets to small.

Otherwise the rest is kind of basic css. But I encourage you to play around with it. Change some values and see what happens.

/* This is a css reset that make sure that all browsers use the same styling to begin with */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
/* end of css reset */

body {
  max-width: 900px;
  width: 100%;
  background: #ffe;
  font-family: Verdana, Geneva, sans-serif;
}
/* Making sure that the layout is centerd in the page on larger screens */
@media screen and (min-width:900px) {
  body {
    position: absolute;
    left: 50%;
    margin-left: -450px;
  }
}
a {
  color: #962;
  text-decoration: none;
}
a:visited {
  color: #a73;
}
#top, #menu, #content, #footer {
  border: 0px dotted #cff;
  width: 100%;
}
#top {
  height: 100px;
}
#name {
  font-size: 3em;
  margin-top: 10px;
  margin-left: 20px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#slogan {
  font-size: 1.1em;
  color: #999;
  margin-left: 20px;
  padding-left: 16px;
  font-family: "Lucida Console", Monaco, monospace;
}
#menu>div {
  background: #962;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 20px;
  padding-right: 20px;
}
#menu a {
  color: #fff;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase;
}
#menu a:visited {}
#menu a:hover {
  background: #a73;
}
#content {
  /*padding: 20px;*/
  margin-top: 10px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #ccc;
}
#footer>div {
  background: #ddd;
  padding: 20px;
  font-size: 0.8em;
}

2015-09-17 08:19:00 - Framework, CSS

Follow using RSS