Как подключить css к html в visual studio
Перейти к содержимому

Как подключить css к html в visual studio

  • автор:

17.7. Local HTML/CSS Files¶

Visual Studio Code recognizes many different programming languages. We can use the application for our Python projects and our HTML/CSS work.

Let’s build a simple webpage just like we did in the HTML and CSS chapters. However, this time we will do it locally.

17.7.1. Hello, Web¶

Add a new directory to local_practice called hello_web . Next, create two files in the directory called index.html and style.css .

Our file tree should look something like this:

File tree for the hello_web directory. It contains the index.html and style.css files.

The hello_web directory tree. ¶

Notice that VS Code displays different symbols next to the files. It uses the .html , .css , and .py extensions to identify the programming language they contain.

Paste this code into index.html :

1 2 3 4 5 6 7 8 9 10 11 12
 html> head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> title>Hello, Web!title> head> body> h1>Hello, Local Webpage!h1> body> html>

Even though the code only contains a single h1 element inside the tags, it is still a fully functional HTML file. Let’s see what it looks like in a browser!

17.7.2. Viewing Local Files in a Browser¶

There are two ways to view our local HTML file in a browser.

    Option 1: Open a web browser. Click on File –> Open File from the menu options. In the box that pops up, navigate to the .html file we want. Click Open.

File menu and dialog box for opening a local file in a browser.

Menu options that appear after right-clicking a file tab in VS Code.

Ta da! Our webpage appears. Notice the path in the address bar. It looks very similar to the result we would see from the pwd command in the terminal. The copied path changes depending on the file chosen.

17.7.2.1. Add More Elements¶

  1. Return to VS Code and add a few more elements to the index.html document. Be sure to use some of the semantic HTML we learned earlier.
  2. Save your work.
  3. Go back into the browser and refresh the tab for your HTML file. You should see the results of your changes.

VS Code has a nice feature to let us know if we have saved our work recently! In the editor tabs, if we see a solid dot ( • ) next to a filename, that means we have unsaved changes in our code. If we see an X instead, then all of the code in the file has been saved.

Two tabs, one marked with a dot to indicate unsaved changes.

17.7.2.2. For Your Eyes Only¶

Only you can see your local webpage. Looking at the address bar tells us this. Instead of https://www.etc. , we see the file:// prefix. This indicates that the browser opened a file on your personal machine. No one else in the world can view your page unless they are looking over your shoulder right now (or hacked into your device).

Much later in this course, we will learn how to deploy a website and make it visible to anyone who accesses the web.

17.7.3. Adding CSS¶

Since the index.html and style.css files are in the same directory, we can link them together by adding one statement to our head element:

3 4 5 6 7 8
head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> title>Hello, Web!title> link rel="stylesheet" type="text/css" href="style.css"> head>

Line 7 uses the identical format to what we learned in the Linking CSS to HTML section.

17.7.3.1. Try It!¶

  1. Paste this code into the style.css file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

h1 < color: purple; text-align: center; text-decoration: underline overline wavy; font-family: impact, helvetica; >section < background-color: lightgreen; text-align: center; font-size: 36px; border: solid 2px; width: 50%; >.shadow

The local webpage with CSS style rules applied.

A styled local webpage. ¶

17.7.3.2. style.css in a Different Directory¶

If the CSS file is located in a different directory from the HTML page that uses it, we need to add the proper path inside the tag. Let’s take a look at three possible cases:

File tree for hello_web showing style.css in a subfolder.

style.css is inside the subfolder the_styles . ¶

When the stylesheet is one level down from our HTML file, update the href attribute by adding a relative path that points to the CSS file.

link rel="stylesheet" type="text/css" href="./the_styles/style.css">

The path ./the_styles/style.css tells VS Code, From the current directory, find the folder called the_styles. Move into that folder and find the file called style.css.

File tree for local_practice showing style.css one level above index.html.

style.css is inside the parent directory of hello_web . ¶

When the stylesheet is one level up from our HTML file, use the .. shortcut in the relative path.

link rel="stylesheet" type="text/css" href="../style.css">

The path ../style.css tells VS Code, From the current directory, move up one level into the parent folder. Find the file called style.css.

If we pull a stylesheet from a website (like Bootstrap ), use the web address for the href attribute.

link rel="stylesheet" href="https://websiteURL">

Notice that the external link does not include the type attribute.

Finally, we can always use the full path to the stylesheet. Right click on the style.css tab and choose the Copy Path option. Paste the path inside the quotes for the href attribute.

17.7.4. Local Project¶

  1. In the HTML Me Something assignment, you built and styled your own webpage in repl.it or Trinket. Login to your account now and open up that project.
  2. In VS Code, create a new directory called html_me .
  3. Inside this directory, create an index.html file.
  4. Copy your HTML code from your repl.it/Trinket project and paste it into VS Code.
  5. Repeat this copy/paste process for the style.css file.
  6. If your repl.it/Trinket project contains any other files (like images, gifs, etc.), drag and drop copies of these files into the html_me directory.
  7. Open your new index.html file in a browser. Properly done, you should see your awesome webpage! However, now you have it saved on your personal device.

17.7.5. Check Your Understanding¶

Visual Studio Code automatically saves our work.

Visual Studio Code works with other languages besides Python, HTML, and CSS.

After making a change in our HTML or CSS code, how do we see those updates in a web browser?

  1. Refresh the tab in the browser.
  2. Save our work in VS Code.
  3. Save our work in VS Code, then refresh the tab in the browser.
  4. Refresh the tab in the browser, then save our work in VS Code.

Style Sheets

With WebStorm, you can write style definitions in CSS as well as in various languages that compile into it, such as Sass, Less, SCSS, or Stylus.

You can also look up documentation for Style Sheets, create and move rulesets, introduce variables, and more.

Before you start

Make sure the CSS plugin is enabled in the settings. Press Control+Alt+S to open the IDE settings and then select Plugins . Click the Installed tab. In the search field, type CSS . For more information about plugins, refer to Managing plugins.

Code completion

WebStorm provides code completion for properties, their values, selectors, variables, and mixins.

Complete Style Sheet classes

Completion for CSS, SCSS, Less, and Sass classes and ids is available in HTML files, in various types of templates (for example, in Angular or Vue.js), as well as in JSX code.

In HTML files, WebStorm first suggests classes and ids from the style tag and files linked with link tags. If no matching results are found, WebStorm also suggests symbols defined in all stylesheet files in the project. To see all classes and ids defined in the project straight away, before you start typing, press Control+Space twice.

Project-wide completion for Style Sheet symbols in HTML

Complete Style Sheet classes from external libraries

With WebStorm, you can also get completion for class names from Twitter Bootstrap or other CSS libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

  1. Open the HTML file with a CDN link to an external CSS library. WebStorm highlights the link.
  2. To enable completion for the library, press Alt+Enter on the link and select Download library from the list. Alternatively, hover over the link and click Download library .

The library is added to the list of JavaScript libraries on the Settings | Languages and Frameworks | JavaScript | Libraries page. For more information, refer to Configuring a library added via a CDN link.

Complete Sass and SCSS selectors

WebStorm also provides completion for Sass and SCSS selectors — including nested selectors and selectors created with an ampersand (&).

Completion for Sass and SCSS selectors

Search and navigation

  • To find usages of a Style Sheet symbol, place the caret at it and press Alt+F7 . Learn more from Search for usages in a project.
  • To jump from a usage of a Style Sheet symbol to its definition, press Control+B . Navigation to definition is available for classes, ids, selectors – including nested selectors and selectors with an ampersand & — as well as for variables and mixins. Learn more from Go to declaration.

Documentation look-up

For properties and pseudo-elements, WebStorm can show you a summary from the corresponding MDN article. This summary is displayed in the Documentation popup which shows a brief description of the property and its values, as well as information about its compatibility with various browsers.

Style sheets quick documentation: compatible browsers are listed

If the property is available in all versions of browsers, WebStorm does not show any information about its compatibility.

Otherwise, the Documentation popup also lists the browsers and their versions that support the property.

Note that compatibility is checked only for Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer, and Edge.

For selectors, WebStorm also shows their specificity.

Documentation look-up: specificity fpr selectors

View documentation for a property

  • Position the caret at the property and press Control+Q or select View | Quick Documentation Lookup from the main menu.
  • When you hover over a property, WebStorm immediately displays the reference for it in the Documentation popup. You can turn off this behavior or configure the popup to appear faster or slower, refer to Configuring the behavior of Documentation popup below.

Configure the behavior of Documentation popup

  • To turn off showing documentation automatically when you hover over code symbols, Click in the popup and disable the Show on Mouse Move option.
  • To have the Documentation popup shown faster or slower, open the Settings dialog ( Control+Alt+S ), go to Editor | General | Code Completion , then select the Show the documentation popup checkbox and specify the delay time.

Open the MDN documentation in the browser

  • In the Documentation popup Control+Q , click the link at the bottom.
  • Press Shift+F1 or select View | External Documentation from the main menu.

Formatting

With WebStorm built-in formatter, you can reformat fragments of Style Sheet code as well as entire files and folders to meet the language-specific code style requirements. The formatter also wakes up automatically when you generate or refactor your code.

  • To configure formatting for a Style Sheet language, open the Settings dialog ( Control+Alt+S ), go to Editor | Code Style | Style Sheets | , and configure the language-specific settings for tabs and indents, spaces, wrapping and braces, hard and soft margins, and so on. In the CSS, SCSS, and Less context, WebStorm by default uses double quotes for generated string literals in import statements and URLs. To use single quotes, open the Other tab, and select Single from the Quote marks list. To apply the chosen style to the entire file after reformatting, select the Enforce on format checkbox below the list. Currently changing the configuration for quotation marks does not affect injected style sheets and CSS code inside the tags.
  • To reformat a code fragment, select it in the editor and press Control+Alt+L .
  • To reformat a file or a folder, select it in the Project tool window and press Control+Alt+L .

Alternatively, you can use the Prettier. For more information, refer to Prettier.

Refactoring

With WebStorm, you can convert expressions in Style Sheets into variables and introduce these variables using the var(—var-name) syntax in .css files or the $ syntax in .scss and .sass files.

Introduce variables

  1. In the editor, place the caret at the expression to convert into a variable and press Control+Alt+V or select Refactor | Introduce | Introduce Variable from the context menu or from the main menu.
  2. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences from the Multiple occurrences found list.
  3. For .scss , and .sass , select the global or local scope for the variable.
  4. In the field with red borders, accept the suggested variable name or specify a custom name. Press Enter when ready.

With WebStorm, you can create new rulesets from existing declarations in CSS, SCSS, Sass, or Less files and even move entire rulesets between files using refactoring and intention actions.

Introduce rulesets

  1. Select the declarations to introduce. If you need only one declaration, just place the caret inside it.
  2. Press Alt+Enter and select Introduce ruleset from the list.

WebStorm creates a new ruleset with the same selector and moves the selected declarations to it. If the selection contains comments, nested selectors, and so on, they are also moved to the new ruleset.

Move rulesets to other files

  1. Place the caret anywhere in the ruleset to move and press F6 .
  2. In the dialog that opens, specify the file to move the ruleset to. If the specified file does not exist, WebStorm will suggest creating it.
  3. By default, WebStorm automatically opens the file where the ruleset is moved. To change this behavior, clear the Open in editor checkbox.

Common refactorings, such as Copy , Move , or Rename , are also available.

Checking compatibility with browsers

Besides looking up in the documentation popup, you can check Style Sheet properties for compatibility with specific browsers on the fly. This inspection is based on the MDN Browser Compatibility Data and shows you a warning every time a property is not supported in one of the targeted browsers.

Style sheet compatibility inspection popup

Turn on compatibility check

CSS compatibility inspection settings

  1. In the Settings dialog ( Control+Alt+S ), go to Editor | Inspections .
  2. Expand the CSS node and select the Browser compatibility for properties . In the Options area, select the browsers you want to target and the minimum versions for them.

Changing color values

With WebStorm, you can easily change color values in Style Sheets without typing hexadecimal codes.

Choose colors

  1. Open the desired Style Sheet for editing.
  2. Type color: , and then press Control+Space .
  3. Select the desired color value from the suggestion list or choose color. to pick a custom one.

Change colors

  1. Open the desired Style Sheet for editing, and locate the color property that you want to change.
  2. Click the color icon in the gutter. Alternatively, if the icons are not shown, press Alt+Enter and select Change color from the list. See To show color icons in the gutter below.
  3. In the Choose color dialog that opens, pick the desired new color and click Choose .

Preview the code of colors

  • WebStorm marks each color property with a gutter icon of the corresponding color. When you hover over a color icon, WebStorm displays a popup that shows the color preview and its hexadecimal code. To use a code instead of a human-readable color name, press Alt+Enter and select Convert color to from the list, where is HEX, HSL, HWB, or RGB

Show color icons in the gutter

By default, WebStorm displays color icons in the gutter. If they are hidden, you can return them at any time.

  1. In the Settings dialog ( Control+Alt+S ), go to Editor | General | Gutter Icons . The Gutter Icons page opens.
  2. In the Common area, select the Color preview checkbox.

Viewing the styles applied to a tag

In HTML and XHTML files, WebStorm can show you all the styles applied to an arbitrary tag.

Viewing the styles applied to the tag <body></p> <p>» width=»600″ height=»200″ /></p> <ul> <li>From the context menu of a tag, select Show Applied Styles for Tag . WebStorm opens the CSS Styles tool window with two panes, the left-hand pane shows the styles for the tag and the right-hand pane shows their definitions. For each tag, WebStorm opens a separate tab. From the tool window, you can navigate to tags and definitions of properties in your source code. <ul> <li>To jump to the tag, click on the toolbar of the left-hand pane.</li> <li>To jump to the definition of a property, select it in the left-hand pane and click on the toolbar of the right-hand pane.</li> </ul> </li> </ul> <h3>Configuring syntax highlighting</h3> <p>You can configure CSS-aware syntax highlighting according to your preferences and habits.</p> <ol> <li>In the Settings dialog ( Control+Alt+S ), go to Editor | Color Scheme | CSS .</li> <li>Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors and fonts.</li> </ol> <h2>10 Steps to Setup HTML, CSS, & JS in VSCode</h2> <p>The amount of times I’ve had to google this when I just want it all in one place!</p> <pre><span >mkdir my_new_app<br/>cd my_new_app</span></pre> <p>2. Create 3 files</p> <pre><span >my_new_app$ touch index.html styles.css app.js</span></pre> <pre><span >my_new_app$ code .</span></pre> <p>4. In your index.html file type “!” + tab which should bring up this handy html template:</p> <p>5. Open your app.js file and write any console.log message you would like:</p> <p>6. Now we need to reference this file in our app:</p> <p>Your index.html should look like this:</p> <p>7. Head to the terminal, making sure you’re in the my_new_app folder. In the terminal open a browser with</p> <pre><span >my_new_app$ open index.html</span></pre> <p>You will see a blank page but if you open the browser console with fn + f12 you should see the following:</p> <p>8. Yay! You’ve got some JavaScript going. Now let’s get the styling set up. Head to the index.html file and add this link to the head section:</p> <p>And some copy to the body:</p> <pre><span ><h2>Gotta love powder-blue</h2></span></pre> <p>Your index.html file should look like this now:</p> <p>9. Let’s make that text powder-blue. Open styles.css and in the file write:</p> <pre><span >h1 <span >color: powderblue;</span><span >></span></pre> <p>This is going to make the h1 text be what color? You guessed it, powderblue 🙂</p> <p>10. Let’s head back to the browser and refresh:</p> <p>There you have it! You’re now set up to write html, css and javascript! I’ve probably done this 100 times and my brain refuses to remember so I’ve posted here for future reference! The bits I forget is the HTML template “!” shortcut, where to put the script, and what the code is for connecting the css file. Hope this helps you too. ��</p> <h2>Visual Studio Code, CSS, and Twine: Suggestions?</h2> <p>I’ve been doing all my Twine/Sugarcube work in VSCode with Tweego for a couple of years now, and obviously, it is great. But there are VSC extensions that I can’t quite figure out how to use with Sugarcube. The <strong>Twee 3 Language Tools</strong> work fantastically, but I’d also like to get <strong>CSS Peek</strong> and <strong>HTML CSS Support</strong> to work with my .tw files, but for the life of me I can’t figure out how to associate the .tw files with extensions designed for HTML and CSS.</p> <p>Does anyone have any suggestions/experience with getting those extensions to work with Twine files? Or does anyone have any suggested VSC extensions that they’ve found to be particularly useful?</p> <p>Locked post. New comments cannot be posted.</p> <div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'> <!-- YARPP List --> <div>Похожие публикации:</div><ol> <li><a href=Как передать json в javascript

  • Как разобрать стиральную машину zanussi с вертикальной загрузкой
  • Как сделать сайт dle
  • Что такое состояние гонки в java

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *