CODEWITHSUNDEEP
htmlcss
bob dylan
bob dylan

Reputation: 677

Why is my CSS code not working in my HTML file?

I am trying to put my CSS code in the same file as my HTML code, but it does not display properly (I do not want to just link my CSS to my HTML, I already got that to work). I have tried copying and pasting the code, but that does not work. Do I have to do it differently when it is in the same file?

Here is the relevant code: 

<head>

    <title> Example </title> 

    <style type="text/css">

        input: textarea{
            resize: none;
        }
        input[type=button]{//set the sizes for all of the input buttons
            width: 5em;  
            height: 2em;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <form id = "mainForm" name="mainForm" method="get" action=""  onsubmit=" return checkForm()">


        Type something: <br> <textarea id="info" name="info" > </textarea>


        <input type="button" value="1" id="button1"> </input> 
        <input type="button" value="2" id="button2"> </input> 
        <input type="button" value="3" id="button3"> </input> 

        <input type="submit" id="submit" name="submit" class="btn" value="Submit" />
        <input type="reset" id="reset" name="reset"  class="btn" value="Clear" />
    </form>
</body>

Here is a pic of how it looks when I link it enter image description here

And here is a pic of how it looks when I try putting the CSS in the HTLM file enter image description here

Upvotes: 0

Views: 85

Answers (2)

bakki
bakki

Reputation: 314

no need to specify input just textarea . you can even use inline css for textarea. 

<style type="text/css">

        textarea{
            resize: none;
        }
        input[type=button]{
        width: 5em; height: 2em;
            font-size: 15px;
            font-weight: bold;
        }
    </style>

Upvotes: 1

You Old Fool
You Old Fool

Reputation: 22941

Works for me. Only problem I see is input: textarea is invalid. Just use textarea instead.

<head>
    <title> Example </title>
    <style type="text/css">
        textarea{
            resize: none;
        }
        input[type=button]{ //set the sizes for all of the input buttons
            width: 5em;  
            height: 2em;
            font-size: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="mainForm" name="mainForm" method="get" action="" onsubmit="return checkForm()">
        Type something: <br> <textarea id="info" name="info" > </textarea>
        <input type="button" value="1" id="button1">
        <input type="button" value="2" id="button2">
        <input type="button" value="3" id="button3">
        <input type="submit" id="submit" name="submit" class="btn" value="Submit">
        <input type="reset" id="reset" name="reset"  class="btn" value="Clear">
    </form>
</body>

Upvotes: 1

Related Questions