supersimion21
Reputation: 1
my Css class is not working with my html file
The class "cta" is not doing anything when i want to style it. Have i missed anything or made a typo?? can anybody help me please as it is driving me insane. sorry but this stupid thing is telling me to add more info some im just writing a load of rubbish now haha so just forget about this part but would really appericate some help
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF=8">
<meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0,
initial-width=1.0" />
<title>Welcome to Drunken Anticz</title>
<link rel="stylesheet" type="text/css" href="css/screen_style.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and
(max-width:500px)" href="css/scrren_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and
(max-width:750px)" href="css/scrren_layout_medium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
</head>
<body>
<div class="page">
<header>
<a class="logo" href="#"></a>
</header>
<article>
<h1>Welcome</h1>
<p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah
blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah
blah blah blahblah blah blah</p>
</article>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Events</a></h3>
<p>list of eventslist of eventslist of eventslist of eventslist of events
list of eventslist of eventslist of eventslist of eventslist of events</p>
<p><a class="cta" href="#">More info.</a></p>
</div>
</div>
</div>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Loyalty Cards</a></h3>
<p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards
info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p>
<p><a class="cta" href="#">More info.</a></p>
</div>
</div>
</div>
<nav>
<a href="#">Home</a>
<a href="#">Event's</a>
<a href="#">Book Us</a>
<a href="#">Loyalty Card</a>
<a href="#">Contact Us</a>
</nav>
</div>
</body>
@charset "UTF=8";
body {
color: #575c7a;
line-height: 1.5em;
font-family: arial;
font-size: 14px;
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px;
}
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #DDDDDF;
}
h1 {
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0;
}
h2 {
font-size: 1.7em; margin: 0 0 1em 0;
}
h3 {
font-size: 1.5em; margin: 0 0 1em 0;
}
p {
margin: 0 0 .75em 0;
}
a {
color: #7A7979;
}
a:hover {
color: #009eff;
}
footer {
font-size: .85em; color: #7A7979; background-color: url(../images/background-black-white.jpg; padding: 10px 10px 10px 0px;
}
a.cta {
font-size: 40px;
}
Upvotes: 0
Views: 67
Answers (2)
Nathaniel Flick
Reputation: 2963
If I call the .cta class it works, you simply need to remove the utf 8 reference and use the proper close tags for your body and html tags:
body {
color: #575c7a;
line-height: 1.5em;
font-family: arial;
font-size: 14px;
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px;
}
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #DDDDDF;
}
h1 {
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0;
}
h2 {
font-size: 1.7em; margin: 0 0 1em 0;
}
h3 {
font-size: 1.5em; margin: 0 0 1em 0;
}
p {
margin: 0 0 .75em 0;
}
a {
color: #7A7979;
}
.cta {
color: red;
}<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF=8">
<meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0,
initial-width=1.0" />
<title>Welcome to Drunken Anticz</title>
<link rel="stylesheet" type="text/css" href="css/screen_style.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and
(max-width:500px)" href="css/scrren_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and
(max-width:750px)" href="css/scrren_layout_medium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
</head>
<body>
<div class="page">
<header>
<a class="logo" href="#"></a>
</header>
<article>
<h1>Welcome</h1>
<p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah
blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah
blah blah blahblah blah blah</p>
</article>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Events</a></h3>
<p>list of eventslist of eventslist of eventslist of eventslist of events
list of eventslist of eventslist of eventslist of eventslist of events</p>
<p><a class="cta" href="#">More info.</a></p>
</div>
</div>
</div>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Loyalty Cards</a></h3>
<p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards
info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p>
<p><a class="cta" href="#">More info.</a></p>
</div>
</div>
</div>
</body>
</html>
<nav>
<a href="#">Home</a>
<a href="#">Event's</a>
<a href="#">Book Us</a>
<a href="#">Loyalty Card</a>
<a href="#">Contact Us</a>
</nav>
</div>
</body>Upvotes: 0
MiltoxBeyond
Reputation: 2731
Your problem resulted being fairly easy to solve. You left out the closing parentheses in the background style a little before your a.cta style which made the parser assume all of the styles after refer to a background url.
@charset "UTF-8";
body {
color: #575c7a;
line-height: 1.5em;
font-family: arial;
font-size: 14px;
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px;
}
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #DDDDDF;
}
h1 {
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0;
}
h2 {
font-size: 1.7em; margin: 0 0 1em 0;
}
h3 {
font-size: 1.5em; margin: 0 0 1em 0;
}
p {
margin: 0 0 .75em 0;
}
a {
color: #7A7979;
}
a:hover {
color: #009eff;
}
footer {
font-size: .85em;
color: #7A7979;
background/*-color -- Color doesn't take a url value*/: url(../images/background-black-white.jpg)
/* YOU FORGOT THE CLOSING PARENTHESES */;
padding: 10px 10px 10px 0px;
}
a.cta {
font-size: 40px;
}<div class="page">
<header>
<a class="logo" href="#"></a>
</header>
<article>
<h1>Welcome</h1>
<p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blah</p>
</article>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Events</a></h3>
<p>list of eventslist of eventslist of eventslist of eventslist of events list of eventslist of eventslist of eventslist of eventslist of events</p>
<p><a class="cta" href="#">More info.</a>
</p>
</div>
</div>
</div>
<div class="promo-container">
<div class="promo">
<div class="content">
<h3><a href="#">Loyalty Cards</a></h3>
<p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p>
<!-- begin snippet: js hide: false console: true babel: false -->Upvotes: 1
Related Questions
- Style not applying in class
- css class not working, in a css file, but in a style tag yes
- HTML Class not working?
- CSS doesn't seem to be working in my HTML file. How come?
- Why is my CSS code not working in my HTML file?
- CSS not working on HTML file
- class isn't picking up my CSS style
- Why is my CSS class not working
- CSS code doesn't work
- CSS Style Sheet is Not Working?