0

I've just started using UltraEdit for coding in HTML and CSS on Mac. (I am new to HTML, I've done only a little of it in Notepad++ on Windows.)

The problem is that I can not attach my CSS file to my HTML file, so HTML does work (it is very basic), but CSS is not applied to it.

The HTML and CSS files are in the same folder, so it should work as in Notepad++.

Here is my HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="dgt 2.css">
</head>
<body>

<h1>My HTML file</h1>

</body>
</html>

CSS file (dgt 2.css):

h1 {
    color: green;
}

So, as you see it is all very straightforward, but I don't know why the heading is not green.

I've researched on that, but all coders do the same thing and it does work in other apps.

halfer
  • 19,824
  • 17
  • 99
  • 186
kkk
  • 1
  • 1
    spaces in file names are not a great idea. If you are going to use them you should encode the space `href="dgt%202.css"` . Also check the css file is at the right location, given your path it should be in the same folder as the html file – Jon P Oct 10 '18 at 01:40
  • @JonP thank you, it worked. However, when I added h2 in HTML and set its colour in CSS it did not show up when I launched it. The location is right for sure because it has just worked with h1 (when I encoded space) HMTL: `

    My HTML file

    CSS

    ` And CSS `h1 { color: green; } h2 { color: rgb(201, 76, 76); }`     – kkk Oct 10 '18 at 02:30
  • CSS files are cached by the browser, when you update the CSS file you need to flush the cache (ctrl + f5) or set a cache breaker on your css link, e.g : `href="dgt%202.css?v=1"` , change the value for v as you update, I often use a date stamp (20181201) if I'm not making multiple changes in a day. – Jon P Oct 10 '18 at 03:34
  • I've tried this option, but when I've put `href="dgt%202.css?v=1"` it didn't change anything. I just don't really know what version of CSS file it is - I've tried to put from v=2 to v=10, but because I've edited it a lot of times today, I am not really sure. Is there a way to check a number of versions of CSS file? – kkk Oct 10 '18 at 04:50
  • Not really, they are defined by you. The browser dev tools, in most browsers, enables you to inspect elements and see what styles are being applied and what is being overridden. This could be your next step to investigate what is happening. Try making a change to the `h1` style as well, this will help determine if the CSS file has been refreshed or if you have something else going on. – Jon P Oct 10 '18 at 05:27
  • Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Oct 10 '18 at 08:57
  • @JonP, I've tried to change the text of h1 and have put different values for `v` (in `href="dgt%202.css?v=1"`), however, in UltraEdit, only h1's colour is changed - it is very strange, because without `?v=1` h1 and h2 were in colour. I reckon it is a problem with UltraEdit because in Safari it does work. – kkk Oct 10 '18 at 09:18
  • @halfer, thank you for your edit, it just was my first question on such platform - I will consider that next time – kkk Oct 10 '18 at 09:33

1 Answers1

0

Try to add your css code into the HTML file, as the following code.

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: green;
} 
h2{
color: rgb(201, 76, 76); 
}
</style>
</head>
<body>

<h1>My HTML file</h1> 
<h2>CSS</h2>

</body>
</html>

I Also recommend you to rename the CSS file to "dgt-2.css", with no spaces. If that doesn't work, eliminate the cache of your browser or try another one, like: FIreFox, Chrome, or Explorer(as last resourse). 

<link rel="stylesheet" type="text/css" href="dgt-2.css">
falconimogollon
  • 111
  • 7
  • thank you for your answer. I tried to change the name of CSS file and it worked, however when I add h3 to HTML file and to CSS it doesn't work (it still works with h1 and h2). Then, I've done the coding for HTML file with `` in HTML file for all CSS formatting instead? Will it all work? – kkk Oct 10 '18 at 04:38
  • That's weird, are you sure that you are saving the changes that you are doing to the CSS file. I would recommend you trying another browser. It's ok if you put your CSS code inside of the HTML file in the ``. The problem is when you have a pile of HTML pages, you will have to add that CSS code to each one, that's why the `` was created, to prevent that insane copy of code. – falconimogollon Oct 10 '18 at 04:56
  • oh, actually, I've tried to open the HTML file from Finder instead of running it in Ultra Edit and it showed up. Maybe it is something wrong exactly with Ultra Edit because it is running well in Safari. It would be cool to know how to fix Ultra Edit, because it is not very convenient to go to Finder each time, but anyway it is good that it works at least somehow (my project will have a lot of HTML files, so probably, yes, `` won't be a solution) – kkk Oct 10 '18 at 05:35