I'm learning CSS, How can i style a submit button using external css. I am trying something lik-CodePudding

how can i style a submit button using a external css file it is the code

<div >
<form action="#">
<button type="submit"  value="submit">Log in</button>
</form>
</div>

CodePudding user response：

.but {
  background: lightBlue;
  padding: 10px;
 }

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div >
    <form action="#">
        <button type="submit"  value="submit">Log in</button>
    </form>
</div>

</body>
</html>

There are three ways we can use css to style your component

Inline
Internal
External

These the ways are clearly explained in https://www.w3schools.com/html/html_css.asp

Since you are learning css , this also will hlep to you. https://www.webucator.com/article/how-to-create-a-css-external-style-sheet/

If you need an external style sheet,

Create a style.css file
Link that using style tag inside your html component head tag

CodePudding user response：

firstly import the file at the top of the html file, like this: <link rel="stylesheet" href="mystyle.css">. REPLACE mystyle.css with your file. After that in the css file, add ```.but`{}``, and finally add the style in the curly brackets.

CodePudding user response：

Since you are getting started it will be much simpler to include the styles in the HTML. This is how you can embed CSS styles in HTML

<style>
 button {
  color: read;
  background: green;
  padding: 5px;
 }
</style>

<div >
<form action="#">
<button type="submit"  value="submit">Log in</button>
</form>
</div>