0

Hello.

I am currently attempting to convert my inline-css for text boxes into classes for my external style sheet; I thought of using class selectors but do not fully understand some aspects of them.

An example I found online:
`

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

`

After creating the class (In this case, .center), it is applied as this:

  • h1
  • p

I need to apply the class to textboxes at this point. Is that possible using a class? Can anything precede the "class" such as "textbox class=", for example?

Thank you in advance!
Matthew

Edited by mattyd

3
Contributors
5
Replies
32
Views
2 Years
Discussion Span
Last Post by Bensirpent07
0

What do you mean with 'textboxes'? For example a div tag, section or article?

If you give it a class center, then every element/tag inside will be centered and red (they inherit the styles if you don't override them).

Edited by gentlemedia

0

Textboxes: I am styling textboxes on my registration form/ index page using CSS.

At this time, it is all in-line CSS; I would like to convert that at some point to an external style sheet and I assume I should use something such as a class to style ALL of the textboxes on the page exactly the same (Instead of including in-line CSS for each textbox, seperately).

0

This code is an example of what I am using for each textbox (I have about 10 textboxes on the page and want to consolidate it somehow)

`

Username:<br />
<input type="text" id="user_input" name="username" style="width:196px;     margin-bottom: 10px; background-color: #414141; color: #FFFFFF;"/><br>

`

1

Ohkay... I see :) You mean an input field.

Using classes or the element/tag name itself (in some cases) to hook your external styles on instead of inline styles, is indeed the the way to go, because you're repeating now styles, which makes maintaining the site more work and the HTML looks messy (according to code artists :) ).

I would do your example like this:

HTML

/* label for accessibility */
<label for="username">Username:</label>
<input type="text" name="username" />

CSS:

input[type=text],
label { display: block }

input[type=text] {
    width:196px;
    margin-bottom: 10px;
    background-color: #414141;
    color: #FFF
}

Edited by gentlemedia

0

To answer your question about classes, yes you can apply classes to any tag. You can also use ID's which are basically the same. Here would be an example:

HTML (Side Note: Remember the class name can be anything you desire):

Username:<br />
<input class="textbox" type="text" id="user_input" name="username"/><br>

CSS:

input.textbox {
    width:196px;
    margin-bottom: 10px;
    background-color: #414141;
    color: #FFFFFF;
}

Now if you wanted to use ID's you could just do this:
HTML:

Username:<br />
    <input type="text" id="user_input" name="username"/><br>

CSS:

input#user_input {
    width:196px;
    margin-bottom: 10px;
    background-color: #414141;
    color: #FFFFFF;
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.