Custom CSS File Link

Code Help HTML/CSS/JS
1

Question:
So I am trying to make a custom CSS stylesheet like Bootstrap. I am wondering how to link it to a Repl in a HTML file.
Repl link:
https://replit.com/@SalladShooter/SaladCSS

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="Salad.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button class="button-square">Square Button</button>
  <button class="button-round">Round Button</button>
    <p>Text <span class="badge-square">Badge Square</span><span class="badge-round">Badge Round</span></p>
  
  <label class="normal" for="cars">Dropdown:</label>


<select class="dropdown-square" name="dropdown-square" id="dropdown-square">
  <option value="dropdown-square">Dropdown Square</option>
</select>
<select class="dropdown-round" name="dropdown-round" id="dropdown-round">
  <option value="dropdown-round">Dropdown Round</option>
</select>

<p class="bold">-------------------------------------------------------------------</p>
  
<div class="bold">
  <button class="button-square">Bold Square Button</button>
  <button class="button-round">Bold Round Button</button>
    <p>Text <span class="badge-square">Bold Badge Square</span><span class="badge-round">Bold Badge Round</span></p>

  <label class="bold" for="cars">Bold Dropdown:</label>
<select class="dropdown-square" name="dropdown-square" id="dropdown-square">
  <option value="dropdown-square">Bold Dropdown Square</option>
</select>
<select class="dropdown-round" name="dropdown-round" id="dropdown-round">
  <option value="dropdown-round">Bold Dropdown Round</option>
</select>
</div>

  <script src="script.js"></script>
</script>
</body>

</html>

CSS:

html {
  height: 100%;
  width: 100%;
  font-family: Arial;
}

.bold {
  -webkit-text-stroke-width: 0.055em;
}

.normal {
  -webkit-text-stroke-width: 0em;
}

.dropdown-round {
  color: white;
  background-color: lightgreen;
  border-style: solid;
  border-radius: 2em;
  border-color: lightgreen;
  border-width: 0.35em;
}

.dropdown-square {
  color: white;
  background-color: lightgreen;
  border-style: solid;
  border-radius: 0.5em;
  border-color: lightgreen;
  border-width: 0.35em;  
}

.badge-round {
  display: inline-block;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: lightgreen;
  border-style: solid;
  border-radius: 1em;
  border-color: lightgreen;
  border-width: 0.25em;
  color: white;
  width: max-content;
  text-align: center;
}

.badge-square {
  display: inline-block;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: lightgreen;
  border-style: solid;
  border-radius: 0.5em;
  border-color: lightgreen;
  border-width: 0.25em;
  color: white;
  width: max-content;
  text-align: center;
}

.button-square {
  color: white;
  background-color: lightgreen;
  border-style: solid;
  border-color: lightgreen;
  border-radius: 0.5em;
  border-width: 0.25em;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.button-round {
  color: white;
  background-color: lightgreen;
  border-style: solid;
  border-color: lightgreen;
  border-radius: 1em;
  border-width: 0.25em;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
2

For clarification, are you trying to access a stylesheet not stored locally?

3

You can link a CSS stylesheet with HTML like so:

<link rel="stylesheet" href="https://style.sheet.url/path/to/style.css"/>

Ensure that you have a webserver running which serves your desired stylesheet. Possible solutions are CDNJS, or Replit web hosting with the HTML/CSS/JS template

Or…

You can also directly embed CSS with HTML, using a <style> tag.

<style>
html {
    height: 100%;
#...
    padding-right: 0.5em;
}
</style>
1 Like
4

@bobastley Im trying to make a custom style sheet I can use anywhere.

1 Like
5

I think you could just copy it over to each project you needed to use it in, or link it as @python660 suggested with <link rel="stylesheet" href="https://saladcss.salladshooter.repl.co/Salad.css">.

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.