I installed SublimeCodeIntel but when I try to use the autocomplete I don't see the class that I've got in my css file. For example.
I have a css file called style.css
.example{
color:black;
font-size:18px;
}
but in my HTML I try to do <div class=""> When I am within the quotes I get a popup with some css data but the data is just from the page I am on. I don't see test
Have you followed the trouble shooting steps on the git hub page?
https://github.com/Kronuz/SublimeCodeIntel
It mentions build.sh and "Live autocompletion can be disabled in a per-language basis, using "codeintel_live_disabled_languages". Ex. "codeintel_live_disabled_languages": ['css']"
Related
I'm new to Stack Overflow and I'm a bit familiar with HTML & CSS.
So I've been trying to get my CSS to work with my HTML for a week or 2, and this is my file structure before VSC "Solved" my problem: TestProj/HTML/index.html (for my HTML) TestProj/Resources/CSS/test.css (for CSS)
I'm using the following Boiler for HTML https://textbin.net/4hzjievpq0 (the reason there is no css link is because that is a boiler generator, I've put the link in my code so that's not the issue)
But whenever I "Go Live" (Extension in VSC to view in chrome) it displays it with no custom fonts or anything, but when I do background-color in the html file NOT THE CSS it works.
When I follow the css link in the html file it says there is no such file, and asks to create a file, then it creates a CSS file in the html hierarchy and then it somehow works?
I thought the CSS file was supposed to be in a different folder.
Any Suggestions?
Thanks,
Critical
I have a single spa application with a root-config, a styleguide, and a couple of react applications. All of these application are generated using the yarn create single-spa command.
I tried creating a kit from the font-awesome website and adding it to the root-config index.ejs inside the head tag.
Then I tried adding <i className='fa-brands fa-facebook-f' /> in one of my MFEs.
The loaded index.html in my browser include the tag code. But it's dimensions are 0x0.
You are missing some styles.
When you generate your kit, the font awesome website shares a snippet of the script tag for your kit.
You need to place it in the head section of your root-config.
But that's not all. You also need to add some font-faces.
The same page (with the snippet) also has a link to download example html file.
If you check that file it has extra style tags.
Once you add those to your root-config, the icons will start showing up.
This issue is not single-spa, it's the confusing documentation for font-awesome.
Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
I want to build an entire layout directly from chrome dev tools. So I came over workspaces in chrome dev tools.
But there are 2 limitations I'm facing after I map styles and html to file system resource
If I do some html change from elements panel - like edit html or delete a node - it is not mapped to my workspace html file so that I can save it - is there a way to see such changes??
After I've mapped by css file - and my local css file does not have a rule for a selector say
wrapper{ font-family:"Courier New"}
then I can't persist the change I make from elements panel by directly selecting an element.
See images below:
"Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)"
From https://developers.google.com/web/tools/setup/setup-workflow:
So I have been following the courses on CodeAcademy (lame I know but it's a step) and now feel comfortable writing my own HTML/CSS. However, I found when I started doing so (I have been using sublimetext 3) and I open my html file, the css is not applied. I tried again using some code from codeacademy that worked and again Chrome just displayed the plain html. Here is my code from files
template.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Strut Your Stuff!</title>
</head>
<body>
<p>I'm about to become a lovely shade of teal.</p>
<p>Me, too!</p>
<p>I think I'll do the same.</p>
<div>
<p>We're going to become a truly striking scarlet!</p>
<p>I was thinking more vermillion.</p>
<p>No, crimson!</p>
</div>
</body>
</html>
and stylesheet.css
p{
color:#00E5EE;
}
div p{
color:#CC0000;
}
*{
border:1px dashed #3A5FCD;
}
Both files are located in the same directory. If you guys could share any insight as to what is happening it would help me out a lot. Thanks in advance.
Update: I discovered that simply reloading a page would not work. I needed to open a new tab and type the directory back in.
The issue was reloading the page simply wouldn't work. I would create the stylesheet, then hit the reload button. What I needed to do was open a new tab and paste the directory of the html file again. Thank you for all insights
As a beginner, you need to learn that the "developer tools" are your best friend when debugging issues like this.
If you press the F12 key in Chrome, this will open the Developer Tools, which are useful in so many ways for debugging web issues.
If you click the "Network" tab of the developer tools, and refresh your screen, you can see all the requests your page is making, and what is returned. From the description of your problem - it is very likely that you will see "404" under the status for the .css file - meaning that it couldn't be found, most likely because you have the filename wrong, or the wrong path.
If you click on the elements tab, you can see a hierarchical view of the elements on the page. You can select one of them, and see the styles applied to it on the right. This will let you see which (if any) css rules are applied to a given element.
Try embedding your stylesheet into your html file on the head section
<style TYPE="text/css">
<!--
p{
color:#00E5EE;
}
div p{
color:#CC0000;
}
*{
border:1px dashed #3A5FCD;
}
-->
</style>
If this works (which will work... ) then you will need to check the path of both your html and css files.
Run your html on a browser and check the url. Then replace the template.html with stylesheet.css and see if your stylesheet shows up. If it doesn't that would be a filepath problem.
Let us know how this went