Thankyou for your precious time;
i'm a beginner in web development and as i was trying my hands on html and css
i found that the css styling isn't getting applied to the html and that the chrome
developer tools shows it to be empty (the file is present but the code that i've written in css file seems to be absent)
please help!
index.html file
<!DOCTYPE html>
<html>
<head>
<title>MY WEB PAGE </title>
<link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
<h1>THIS IS MY WEB PAGE </h1>
<p>
css applied to this part of the code isnt being shown in the developers
tools
</p>
</body>
</html>
style.css file
body{
background-color:black;;
}
h1{
color:white;
font-style: italic;
font-family: sans-serif;
}
p{
font-family: serif;
color:yellow;
font-style: oblique;
}
You may be missing an angle bracket on your first line or it could be a copy-paste error. It should be: <!DOCTYPE html>
Also look in the Network tab in Chrome toolbar to make sure that it's able to find your style.css and it contains the right CSS.
Depending on how it's being hosted, you may have to hit Ctrl-F5 to tell the browser to download everything fresh instead of caching.
Clear the browser cache. It happens sometimes.
https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
you have to save css and html file in a same folder as your writed
Related
I'm using a CMS and therefore can only amend the CSS file. I have the following code in that file:
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.h1_section_hero {
Font-family: 'Montserrat';
}
</style>
However it's not changing in the browser. I'm assuming that I don't have to download the font as i'm importing it within the file? thanks
It looks like your google font link is invalid, you are missing a ? between css2 and the family key:
'https://fonts.googleapis.com/css2?family=Montserrat&display=swap'
If you were to open both urls into your browser you will see that your original url is broken, and that the correct one above shows the fonts.
Create a separate link to the stylesheet rather than trying to import. The markup below is taken from the Google Fonts API doc and works just fine in my browser:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
I am trying to use a custom web font on a GitHub page using #font-face in my CSS. I created a folder in the repository and uploaded the .woff-file of the font I want to use. However, I seem to be unable to properly link the font. Below you'll find the very basic HTML and CSS I am working with.
In my GitHub page ( [username].github.io ) it is possible to simply link a stylesheet, since it is sitting in a folder in the same directory as index.html:
Now, why do I seem to be unable to link a .woff-file also sitting in a folder in the same directory?:
I tried to do so by linking to the font via #font-face and using Assets/AkzidenzGrotesk-Regular.woff as the url. Yet, the site refuses to use the font and falls back on Times, as specified in the CSS.
Can someone help my out and explain to me, why this is happening? How do I have to link the font-file in order to use it on the site?
My Index file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/basic.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<h1>Personal HTML-Projcet</h1>
<p>Personal web design project, hosted via GitHub-Pages.</p>
<div class="grotesk">
<p>This is a test, using Akzidenz Grotesk as a webfont.</p>
</div>
</body>
</html>
And the respective CSS:
#font-face {
font-family: AkzidenzGroteskRegular;
src: url(/Assets/AkzidenzGrotesk-Regular.woff);
}
body {
background-color: white;
font-family: 'Work Sans', sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
.grotesk {
font-family: 'AkzidenzGroteskRegular', 'Times';
}
Make sure you refresh your cache, because everything I see on j0hnga1t.github.io shows that the Berthold Akzidenz-Grotesk Regular font is used.
So this is probably about as basic as it gets and I'm not understanding what I'm doing wrong. I am using IIS on Windows 10 (for development\practice) and I have only two files in my web root: default.htm & style.css
default.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodystuff">
Stuff
</div>
</body>
</html>
style.css
#bodystuff {
font-family: Georgia;
font-size: 5em;
}
My problem (and odds are it's something silly that I'm missing) is that when I open the page with IE (11 if that matters) it opens up fine and the stuff in my body properly renders using my style.css file. However if I open the same web site up with Firefox the site is rendering as if I had no styles configured at all.
Any suggestions on what I am missing to make it so that my CSS is used when opening the site with either IE or FF?
The end cause was that the file encoding for my default.htm and style.css files were different. I recreated the files using UTF8 and now it works. It would appear that Firefox is quite sensitive to the file encoding between CSS and HTML documents. I found the solution thanks to #AlexanderO'Mara pointing me to Firefox's developer console which revealed a warning that I then searched for and found a discussion about here.
I am trying to use Nastaliq Unicode NFL and the Jameel Noori Nastaleeq fonts for displaying text in Urdu in the browsers. But it isn't displaying properly in any of the browsers.
Please suggest a mechanism through which I can display the text in the same format as is displayed in the below site:
http://www.urdupoint.com/
Thanks,
Waq
here is the code for that font-family:
http://cdn.urdupoint.com/daily/font-styles/nafees_web_naskhshipped.eot
Now, you can use: #font-face to apply this to use own website.
You should have seen this code in the website's HTML Inspector. It was just there at the end of the code.
For #font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
From Notepad++ you can simply write Urdu just like English
<span style="font-size:13px;padding-left:53px; font-family:Nafees Nastaleeq;"><i> براے مہربانی اپنی باری کا انتظار کریں </i></span>
To add other font family,
See this link
http://font.urduweb.org/
Add Jameel Nooriee Css Font Family in css. Then Try it
.urduh {
font-family: Jameel Noori Nastaleeq;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="urduh" >زندگی میں بہت سی پریشانیان آ سکتی ہیں</p>
</body>
</html>
Interestingly I came across a web page where it has image ,but when I am able to see the source code I cant see its source, I mean the link to the actual image. since I am developing a webpage (beginner), I would like to know how to achieve. I am not sure whether its an image, or it is coming through CSS.
and the site below
https://www.debuggex.com/pricing
It's not an image but a character specified using CSS:
content: "\f023";
This is achieved using FontAwesome. You can apply classes to elements (in this case, icon-lock) and the styles are automatically applied using this third party open source thingy.
Because this is iconic font design it does not have image
If you like to include your project add css
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Then use class like this
<i class="fa fa-book fa-fw"></i> Library</li>
Refer
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/examples/
In this example it is not an image. The padlock is a font and circle around a style (CSS).
<span class="callout-pic"> <!-- Circle -->
<i class="icon-lock"></i> <!-- Padlock icon -->
</span>
generating image using the base64 encoding,
background: url(data:image/png;base64,.....)
Ref: http://base64img.com/#encode
#GrantThomas is right, Content use in css but basic use call to systems Symbol example Copyright Symbol, Percent Symbol, Left Right Arrow and more work etc. If you want to use this then you do not need any external resource in your page. Simply in your page call font which available in your system and right some code and if you want to some specific symbol then download font.
Example downloaded font :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>DingbatsOne Regular Specimen</title>
<style type="text/css">
#font-face {
font-family: 'dingbatsoneregular';
src: url('dingbat1-webfont.eot');
src: url('dingbat1-webfont.eot?#iefix') format('embedded-opentype'),
url('dingbat1-webfont.woff') format('woff'),
url('dingbat1-webfont.ttf') format('truetype'),
url('dingbat1-webfont.svg#dingbatsoneregular') format('svg');
font-weight: normal;
font-style: normal;
}
#target {font-family: 'dingbatsoneregular';}
#target:before {content: "A"; font-size: 200px;}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
I am new in CSS and beginner but may be this is helpful to you.