Answered
HTML Classs Attribute Issues
Hi Guys,
I'm having some issues using the class attibute. As I understand it Class is used when you want to apply the same characteristics to multiple areas of your web page. With that in mind I noticed that there were seceral areas in my page where I was applying the same gradient fill pattern over and over. All of these DIVs had IDs but no class. I decided to add a class to DIV elements in my HTML called gradient and then add the CSS for the gradient into a declaration for the class. It isn't working as I expected. The gradient only shows up in the logo DIV. The others still show their oeiginal background color. Not sure what I'm doing wrong. I'm starting to think that I'm just not cut out for web page development. Everytime I think I've figured something out it backfires. Here's my HTML.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Holy Grail</title>
<link rel="stylesheet" href="css/full.css">
</head>
<body>
<div id="headernavigation" class="gradient">
<div id="headerwrapper" class="gradient">
<header id="header" class="gradient">Header
<div id="logo" class="gradient">
Logo
</div>
</header>
</div>
<div id="navigationwrapper" class="gradient">
<nav id="navigation" class="gradient">
Navigation
</nav>
</div>
</div>
<div id="bodywrapper">
<aside id="leftaside">
Left Aside
</aside>
<article id="content">
Content
</article>
<aside id="rightaside">
Right Aside
</aside>
</div>
<div id="footerwrapper">
<div id="leftfooter">
Left Footer
</div>
<div id="centerfooter">
Center Footer
</div>
<div id="rightfooter">
Right Footer
</div>
</div>
</body>
</html>Here's the CSS file.
:root {
--black: #000000;
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #ffffff;
--gray: #6c757d;
--gray-dark: #343a40;
- --primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
}
#headernavigation {
border: var(--default-border-color);
background: var(--default-background-color);
}
#header {
background: var(--default-background-color);
}
#navigation {
background: var(--default-background-color);
}
#leftaside {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
#content {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
#rightaside {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
#leftfooter {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
#centerfooter {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
#rightfooter {
border: var(--default-border-color);
background: var(--default-background-color);
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
.gradient {
background: linear-gradient(var(--default-gradient-position), var(--default-gradient-start-color) var(--default-gradient-start-position), var(--default-gradient-end-color) var(--default-gradient-end-position));
}
body {
background: var(--default-page-background-color);
font-color: var(--default-font-color);
}
a {
background-color: transparent;
}
mark {
background-color: var(--default-background-color);
color: var(--default-font-color);
}
fieldset {
border: var(--default-border-color);
}
legend {
color: inherit;
}and here's the settings CSS file.
:root {
--default-page-background-color: #DDDDDD;
--default-page-background-padding: 20px;
--default-border-color: #666666;
--default-border-width: 1px;
--default-border-radius: 5px;
--default-border-style: solid;
--default-background-color: #FFFFFF;
--default-gradient-position: to top;
--default-gradient-start-color: #3E6EB6;
--default-gradient-start-position: 0%;
--default-gradient-end-color: #E0E8F5;
--default-gradient-end-position: 100%;
--default-font-family: Helvetica, Verdana, Arial , sans-serif;
--default-font-size: 2em;
--default-font-color: #666666;
}
AdChoices