How to put a CSS inside the html tag with URL?

Asked

Viewed 594 times

1

I have this CSS I’d like to put in my form

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

But when I put in <head> the CSS of every page is changed (obviously this would happen).

How do I make to import that CSS only for the tag <form>?

html css

  • This link is the entire W3 css library. when you put it in the head tag it is normal to change. One thing you can do is create a form! page without needing html, body, head.. Just form. And yes on the body page pass the CSS of W3

  • I did, but go on altering things like the menu. I wanted to put this css only on tag form, How do I do it? @Brunocastro

  • 2

    Why not create your own CSS and style the form as you wish?

  • how to show your code? And the W3 page that uses this css

  • @Andersoncarloswoss because I found the beautiful CSS of W3 Schools, and wanted to do something simple because it’s an example page.

  • 2

    Just open the link and copy the parts of css you want to use in your form. For example: button formatting, input, select, textarea, etc.

  • 1

    there is no way to put this css only in the form tag. It is the complete W3 css. If you choose to use this link, you will have to use all styles applied by W3. Now, one way to maintain your own style using W3’s css is to add the ! Important within your own style. example: . element1{background-color: #f0f ! Mportant}

  • All of a sudden if you put your css after the W3 one it might work because of the css priority. CAN BE AND WON’T BE.

  • @Leocaracciolo worked man! Thank you

  • It’ll be an answer then

  • See the answer I published and learn a little about css priority and read this post https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

Show 6 more comments

1 answer

3


All of a sudden if you put your css after the W3 one it might work because of the css priority. IT MIGHT BE and not necessarily BE. "priority shall be given to those declared last"

Priority of Styles (cascade)

In some cases you can specify different styles for the same page by combining a "file. css" referenced in link or with the insertion of a style tag, and also with inline style attributes. If these different specifications conflict with each other, the browser has to decide which of the values to use. This choice is made based on a priority order (Cascading style Sheets - "cascading style sheets").

This order of priority follows::

  • default
  • browser
  • External CSS (file ". css")
  • Internal CSS (within tag )
  • Inline styles (inside the HTML element )

So, an inline style has the highest priority within the "cascade", which means that it will override over any style declared within the tag in an external file ". css", and in a browser (default value).

SOURCE

Ideally you would incorporate into your style sheet only the parts of css you want to use in your form as well said our friend Alan in the comment and that will bring you only benefits.

When a person enters the site for the first time, the first few seconds are critical to capture the attention and convince them to stay a little longer or to return in the future. If your site takes too long to load, most people give up and leave it, even before you have had the opportunity to show them the value of your service. "A one-second delay can result in 7% fewer conversions, 11% fewer page views, or even a 16 percent decrease in customer satisfaction" BRYAN EISENBERG.

Clean code means faster loading and happy visitors.

It is important to keep load time down by writing semantically appropriate code, using performance optimization best practices and routinely cleaning CSS, HTML and images.

Generally, the loading time of the site will increase with its evolution and this, in a way, is something expected. That’s why it’s important to make this HTML, CSS, and image cleaning routine a natural part of the workflow to ensure a positive user experience.

  • There is also the ! that charges from top priority to style

  • if you build your rules ........

  • 1

    And there’s the other half of the waterfall, which determines precedence according to the selector.

  • CAN BE AND NOT NECESSARILY WILL BE. But the author was satisfied and it worked.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.