-1

I'm just starting out a new website and for some reason it seems as if my css is not being applied to my elements that do not begin with '#' or '.'; This is probably just a simple mistake that I'm making, but nothing I do seems to be working.

Here's my CSS:

 body {
background: #fff;
font-family: 'Muli', sans-serif;
color: #303030;
font-size: 180px;
}

h1 {
font-family: 'Playfair Display', serif;
font-weight: lighter;
font-size: 24px;
font-style: oblique;
color: #333;
text-align: left;
}

h2{
font-family: 'Playfair Display', serif;
font-weight: lighter;
letter-spacing: 1.5px;
font-size: 22px;
font-style: oblique;
text-transform: lowercase;
}

h3{
letter-spacing: -1px;
font-size: 20px;
font-weight: normal;
padding-left: 50px;
}

#container {
margin: 0px auto;
padding: 0px;
height: auto;
width: 1100px;
background-color: #fff;
}

#header {
background-color: #fff;
background-image: url();
margin-top: 10px;
margin-bottom:10px;
}

/*nav structure*/

#navbar {
font-family: 'Muli', sans-serif;
font-size: 16px;
height: 45px;
padding-top: 1px;
padding-left: 40px;
margin-top: 400px;
width: 100%;
text-transform: uppercase;
text-decoration: none;
background: none;
}


#navbar li {
list-style: none;
width: 15%;
float: left;
margin: 5px;
border: 1.5px solid #303030;
}

#navbar li a {
display: block;
color: #303030;
letter-spacing: 2px;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
text-decoration: none;
padding-top:10px;
padding-bottom:10px;
  }

#navbar li a:hover {
color: #90dccd;
}


#footer {
background-color: #303030;
height: auto;
width: 100%;
margin-top:40px;
padding: 20px;
color: #e7e4cf;
}

#footerleft {
width: 250px;
height: auto;
}

#content {
height: auto;
width: 610px;
padding: 3px;
background:#fff;
margin-left: 180px;
text-align: justify;
}

#sidebar {
height: auto;
width: 250px;
margin-right: 10px;
background: #fff;
padding:3px;
float: right;
}

#about {
background-image:url('about.jpg');
background-color:#000;
height: 50px;
}

#social {
background-image:url('social.jpg');
background-color:#000;
height: 50px;
}

.sidepadding {
padding-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
font-size: 11.5px;
text-align: justify;
}

.footer_links {
margin: 15px;
text-align: center;
}

.copyright {
color: #a3a1a0;
font-size: 13px;

}

#footer a {
color: #979594;
font-size: 16px;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
text-decoration: none;
}

#footer a:hover {
color: #1c1f21;
}

.postpadding {
padding-bottom: 2px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Muli" rel="stylesheet" type="text/css" >

<title>My Website</title>
</head>

<body>

<div id="navbar" align="center">
    <ul>
        <li><a href="">home</a></li>
        <li><a href="">about</a></li>
        <li><a href="">portfolio</a></li>
        <li><a href="">vision</a></li>
        <li><a href="">contact</a></li>
        <li><a href="">archive</a></li>
    </ul>
</div>

<div id="container">
    <div id="sidebar">
         <h2>about</h2>
    <div class="sidepadding">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore                 magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
            nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
            qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
         <h2>social</h2>
    </div>

 <div id="content">
    <h1>Post Title</h1>
        <div class="sidepadding">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
        praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
        option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est
        usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt
        saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam 
        littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima
        et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
        praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
        option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est
        usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt
        saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam 
        littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima
        et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
        praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
        option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est
        usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt
        saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam 
        littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima
        et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
 </div>
</div>


 </div>
</body>
</html>
Lemon Kazi
  • 3,308
  • 2
  • 37
  • 67
Taylor
  • 11
  • 1
  • 3
    Why does your `reset.css` come _after_ your `style.css`? – Sebastian Simon Sep 03 '15 at 03:26
  • Always look for tutorials or working examples before posting such elementary questions - as its almost always a typo or something you could solve yourself by so simple research that you likely always get downvoted – Daniel Brose Sep 03 '15 at 03:55

3 Answers3

1

Put you style.css at the bottom so that no other css sheet overwrite it and check the href is ok.

<link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Muli" rel="stylesheet" type="text/css" >

Sadman Hasan
  • 140
  • 7
  • 18
  • Thank you for catching my silly mistake. I did that, and it did help with my web font being applied, unfortunately when I make changes to font size under my body tag it isn't being applied, still. – Taylor Sep 03 '15 at 03:38
  • That's because you are specifying `font-size` for other tags separately.So they are overriding the style of `body`. Because in CSS, the last rule you apply will override all of the previous styles. – Sadman Hasan Sep 03 '15 at 13:19
0

Switch the order of these two lines: <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="reset.css" />

The reset is setting values for basic html elements and it's overriding your declarations because that's how cascading works. The elements with id's and classes are not effected because they are not described in the reset css.

Community
  • 1
  • 1
jmargolisvt
  • 5,722
  • 4
  • 29
  • 46
0

CSS rules are applied in the order that they are included within your html page. What is happening with your site is that your rules are being applied, and then immediately being overwritten by the rules in 'reset.css'

You just need to change the order and everything should work.

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
Deftwun
  • 1,162
  • 12
  • 22