Adding style.css as a template?

HTML/CSS
1

Hey friiends! I am working on creating tables. I have a question…

I learn the best restarting no matter how much code I have. The one thing that I notice I keep doing is forgetting to link my style.CSS sheet.

In the first Course I learned you could type the “!” and you would get a basic HTML boilerplate.

is there way to get your stylesheet included with the boiler plate?

This would help me a ton as i learn.

Thank you!

2

You could setup a Github repo with a basic stylesheet, a html skeleton and some basic folders you’ll need, then pull it once you are ready to start a new project.

3

Thank you! This was supoer helpful. I had never used Git Hub before! A little bit Googleing went a long way.

I created two different respositories, basiclly they are templates to fast track things If I need them, this gives me a oplace to store and close when I need them!

Thank you for this!

4

I don’t know if we can do it with exclamation marks but surely you can create your own snippets with VS Code.
I have a ton of them. (Or I used to have. I notice I forgot to import them on my new system drive :sweat: )

Let’s create a new one

In the bottom left corner click on the cog wheel > User Snippets.

image

Then it will ask you for what language you want to create the snippet.
You can also create global snippets that would work in every editor no matter the language.
image

It will open a json file where you can create templates

For your convenience I put the code right there. Just copy paste it.

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Custom HTML Template": {
		"prefix": "!!!!",
		"body": [
			"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"    <meta charset=\"UTF-8\">",
"    <meta name=\"viewport\" content=\"width=${1:device-width}, initial-scale=${2:1.0}\">",
"    <title>${3:Document}</title>",
"    <link rel=\"stylesheet\" href=\"/styles/styles.css\" />",
"</head>",
"<body>",
"    $4",
"</body>",
"</html>"
		],
		"description": "Customised HTML template with link to CSS file"
	}
}

Result is it works fine. :slight_smile:

image
Then you still have the ability to navigate through a few places to edit the code with ↹ Tab button.

image
image866×325 10.3 KB

Hope this helps.

Cheers.

1 Like
5

WOW!, this was helpful and easy peasy! I have a followup question, lets say I have a table I created would I just add the code in the body section and this would create a template to the style sheet one you provided?

6

Hi,

Not sure to understand but I’ll try to answer.

Do you mean body from snippet or HTML ?

Anyway you can edit the template as you want and add as many you want.

You can surely create a custom template to manage HTML tables. But in that scenario I would say better use Zen Coding. Unless there is a format of table you would often use of course.

You can go beyond what I did above following this doc.

Hope this helps.

Cheers.