Member Avatar for mattyd

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
  • 202 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Bensirpent07

Recommended Answers

All 5 Replies

Member Avatar for gentlemedia

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
Member Avatar for mattyd

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).

Member Avatar for mattyd

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>

`

Member Avatar for gentlemedia

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
Member Avatar for Bensirpent07

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.