For some strange reason, I cannot edit or apply styles to html in Sublime Text 2. I cannot do internal styles or link to external styles. However, if I take code that I have done into Dreamweaver or Notepad++, the styles are applied and editable? How can I get sublime Text 2 to allow me apply and edit styles?
I have Windows 7 and I'm new to HTML and CSS. I'm trying to learn different code editors, but it's quite difficult when the editors won't work :(
Thanks!
ETA: When I mean styles I mean css. I can't view any css styling on my html page on Sublime text 2. Only when I use notepad++ or dreamweaver. I can't see css in a browser when I use sublime text 2.
Here's my code:
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{
background: orange;
}
</style>
<body>
</body>
</html>
You're issue isn't with the editor; it's likely that there are some errors in the document.
You're currently missing the opening <html>, <style> elements should be inside either the <head> or <body> rather than between them, and the charset attribute should have a 2nd quotation to surround the value:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
body{
background: orange;
}
</style>
</head>
<body>
</body>
</html>
The issue is not the text editor, it must be your code. You may be opening an outdated file and looking for the changes in there. Make sure that you are saving the file in the correct location and opening the correct file when looking for changes.
Also, make sure that you are saving it as .html, Sublime Text 2 will not automatically give your files an extension like Dreamweaver or other editors might.
Related
Help me,i need to change the color of the background of my website and i dont know how, I still haven't tried doing that because i dont know how.
I have only coded these lines:
<!DOCTYPE html>
<html>
<head>
<title>My first creations with coding!</title>
</head>
<body>
<h1>My first creations with coding!</h1>
<br>
<p>>like pro</p>
</body>
</html>
You need a Cascading Style Sheet or .css file my dude. You can read more about that here.
Without reading that doc & overloading you with an insane amount of information... how can you set it up & get going?
In your website folder directory, add a new folder named assets
Within this new assets folder, create a new file named style.css
Attach this new style.css to your html file, within your head element. Using the following code :
<!DOCTYPE html>
<html>
<head>
<title>My first creations with coding!</title>
<link src="/assets/style.css" rel="stylesheet"/>
</head>
Save your 'html' file.
Open style.css
Add the following code :
body {
background-color: black; /* change the 'black' color here ONLY */
}
List of color keywords if you scroll down.
Save the css file.
Refresh your browser.
Now just repeat steps 5-8 to change the background of your site.
To change the background color, you need another coding language called CSS (cascading style sheets). You can implement it with a <style> </style> tag, and add CSS there, or add a separate file and link it like this:
<link rel="stylesheet" href="YOUR FILE HERE">
You can learn more about CSS here.
<!DOCTYPE html>
<html>
<head>
<title>My first creations with coding!</title>
</head>
<body style="background-color:powderblue;">
<h1>My first creations with coding!</h1>
<br>
<p>>like pro</p>
</body>
</html>
I changed the background-color css property. The files are as follows:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>test</title>
</head>
<body>
<h1>hi</h1>
</body>
</html>
main.css
body {
background-color: blue;
}
In chrome:
In firefox:
Can anyone tell me what's wrong?
Here is the developer tools view on chrome:
click here
Have you tried using a hex value instead of the color name "blue"?
Perhaps try :
background-color: #0000FE;
This is the hex value for that color blue you are using, I believe.
Try clearing the cache or refreshing the css file in the browser by viewing the source in the page.
Sometimes the cache may contain some definitions from previous programs.
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I am using Sublime Text 2 to write my testing html file. I save the text as HTML format.
Then when I try to open the file with browser by either drag&drop or Open_With...
Then.....
The browser open my plain text file, not the actual html.
This is what it look like. Just white background and these text.
<!DOCTYPE html>
<head>
<title>A Hello World Page</title>
</head>
<body>
<p>Hello World</p>
</body>
This is my first time with html ever, do I have to do special setup with anything? I just use default SublimeText2.
That may be because you are missing the main tag <html>.
Do this:
<!DOCTYPE html>
<html>
<head>
<title>A Hello World Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
<html> is the main tag, browser will look for to tell whether it is html or not.
Also make sure it is saved as .html or .htm
Open up Sublime Text, press CTRL SHIFT + P.
Type in HTML into the box and select Set syntax: HTML.
Then, in the file, type in html then press tab straight after and it should create a snippet (which is default):
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Then make sure you save the document as .html or .htm.
This should work in your browser after.
Note: Setting syntax and doing snippet wont actually 'help' in terms of this question, but will help you in HTML by making things quicker and having syntax highlighting.
When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.