I am trying to make the header equal width its meant to be like the graphic below but its not turning out like that.
It should look like the following This is just for my own learning from a random psd on the web. Also would my code be acurate is it right to use px should I be using percentages also I should be using bootstrap more with the likes of a header.
This is what is looks like with the code below
css used style.css
.header-text
{
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
width: 220px;
margin-left:40px;
margin-top:54;
text-align: center;
float:left;
}
.header
{
height:240px;
}
div>div.header-logo
{
background-image: url("logo.png");
width: 240x;
height: 270px;
background-repeat: no-repeat;
margin-left: 600px;
margin-top: 30px;
}
div>div.expert-reviews
{
float:left;
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
body > div > div:nth-child(3)
{
float:right;
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
html
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
<div class"expert-reviews"> Expert Consumer Reviews and Ratings</div>
</body>
</html>
Related
Hello Stack Overflow Community,
I would like to ask for help regarding my concern on CSS not showing in my HTML Display. I am still new to the Programming World. Please bear with me. I am doing a tutorial course in HTML YouTube by PinoyFreeCoder.
Here is the HTML that I made:
<title>PinoyFreeCoder Blog</title>
<style type="text/css">
body{background-color: #F5F5F5; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<link rel="icon" href="Images/John Canero Logo.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="Style.css">**
</head>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
Here is the Style.css that I made:
*{
font-family: Arial, Helvetica, sans-serif;
}
#main-header{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
Thank you!
Here if you are applying styling in HTML page itself. Then, whatever CSS you want to give to your webpage you can mention it betweeen <style></style> tag.
<title>PinoyFreeCoder Blog</title>
<style>
body{background-color: red; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
</body>
And if you are using external CSS then you have to attach the <link rel="stylesheet" href="styles.css"> between your <head></head> tag. Then only all the CSS written in your external stylesheet will be applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<h2>I am formatted with a linked style sheet.</h2>
<p>Me too!</p>
</body>
</html>
styles.css
body{
background-color: red;
}
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">
For whatever reason, my the HTML and CSS for my page will not link. CSS is in the same directory. I have ran the page through a validator and no issues have come up, so there is no reason this shouldn't work? I'm not stupid, never had this problem before either, so I'm quite confused. It just has no effect.
https://jsfiddle.net/4ocpjL1v/
maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
You have to use # for IDs (or . for classes) before the name.
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
this will work for sure....u have put font after css, it should be before css.
See Live https://jsfiddle.net/subodh_saraswat/4ocpjL1v/1/
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.