I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.
So I have :
global.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
p {
text-align:justify;
margin:0px;
margin-bottom:10px;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
color:#993300;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline overline;
}
news.css
div.news{
width: 100%;
}
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #848484;
margin:0px;
margin-bottom:20px;
text-align: center;
position: relative;
top: -10px;
text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
color: #848484;
}
.news p.reminder a:hover {
}
HTML file
<HTML>
<HEAD>
<TITLE>the title</TITLE>
<LINK href="global.css" rel="stylesheet" type="text/css">
<LINK href="news.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="news">
<P class="reminder">
some text
</P>
</DIV>
</BODY>
</HTML>
For a reason I don't see, the part :
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.
How may I do to make this work ?
The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.
You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *
Related
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
I am new to HTML and CSS. I'm wanting to add an image to the background of my page but I do not know how to do that.
I am wanting to keep the CSS internal to the page, so that this background image is specified by the CSS in the <head> of my page:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can set an image for the background of your page via the background-image CSS property. Here, a background image is specified via a URL and applied to the body element of the document:
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
Here is a complete example with your existing HTML:
<!DOCTYPE html>
<html>
<head>
<h2>How to write 'Text' in 6 of coding languages </h2>
</head>
<style>
body {
background-color: rgb(60, 60, 60);
/* Add this */
background-image: url(https://www.vemco.com/wp-content/uploads/2012/09/image-banner2.jpg);
}
h2 {
color: white;
font-family: arial;
font-size: 200%;
}
h4 {
color: white;
font-family: arial;
font-size: 165%;
}
h6 {
color: white;
font-family: arial;
font-size: 125%;
}
p {
color: white;
font-family: arial;
font-size: 100%;
}
</style>
<body>
</body>
</html>
You can use background attribute ,
<body background="bgimage.jpg">
Using CSS,
body
{
background-image: url("bgimage.jpg");
}
You can also use background shorthand property as well which allows you to set different background properties which includes background-image as well,
body {
background: lightblue url("bgimage.jpg") no-repeat fixed center;
}
Ok someone help me with creating my first website. The problem is that the stylesheet only applies partly.
My body
<div class="top1">
<h1 align="left" class="1logo">La Di Da DI</h1>
<h1 align="left" class="2logo">we likes to party</h1></div>
</body>
My stylesheet
html, body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle{
display: inline;
}
.2logo {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.1logo {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
Stylesheet link
<link href="main.css" content"text/css" rel="stylesheet">
Using a number at the starting of the class is not a good practice because it takes a different approach to apply css to that kind of class...
Try to remove the numbers from the starting and put it at end like:
HTML
<div class="top1">
<h1 align="left" class="logo1">La Di Da DI</h1>
<h1 align="left" class="logo2">we likes to party</h1>
</div>
CSS
html,
body {
margin: 0px;
padding: 0px;
outline-offset: 0px;
background-color: #FFEAE5;
}
.mainTitle {
display: inline;
}
.logo2 {
display: inline;
color: #FFEAE5;
font-size: 18px;
font-style: italic;
}
.logo1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
color: #FFEAE5;
}
.top1 {
padding: 5px;
padding-top: 3px;
padding-left: 25px;
background-color: #F87666;
}
If you are looking for a solution that how to apply css to class that starts from a number see this answer
I have a h1 in my header and in another section of the document. I'm told this effects SEO but I digress, i'm just learning by copying other peoples pages and attempting to style them as they did without looking at their code.
So my h1 styles fine but when i target h1 inside a section class the style doesn't apply.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
font-family: inherit;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
My guess is that the class.h1 rule is overriding the h1 rule. If this is the case, how can I apply my top border to my h1, while still inheriting the h1 properties.
Apologies if I am murdering any CSS nomenclature.
The inherit keyword specifies that a property should inherit its value from its parent element. So the parent is section, and there is no rules for font on section. Remove the inherit.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
There doesn't seem to be much wrong with your code. Indeed if you declare global h1 properties they will be used for all h1's on your site.
If you create specific rules then those will apply to any h1 which meets that rule but the other properties will be inherited (if they are different).
I updated the fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/
Example:
h1 {
/* global porperties */
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.photography h1 {
border-top: 3px double #232323; /* new property */
padding-top: 10px;
font-size: 2em; /* overwrite existing property */
}
Use !important on the rules that you want to use to override whatever rules the <section> applies to your <h1>.
For instance, if you want to apply the fonts on your original h1 to the one inside the section:
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
Demo: http://jsfiddle.net/gcj6xLL0/