I am beginning to make my first website and I so far have a menu and all but the problem is I don't know how to use an external css for formatting....
What I mean by that is, I DO KNOW in an external css if I put body { background-color: yellow} and use <link rel="stylesheet" type="text/css" href="style1.css" /> it will apply yellow to background color of my website.
What I can't figure out is how can I use a css file to apply the menu and fonts to all of the web pages I make....I don't want to post this same css code in every web page as the tutorial I am following says it is good programming to just import a css file into all the web pages you want to apply the format to instead of pasting that css code into each and every one....
Here is my code, basically what I want to know is how can I put the css part of the code into a css file so I can call it for all my web pages instead of putting it into my code directly, beware the css changes according to what browser you are using for blur etc.
In short: What will my CSS file look like and what will my htm file look like for code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
<style type="text/css">
body {
background: #1a1a1a url(bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 2px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 2px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 2px solid #212121;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur li {
float: left;
position: relative;
}
#blur a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: transparent;
text-shadow: 0 0 2px #cacaca;
z-index: 100;
}
/* normal styles */
#blur a:hover, #blur a:focus {
color: #ffffca;
text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
</style>
<!--[if IE]>
<style type="text/css">
#blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
}
#blur ul li a {
color: #ffffca;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur()";
filter: progid:DXImageTransform.Microsoft.Blur();
}
#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
position: relative;
margin: 2px 0 -10px 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
#blur ul a:hover, #blur ul .active a {
position: relative;
margin: 2px 4px 0 10px;
filter: progid:DXImageTransform.Microsoft.Blur(enabled = false);
}
</style>
<![endif]-->
</head>
<body>
<div id="blur">
<ul>
<li>
Home
</li>
<li>
How-to
</li>
<li class="active">
Edit
</li>
<li>
Features
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
</body>
</html>
Place your style sheet within your header, e.g.
<head>
<title>My Awesome Site</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
...with the href referencing the location of your style sheet. Then you may apply the style sheet rules the same as if you had an internal stylesheet.
When you create your external style sheet, just remember, don't include <style> tags inside of the document itself.
Move your CSS to a new file, say, "style.css" and import the stylesheet in your webpages. To do this, add the following tag to the HEAD section of your HTML:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
For more details, I recommend you go through this page.
http://www.tizag.com/cssT/external.php. Will tell you how.
<link rel="stylesheet" type="text/css" href="theme.css" />
Is what you want. I suggest reading over http://www.w3schools.com/css/default.asp for basics.
A simple way is
<link rel="stylesheet" href="/css/master.css" type="text/css" media=">
This needs to be placed in the head section of you page.
The href references the path to the file.
You can also use the #import method.
<style type="text/css">
#import url("/css/master.css");
</style>
Put your inline styles in a document and name it with the extension .css. Then reference it between your tags with the following line.
<link rel="stylesheet" href="path/to/file.css" type="text/css" />
The href can be both relative (../images/file.css) or absolute (/images/file.css).
If you need to access different media, you can put in a media tag (like media="screen") or media="print" for stylesheet only to be used when printing a page.
As the html5 evolved you can declare ur document type <!doctype> and utilise the external css
by placing all the css in a file named style.css and then u can acess it with
<link rel="stylesheet" href="path/to/file.css"/>
and embed ur css into your website
NOTE:In html5 type is optional
Related
Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't become straight line
My Html code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
My Css code
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thanks for any help!
Also, I'm open to any advice on making this code more smooth.
First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
display: flex;
}
.kk-nav li a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
please replace the hyphen(-) sign with underscore sign(_) then your CSS with work.
The corrected code is here
.kk_nav{ /* using underscore */
overflow: hidden;
background-color: #191970;
}
.kk_nav a{ /* using underscore */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
and if you want to make nav text in the center use li in CSS not a
like
.kk_nav li{ /* using li not a */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."
<link rel="stylesheet" href="../css/index.css">
You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:
.kk_nav li {}
I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}
I hope this helps.
This is the updated HTML code I used on my machine
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
This is the code for my HTML page and I'm trying to create a photography site. I was planning to create a website in which when a person hovers over a button on the menu section the background will show the image related to that section, for eg. I've tried for animal button here. But the HTML page is not responsive.
I want the image to be displayed on the whole webpage in the background.
I'm a beginner in Javascript Html and CSS.
Kindly help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script type="text/javascript">
//
function animals()
{
$('#animals').hover(function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/05-wildlife-awards-audun-rikardsen---wildlife-photographer-of-the-year.jpg');
}, function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/11-wildlife-awards-max-waugh---wildlife-photographer-of-the-year.jpg');
});
}
//
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
</style>
Do you mean like this? When using jQuery, make sure you import the cdn or library to your html, and put all of your jQuery code within a document ready code like so:
$(document).ready(function(){ YOUR CODE HERE });
Another error in your code is that you shouldn't be using the "src" attribute with your jQuery. Remember that "this" is referring to "#animals", which is a link not an image. If you want to change the background image, you would want to change the css property "background-image" instead.
The image urls you were using weren't working so I used some stock images so you can see the code working. Make sure that your urls lead to an image, not a site. Your urls look like they are leading to a site.
In your CSS I also added
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
to all of your links (#animals, #travel and #food). The background-size property determines how your image covers its container. Using "cover" makes it so the image always fills the width of its container, and any excess height is not seen. Background-position determines what part of the image is displayed. By default, it would be the top left. I changed it to center so you can see the focus of the images. The "transition" property is completely optional, it makes it so that the images transition on hover within 0.3s. It just serves to make the background change smoother and not suddenly jump between images.
I don't know if you wanted the image when you are not hovering to show so I specifically declared the initial background image url in the '#animals' css as well. If you don't want it to show an image until after a user hovers, you can remove this line from the CSS. Otherwise, if you want it to show an initial image make sure you declare the background-image for each link separately.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script>
$(document).ready(function(){
$('#animals').hover(
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)');
},
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80)');
}
)
})
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
#animals, #travel, #food {
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
}
#animals {
background-image:url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80);
}
</style>
There are several issues with your code :
you declare a function but you never call it
you are using jQuery but I can't see any jquery import
your function is targetting your link and not a section
I suggest you use vanilla javascript and event delegation :
let page = document.querySelector('.page');
let menu = document.querySelector('.menu');
const changeBg = (event) => {
let target = event.target.closest('a');
if (target && target.dataset.image) {
page.style.backgroundImage = `url(${target.dataset.image})`;
}
}
menu.addEventListener('mouseover', event => changeBg(event));
menu.removeEventListener('mouseover', event => changeBg(event));
html,
body,
.container {
height: 100%;
width: 100%;
}
.menu {
position: fixed;
left: 0;
right: 0;
top: 0;
}
.menu ul {
display: flex;
justify-content: space-between;
}
.page {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div class="container">
<nav class="menu">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="page" style="background-image: url('')">
PAGE
</section>
</div>
I am trying to make my text -movies , tv shows , games responsive . what should I do? I tried media query but I think I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Papaya | Home</title>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style type="text/css">
.bg {
width: 100%;
height: 110%;
position: absolute;
top: 0;
left: 0;
z-index: -4000;
}
body{
font-family: 'Luckiest Guy', cursive;}
a:hover {color: red;}
a { text-decoration: none; color:white; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
#one {
position: fixed;
top:180px;
left:200px;
}
#two {
position: fixed;
top:180px;
left:570px;
}
#three {
position: fixed;
top:180px;
left:900px;
}
h1{font-size:70px}
}
</style>
</head>
<body >
<div id="one">
<h1>MOVIES</h1></div>
<div id="two">
<h1>GAMES</h1></div>
<div id="three">
<h1>TV SHOWS</h1></div>
<div align="center"><img src="images/ball.jpg" class="bg" alt="LOADING.."></div>
</body>
</html>
First of all, write HTML and CSS n separate files. It's considered best practice in web development ;) Then, the best way to add responsiveness to a website is to have Bootstrap installed.
Copy and past this to the head of your html document:
This is a CDN (Content Delivery System) link. It will pull the bootstrap features from their website and allow you to add responsiveness to your site.
Here is the Bootstrap documentation link:
http://getbootstrap.com/getting-started/
My answer might seem a little long and complicated, but it's not. This is how professionals and companies make modern, responsive websites today! Hope this helps.
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.