Guide to Embedding an External CSS Stylesheet

I have made edits because the link to the "previously answered solution" is not helpful.
Find additional information attached at the end of this question

Original Query

All my HTML pages contain two links to external style sheets. As a result, I am looking to consolidate them into one external style sheet.

<!DOCTYPE html>
<html>
<head>
<title>Html Demo</title>
<link rel="stylesheet" type="text/css" href="mystyles.css">
<link rel="stylesheet"  href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" (etc)
...

The current setup runs smoothly. Index.Html displays some attractive icons:

<p>
  <i class="fas fa-fish"></i>
  <i class="fas fa-frog"></i>
  <i class="fas fa-user-ninja vanished"></i>
  <i class="fab fa-facebook"></i>
</p>

However, including the font-awesome link in all my HTML pages is a necessity.
I am considering moving the font awesome reference to MyStyles.css. What would be the correct syntax for this?

Incorrect MyStyles.Css Attempt:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"  (etc)

body {background-color: lightblue;}
h1 {color: yellow; margin-left: 20px;}
... (etc)

What would be the accurate syntax for this operation?

Supplement

This inquiry appears to be answered elsewhere. The answer suggests the following approach:

@import url("base.css");

I appreciate how straightforward the response is. All that is required is relocating the original link to the CSS file.

The initial (working) text in index.html was as follows:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Note: there are additional parameters after the reference to the imported CSS file!

Various attempts within `mystyles.css`, similar to the referenced question, unfortunately did not yield the desired results:

(1) Solely importing the css file. Where should the extra parameters be placed?

@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

(2) Including everything within the url statement:

@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous")

(3) Adding the parameters after the closing bracket:

@import url ("https://use.fontawesome.com/releases/v5.7.2/css/all.css") integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

(4) Whereas the original import statement suggested using double quotes, one alternative proposed the employment of single quotes:

@import url ('https://use.fontawesome.com/releases/v5.7.2/css/all.css') integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

(5) According to W3Schools, brackets need not be used whatsoever:

@import url "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"

Therefore, can anyone provide insight on the right syntax to use?

htmlcss

Answer №1

Implement the @import url method in this way

@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with the `.load` function in jQuery not functioning properly

I'm currently tackling an issue with a project where I am encountering difficulties with the .load function not working in Google Chrome. Below is the JavaScript code: function link1() { $('#loadarea').html('loading.....' ...

javascriptjqueryhtmlload

What steps can be taken to customize this code in order to develop a dictation application?

Currently, I have a code that functions by comparing two strings: str2 (which represents user input) and str1 (our reference string). The purpose is to determine whether any words in str2 are spelled correctly or incorrectly. So far, the code works well. H ...

javascripthtml

Adding tags to a URL using jQuery without causing a page refresh

I am in the process of developing a "builder" page that allows users to choose an element from a dropdown menu and create a webpage. Since we don't have access to a database for this task, I want to save the elements in the URL so it can be shared via ...

jqueryhtmlfragment-identifier

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

htmlcssscrollsafarioverflow

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

I am working with a Highcharts sparkline chart, and the design in my Figma file resembles the image provided below. I would like to customize the chart by adding transparency and a linear-gradient effect. Can anyone provide guidance on how to achieve this? ...

csshighcharts

Bug with the button and text input feature in Firefox

I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...

htmlcssfirefoxbuttoninput

The HTML function transforms blank spaces into the symbol "+"

Just starting out with a question: I created a basic submission form, but I noticed that if there are any spaces in the inputs, the values get changed to a plus sign (+). Here's my form: <form name="input" action="search" method="get"> Web Ad ...

javascripthtml

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Even though I used p:nth-child(1){color: white;} in my CSS style tag, it did not produce the expected result. body { background-color: #162b85; } button, p:nth-child(1) { color: white; } <p class="center">Register your account</p&g ...

htmlcss

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Is there a faster alternative to using jQuery's indexOf method?

Looking to create a search box for a large set of options (around 2000 options) The indexOf method is very slow...any alternative solutions? Jquery Code : $('#textfortitlesearch').on('keyup', function() { var query = this.value ...

jqueryhtmlindexof

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

javascriptphpjqueryhtmljson

The Navbar is not displaying the React Bootstrap 4 CSS module as intended

Having some trouble changing the color of my navbar. Is there a step I might be missing? Here's the component I'm trying to render: import React from 'react'; import { Nav, Navbar } from 'react-bootstrap'; import styles from ...

cssreactjsbootstrap-4react-bootstrapreact-bootstrap-nav

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

Entering a string into Angular

Within my function, I trigger the opening of a modal that is populated by a PHP file template. Within this template, there exists a div element containing the value {{msg_text}}. Inside my JavaScript file, I initialize $scope.msg_text so that when the mod ...

javascriptphphtmlangularjs

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

csshtml

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

I am facing an issue with the logo and navbar layout in my design. The design has 3 columns for the logo and 6 columns for the navbar, as shown in this image: https://i.stack.imgur.com/RpmJm.jpg However, when I run the code, they do not appear in the cor ...

htmlcssbootstrap-grid