dev_guide.templates.css.html

<h1>Developer Guide: Templates: Working With CSS in Angular</h1>
<div class="developer-guide-templates-working-with-css-in-angular"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<p>Angular includes built-in CSS classes, which in turn have predefined CSS styles.</p>

<h2>Built-in CSS classes</h2>

<ul>
<li><code>ng-exception</code></li>
</ul>

<p><strong>Usage:</strong> angular applies this class to a DOM element if that element contains an Expression that
threw an exception when evaluated.</p>

<p><strong>Styling:</strong> The built-in styling of the ng-exception class displays an error message surrounded
by a solid red border, for example:</p>

<p><div class="ng-exception">Error message</div></p>

<p>You can try to evaluate malformed expressions in <a href="#!/guide/dev_guide.expressions">expressions</a> to see
the <code>ng-exception</code> class' styling.</p>

<ul>
<li><code>ng-validation-error</code></li>
</ul>

<p><strong>Usage:</strong> angular applies this class to an input widget element if that element's input does not
pass validation. Note that you set the validation criteria on the input widget element using the
Ng:validate or Ng:required directives.</p>

<p><strong>Styling:</strong> The built-in styling of the ng-validation-error class turns the border of the input
box red and includes a hovering UI element that includes more details of the validation error. You
can see an example in <a href="#!/api/angular.widget.@ng:validate"><code>ng:validate example</code></a>.</p>

<h3>Overriding Styles for Angular CSS Classes</h3>

<p>To override the styles for angular's built-in CSS classes, you can do any of the following:</p>

<ul>
<li>Download the source code, edit angular.css, and host the source on your own server.</li>
<li>Create a local CSS file, overriding any styles that you'd like, and link to it from your HTML file
as you normally would:</li>
</ul><div ng:non-bindable><pre class="brush: js; html-script: true;">
&lt;link href="yourfile.css" rel="stylesheet" type="text/css"&gt;
</pre></div><h3>Related Topics</h3>

<ul>
<li><a href="#!/guide/dev_guide.templates">Angular Templates</a></li>
<li><a href="#!/guide/dev_guide.templates.css">Working With CSS in Angular</a></li>
<li><a href="#!/guide/dev_guide.templates.formatters">Angular Formatters</a></li>
<li><a href="#!/guide/dev_guide.templates.formatters.creating_formatters">Creating Angular Formatters</a></li>
</ul></div>