I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
Related
I am looking for support editing stylesheet of my website
I have the below in the file main.css
.bg-danger, .bg-success {
padding: 0 5px;
}
a {
color: #EF1F2F;
text-decoration: none;
}
Then there is a header file header.php with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?=isset($title) ? $title : null;?></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
My requirement is to change the background, font etc.
I am not familiar with working on stylesheets. Requesting support from other members.. Thanks in advance
Into your main.css file you can start with adding some minimum properties like :
body {
background-color: #yourHexCodeColor;
font-family: "Helvetica", sans-serif;
}
Then learn the very basics of css right here => https://learn.shayhowe.com/html-css/getting-to-know-css/
Unfortunately, you can't edit CSS code coming from an external source.
So what you have to do is to overwrite the styles you need to be changed in another stylesheet. In your case, it would be the main.css file.
So if there is a style in the bootstrap file that looks like this:
body {
background-color: #fff;
}
You can make a copy of that style in your own file (main.css) and change the value. So in your file, you have this:
body {
background-color: #f7f7fe;
}
When I change the index.php file to index.html, it runs main.css file on local. But when I run it with php, it does not see main.css. Bootstrap sees the css files.
Note:The index.html code works when I run on local. There is no problem with the code.
Edit:The problem is not in PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
</body>
</html>
main.css:
.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
This is not really a PHP problem. This is happening because Bootstrap is overwriting your main CSS. In fact, using the main CSS, give your button an ID name and change it to the main cass. I think this will work
bootstrap default css btn-primary
<a href="" class="btn-primary class_name" ></a>
use css
.class_name.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
Please do not overwrite the bootstrap classes,instead use custom class say .btnDelete.
.btnDelete{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
And also remove asterisk btn-primary.Bootstrap uses snake case notation for naming classes.why don't you use camelCase notation in order to distinguish between user-defined classes and bootstrap classes.
It is actually not a PHP problem. It is happening because Bootstrap is overwriting your main CSS. To actually use main CSS give your button a id name then change it in main.css. I think that will work. ;-)
I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.
You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.
h1 {
font-family: Baloo;
}
h2 {
font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>
google fonts is now using css2 and the answers above are outdated.
the solution using css2 would be:
https://fonts.googleapis.com/css2?family=Baloo&family=Roboto
source: google fonts doc for css2
Go to https://fonts.google.com/
Search for say Roboto - https://fonts.google.com/specimen/Roboto
Hit "select this font" and you'll get a link to add to you html like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Note: You can also get one line with multiple fonts by piping the families.
Add this link(s) in your <head> tag
Use CSS to select the font with font-family.
See example below:
h1{
font-family: "Baloo"
}
p{
font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>
<body>
<h1>Baloo</h1>
<p>Roboto</p>
</body>
Use as many as you want and import them as a stylesheet.
https://fonts.google.com/
For your example:
h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>heading</h1>
<p>paragraph</p>
Let me illustrate. Consider this :
<!DOCTYPE html>
<html>
<head>
<title>A page</title>
<link rel="stylesheet" href="mystylesheet.css">
</head>
<body>
<div id="title_div">
<h2>This title has style</h2>
</div>
<div id="content_div">
<h2>This is not styled.</h2>
</div>
</body>
</html>
Let's say I want to style the first h2 in my CSS stylesheet.
Which way is better ?
1:
redtext{
color: red;
}
italictext{
font-style: italic;
}
And then add the following attribute to the first div : class="redtext italictext"
Or 2:
#title_div h2{
color: red;
font-style: italic;
}
Personal but I would go for (if you need a uniform H2 through the site)
h2
{
color: red;
font-style: italic;
}
but the for you may need to integrate the other option for more custom parts of the site if you would like different H2 styles through the site.
However have you coincided using SASS sounds like it may be the answer for you.
I would use example #2 or change your html to by removing the surrounding div tag. The surrounding div tag seems to only be there to have a class.
<h2 class="title">This title has a style</h2>
And your css to
.title{
color: red;
font-style: italic;
}
The content <h2> should probably be an <h3> not an <h2> to keep the document structure clean.
I am trying to add a google-font to my jinja2 template. I downloaded the google font and put it in the project directory, using this
<link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}">
i tried to use the font in the template but it is not working. What is the proper way of doing this? The CSS looks like this
body {
background-color: #ED9121;
font-family: 'Oswald';
font-weight: 700;
}
If I use the font directly from google instead of from my server, it works fine. Please help.
Try to use this in your CSS
#font-face {
font-family: Oswald;
src: url(/static/fonts/Oswald-Bold.ttf);
}
body {
font-family:Oswald;
}
remove href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}"
also make sure your font is inside the folder fonts.
I tried it and for me this is working.
We can change the font size by using the font tag and customizing the size
for example :
<html>
<head>
</head>
<body>
<p><font size="6">Font size is 6</font></p>
<p><font size="24">Font size is 24</font></p>
</body>
</html>