Is it possible/permissible to refer to 2 css classes from within a text area like below:
with section 1 and section2 being classes from a css file. Hope someone can advise. Thank you.
Yes you can, both in the style sheet and in your HTML, I've used div for demonstration purposes, but the same applies to textarea
.section1 {font-weight:bold;}
.section2 {font-style:italic;}
.section1.section2 {color:#f00;} /*Will only apply if both classes present*/
<div class="section1">I'm bold</div>
<div class="section2">I'm italic</div>
<div class="section1 section2">I'm bold, italic and red!</div>
In HTML seperate multiple classes in the attribute with a space. To join multiple classes in your CSS have no speration between them
What do you mean from within a text area? Do you mean something like the following...
<textarea class="section1 section2"></textarea>
Or do you mean CSS within the textarea itself? If so that's not possible because all you're typing into it is plain text. But you could target that text, for example...
textarea.section1 { }, textarea.section2 { } or textarea.section1, textarea.section2 { }
Yes! it is possible to refer any number of classes within any html tag.
Ex:<textarea class="section1 section2 section3"></textarea>
and please provide space to separate the different classes html does not recognise if you use semicolon to separate the classes.
You can write both the classes without comma like
<textarea class="section1 section2"></textarea>
Now provide CSS code in your CSS file seperately.
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;
}
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.
I'm working in a content management system that allows me limited (no) access to the stylesheets, but does allow me to insert CSS into certain templates. So I have this:
<div class="inside_widget">
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
<div class="input"><span class="form_label">Form stuff</span></div>
etc...
</div>
Where inside_widget, input, and form_label are all defined in a sheet I can't touch. I want to put some custom CSS on "form_label" without having to touch every single span.
I tried using the style attribute in the containing div, but that did not work.
<div class="inside_widget" style=".form_label {color:#FFFFFF;}" >
Note: I want to retain everything else in the inside_widget styling, and not have to define a whole new class.
I think what the OP is trying to achieve is not having to repeat the style="" attribute for every single <span> in his form.
This can be done by simply adding your own class name to the enclosing div's classes:
<div class="inside_widget myclass" ...>
<!-- ... -->
</div>
Then make your own secondary stylesheet and define myclass:
.myclass span
{
color: #ffffff;
}
You can put this secondary CSS either in a <style> tag in the HTML itself, or in its own CSS file linked in.
You could do it this below.
<span class="form_label" style="color:#FFFFFF;">Form Stuff</span>
Inline styles like this will overwrite any css rules in a stylesheet, unless in the stylesheet they have a rule with !important
you do not know css right? will look like
<div class="inside_widget" style="color:#FFFFFF;" >
but I suggest you create a new css file and add whatever you want in the same
I have some classes that are used for Styling and all of them display using block mode.. I would like to convert them all to inline.. Is there a simple way to convert them all to inline, instead of manually going to each class to convert them individually to inline...
Section of your code:
<div class="contentbody">
<p>
Register here!
</p>
<a href="{% url 'parent_register_step1' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Register
</div>
</a>
<p>
Forgot your password?
</p>
<a href="{% url 'parent_forgot_password' %}"
class="bbutton textshadowclass boxshadow">
<div class="boxshadowinset green">
Reset Password
</div>
</a>
</div>
I would like to change the classes bbutton, textshadowclass, box shadow, boxshadowinset green into inline.. What is the simplest way?
Note: This classes are used in other sections of the page. I would like to change the certain section to be inline only. It shouldn't affect the whole page...
Let me explain more in detail what i am doing:
I would like to convert this into inline such that the register and reset password appear on the same line...
To only select the classes that are instead the contentbody class, you need a CSS element>element Selector:
div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
display: inline;
}
(add more classes to the list if you want others included as well)
Additional note: If you permanently need these classes to be inline, then I would suggest to just (once) going to each class and add an inline class to each element, this keeps your code clearer in the long run.
Edit:
use the union selector (sorry I cannot find a more official link) to select elements that have multiple classes set:
div.contentbody>.boxshadowinset.green {
display: inline;
}
Note the . (and no space) between boxshadowinset and green
I do believe this is supported by modern browsers, but IE6 does seem to have some problems with it.
One way is just to apply an id to your wrapping element.
<div class="contentbody" id="contentbody">
Then in your css, add the styling
div#contentbody a, div#contentbody div{ display: inline; }
Due to CSS Element Hierarchy, they will all take the inline style rather than their own style.
Basic example here. http://jsfiddle.net/H97c5/2/
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.