I want to define global variables in one css file and use the variables in other css files.
Is this possible?
Global.css:
:root {
--main-color: #192100;
--main-background: #89b66b;
}
html, body {
min-height: 100%;
width: 100%;
font-family: Arial;
color: var(--main-color);
}
SomeFile.css:
.some-rule {
display: table;
border-radius: 12px;
border: 4px solid var(--main-color);
padding-left: 10px;
padding-right: 10px;
color: var(--main-color);
}
Html: (Global.css if referenced before SomeFile.css)
<link href="Global.css" rel="stylesheet" type="text/css" />
<link href="SomeFile.css" rel="stylesheet" type="text/css" />
You can't do that with CSS. Try A CSS Preprocessor like Less or Sass.
less.css sharing variables across files
SASS - use variables across multiple files
CSS itself doesn't use variables. However, you can use another language like SASS or LESS
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.
for my project I use some external css from devextreme. Now, I would like to override some rules. For this I inspected the external css and found the class to override. I use the css files like this:
<link href="~/css/devextreme/dx.greenmist.css" rel="stylesheet" />
<link href="~/css/customized.css" rel="stylesheet" />
In the customized.css I change a property:
.dx-treeview-toggle-item-visibility {
font: 14px/1 DXIcons;
font-size: 22px;
text-align: center;
line-height: 22px;
color: #333;
width: 21px;
height: 32px;
top: 0;
right: 0px; /*new property instead of left: -4px*/
}
If I run the app, I see, that the topmost rule is this customized rule, but there is the original rule too and my customized rule isn't applied (see the picture):
Why is my custom css rule not applied?
left and right are two different properties. Try to add:
left: auto;
to your custom style.
My project structure:
hello.jsp:
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link href="<c:url value="/resources/myStyle.css" />" rel="stylesheet">
</head>
<body>
<h1>Text</h1>
<p>Text.</p>
</body>
</html>
myStyle.css:
body {
font-family: Arial, Verdana, sans-serif;
font-size: 11pt;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #a52a2a;
font-size: 24pt;
font-family: Georgia, Times, serif;
font-weight: normal;
}
p {
text-align: justify;
margin-left: 60px;
margin-right: 10px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
padding-left: 10px;
padding-bottom: 10px;
}
Could someone please explain me why css doesn't work?
I use Intellij IDEA as IDE and Tomcat.
This works though:
<style>
<%#include file="/resources/myStyle.css" %>
</style>
Simply try with any one. All these are relative path with respect to webapp folder.
<link rel="stylesheet" type="text/css" href="/resources/myStyle.css" >
OR
<link rel="stylesheet" type="text/css"
href="<%=application.getContextPath() %>/resources/myStyle.css" >
OR
<jsp:directive.include file="/resources/myStyle.css" />
JSP - The include Directive
The filename in the include directive is actually a relative URL. If you just specify a filename with no associated path, the JSP compiler assumes that the file is in the same directory as your JSP.
The include directive is used to includes a file during the translation phase. This directive tells the container to merge the content of other external files with the current JSP during the translation phase. You may code include directives anywhere in your JSP page.
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