In HTML are the attributes like
<input class="new" type="text" name="title" id="title2" />
and in CSS do I see
.something { ... }
#something { ... }
What is id= name= .something #something used for?
ID: unique identifier for the DOM element
Name: name to be used when submitting a form which is used as the data retrieval key
#something: reference to element with ID 'something'
.something: reference to element(s) with classname 'something'
These are some really basic concepts of HTML and CSS. You will probably want to read a basic HTML tutorial to find out more on the subject, especially the attributes section.
Id's and classnames are primary used for styling elements with CSS and adding behaviour to them with JavaScript. For example:
HTML:
<button id="foo">Click me to unleash the Unicorn</button>
CSS:
#foo {
border: 1px solid #ff0000;
font-weight: bold;
background: #000;
color: #fff;
}
JavaScript:
document.getElementById('foo').onclick = function() {
var img = document.createElement('img');
img.src = 'http://display.ubercomments.com/6/23672.jpg';
document.getElementsByTagName('body')[0].appendChild(img);
};
See also, this beautiful example (Unicorn included).
An id attribute is a unique identifier for the element within the DOM. It's unique in the sense that you cannot have more than one element with this ID contained within the document.
Styling an element based on ID is done using #something.
A name attribute is simply a non-unique name for this element. This is most commonly used in forms as the name that gets POST'd or GET'd through to the server side language.
.something is the style selector for the class= attribute on any element.
For instance, you could style the following element: <div class="testclass" name="testname" id="testid"></div> in any of the following 3 ways:
.testclass {
background-color: black;
}
#testid {
background-color: black;
}
div[name="testname"] {
background-color: black;
}
Remember, both a class and a name are NOT unique, so they can be used to style and define multiple elements.
The .something is a class, and the #something is an id.
the Name= attribute is commonly used in forms, and usually not used in CSS.
In other words, the following code:
<body class="thisisaclass">
<div id='thisisanid'></div>
<div class='thisisanotherclass'></div>
</body>
Would result in a CSS that looks like this:
.thisisaclass {..Code..}
.thisisaclass #thisisanid {..Code..}
.thisisanotherclass {...code...}
Classes are used for repeating stuff, for example if you want to use the same type of text formatting in several areas of your page - whereas ids only should appear once in the html code.
Check out HTMLDog to learn more, it's a great start :)
id="something" means ID. You can have it only once. It's CSS reference is #something. Also, by using #something at end of address, you can directly move browsers to that ID, without using JS.
name= is used while sending form. Using PHP, you can check that value by using $_REQUEST['title']. In other programming languages, there also are methods to get that value.
.something is class in CSS. It's used to style HTML elements with class="something"
class is multiple selector for example if you want many tables have same colors, back ground colors and font etc. You will define class.
In these tables if a specific table is to style in different way you will use id. Id can not be duplicated. And you can assign a same class to as many objects you want.
<style type="text/css">
.MyTable{
background-color:#ff00ff;
}
#centralTable{
background:color:red;
}
</style>
<div class="MyTable">Data </div>
<div class="MyTable"> </div>
<div class="MyTable" id ="centralTable"> Data</div>
<div class="MyTable"> Data</div>
<div class="MyTable">Data </div>
Remember classes are followed by period (.) and Ids (#) in Cascading Style Sheets.
Related
I'm using the following HTML code:
<div class="p-col-fixed" style="width:150px">First line:</div>
For column alignment, I have to use width:150px in many places on the same HTML page.
How can I use a #define? In CSS?
I think you are comparing the scripting language with one of the programming languages that use the #define directive.
In CSS, we have class selector for that (in case you need to use that property on multiple places in the HTML.Class selectors are defined by placing a (.) dot before the name of the class selector and are used by specifing them as a value to the class attribute.
E.g.
CSS
.cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed cust-width">First line:</div>
Another feature is the "id" which is used to further refine the selection and add additional properties to the selected class.IDs are generally used in cases when the change is required in fewer classes/tags.IDs are defined using (#) before the name of ID selector in CSS
E.g.
CSS
#cust-width
{
width:150px;
}
HTML
<div class="p-col-fixed" id="cust-width">First line:</div>
For your use-case, classes are ideal.Provided that change is required in multiple parts of the HTML.
Html:
<div class="p-col-fixed define">First line:</div>
css:
.define
{
width:150px;
}
Why go in all that trouble? Simple solution is to create a CSS class and use it anywhere you need in your html file.
CSS
.width-150 {
width: 150px;
}
HTML
<div class="p-col-fixed width-150">First line: </div>
You can create a class in css and then add it in the div.
css file:
.width150 {
width:150px;
}
Then, in your html file add the class
<div class="p-col-fixed width150 " >First line:</div>
Use class if you want to add style to multiple elements.
Use id if you want to style only one element.
The best approach would be to add a class to the element first
Example : custom-width
HTML:
<div class="p-col-fixed custom-width">First line:</div>
CSS :
.custom-width
{
width:150px;
}
Can I use space to separate two id's?
<div class="g2 ">
<input type="text" id="noPosting number_only" disabled="true" name="post_every" value="" class="txt_r integer-365"/>
</div>
Putting a space in the ID value doesn't automatically make them two different IDs for the element. They can still be selected in CSS through #noPosting\ number_only (notice the \ which escapes the blank space). They can also be selected in Javascript through something like document.getElementById('noPosting number_only').
#noPosting\ number_only {
background-color: yellow;
}
<div class="g2 ">
<div id="noPosting number_only">test</div>
</div>
If you need to have separate selectors, it is better to use a class selector instead. Alternatively, you could use the attribute selector to select such an element through the two parts of the value. See the example below:
[id*=noPosting] {
color: red;
}
[id*=number_only] {
background-color: yellow;
}
<div class="g2 ">
<div id="noPosting number_only">test</div>
</div>
You can read more about this here: What are valid values for the id attribute in HTML?
No, only one unique ID will work in HTML per element. But you can use more than one class in a single element in HTML, separated by space.
I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.
So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.
Sometimes, form items have a "name" or "value" attribute:
<input type="submit" value="Go" name="goButton">
Is there a way I can apply a style based on name="goButton"? What about "value"?
It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.
I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?
Any advice would be greatly appreciated.
You can use the attribute selector,
input[name="goButton"] {
background: red;
}
<input name="goButton">
Be aware that it isn't supported in IE6.
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
http://reference.sitepoint.com/css/attributeselector
Text Input Example
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
For future googlers, FYI, the method in the answer by #meder , can be used with any element that has a name attribute, so lets say theres an <iframe> with the name xyz then you can use the rule as belows.
iframe[name=xyz] {
display: none;
}
The name attribute can be used on the following elements:
<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
Using [name=elementName]{} without tag before will work too.
It will affect all elements with this name.
For example:
[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>
If i understand your question right then,
Yes you can set style of individual element if its id or name is available,
e.g.
if id available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
input[type=text] {
width: 150px;
length: 150px;
}
input[name=myname] {
width: 100px;
length: 150px;
}
<input type="text">
<br>
<input type="text" name="myname">
This is the perfect job for the query selector...
var Set1=document.querySelectorAll('input[type=button]'); // by type
var Set2=document.querySelectorAll('input[name=goButton]'); // by name
var Set3=document.querySelectorAll('input[value=Go]'); // by value
You can then loop through these collections to operate on elements found.
if in case you are not using name in input but other element, then you can target other element with there attribute.
[title~=flower] {
border: 5px solid yellow;
}
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_flwr.gif" title="flowers" width="224" height="162">
hope its help. Thank you
have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).
It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.
I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.
So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.
Sometimes, form items have a "name" or "value" attribute:
<input type="submit" value="Go" name="goButton">
Is there a way I can apply a style based on name="goButton"? What about "value"?
It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.
I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?
Any advice would be greatly appreciated.
You can use the attribute selector,
input[name="goButton"] {
background: red;
}
<input name="goButton">
Be aware that it isn't supported in IE6.
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
http://reference.sitepoint.com/css/attributeselector
Text Input Example
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
For future googlers, FYI, the method in the answer by #meder , can be used with any element that has a name attribute, so lets say theres an <iframe> with the name xyz then you can use the rule as belows.
iframe[name=xyz] {
display: none;
}
The name attribute can be used on the following elements:
<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
Using [name=elementName]{} without tag before will work too.
It will affect all elements with this name.
For example:
[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>
If i understand your question right then,
Yes you can set style of individual element if its id or name is available,
e.g.
if id available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
input[type=text] {
width: 150px;
length: 150px;
}
input[name=myname] {
width: 100px;
length: 150px;
}
<input type="text">
<br>
<input type="text" name="myname">
This is the perfect job for the query selector...
var Set1=document.querySelectorAll('input[type=button]'); // by type
var Set2=document.querySelectorAll('input[name=goButton]'); // by name
var Set3=document.querySelectorAll('input[value=Go]'); // by value
You can then loop through these collections to operate on elements found.
if in case you are not using name in input but other element, then you can target other element with there attribute.
[title~=flower] {
border: 5px solid yellow;
}
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_flwr.gif" title="flowers" width="224" height="162">
hope its help. Thank you
have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).
It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.
I'm making a web page where I want the color of the font to be red in a paragraph but I'm not sure how to do this.
I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?
<p style="color:red">Foo</p>
Or preferrably:
<p class="error">Foo</p>
Where "error" is defined in your stylesheet:
.error {
color: red;
}
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="hilight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
Brief CSS Explanation :
Since most of the answers you're getting are all mentioning CSS, I'll add a small guide on how it works:
Where to put CSS
First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:
<style type="text/css"> <!-- Your CSS here --> </style>
This is called embedded CSS since it's inside the document. However, a better practice is to link "include it" directly from an external document by using the following tags:
<link href="file.css" media="all" rel="stylesheet" type="text/css"/>
Where file.css is the external file you want to include into the document.
The benefits of using the "link" tag is that you don't have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.
This two ways of including CSS are the most recommended ways. However, there's one more way that's by doing in-line CSS adjustments, for example:
<[tag] style="<!-- CSS HERE -->"> Content </[tag]>
CSS General Structure
When you code write CSS, the first thing you need to know is what are classes and what are id's. Since I already mentioned what they do above I'm going to explain how to use them.
When you write CSS you first need to tell which elements you're going to "select", for example:
Lets say we have a "div" element with the class "basic" and we want it to have a black background color, a white font, and a gray border.
To do this we first need to "select" the element:
.[identifier] { }
Since we're using a class we use a "." in front of the identifier which in this case is: "basic", so it will look like this:
.basic { }
This is not the only way, because we're telling that ANY element that has the class "basic" will be selected, so lets say we JUST want the "div" elements. To do this we use:
[html-tag].[identifier] { }
So for our example it will look like this:
div.basic { }
Now we've selected the "div" with the class "body". Now we need to apply the visual style we wish. We do this inside the brackets :
div.basic {
background-color:black;
color:white;
border:1px solid gray;
}
With this, we just applied successfully a visual style to all "div" elements that have the "basic" class attached.
Remember this doesn't just apply for "class" it also applies for "id" but with a slight change, here an example of the final code but instead of a class we'll just say it's a "id"
#unique-basic {
background-color:black;
color:white;
border:1px solid gray;
}
For a complete guide to CSS you can visit this link:
http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
<style type="text/css">
.myCSS
{
color:red
}
</style>
<div class="myCSS">text</div>
<span class="myCSS">text</span>
<p class="myCSS">text</p>
<!-- table elements..... -->
<td class="myCSS">text</td>
<tr class="myCSS">text</tr>
<p style="color:red">Your Text here</p>
But as others have by now said in more and better words: Even better than the above would be to use classes or IDs and assign the CSS-attributes to that instead of using the inline style.