Simplicty and flexibility!
Cart | |
Contact
| Download | Register| Sign In


Knowledge::Object

HTML Styles - CSS
DataEase 8 WebFields/HTMLEdit only. DG3 ALL!
CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

Inline - using the style attribute in HTML elements
Internal - using th

CSS (Cascading Style Sheets) is used to style HTML elements.

Try it yourself

Examples

Try it Yourself - Examples

Using styles in HTML
How to add style information inside the <head> section.

Link that is not underlined
How to make a link that is not underlined, with the style attribute.

Link to an external style sheet
How to use the <link> tag to link to an external style sheet.

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

  • Inline - using the style attribute in HTML elements
  • Internal - using the <style> element in the <head> section
  • External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.

You can learn everything about CSS in our CSS Tutorial.

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

To learn more about style sheets, visit our CSS tutorial.

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>


Try it yourself »

The background-color property makes the "old" bgcolor attribute obsolete.

Try it yourself: Background color the old way

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>


Try it yourself »

The font-family, color, and font-size properties make the old <font> tag obsolete.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>


Try it yourself »

The text-align property makes the old <center> tag obsolete.

Try it yourself: Centered heading the old way

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


HTML Style Tags

TagDescription
<style>Defines style information for a document
<link>Defines the relationship between a document and an external resource

Deprecated Tags and Attributes

In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.

Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.

Parameters


Returns/Result


Examples


Reference

See Also


On the forum about HTML Styles - CSS

[@EOF@]...

Product: . Written by alembagheri tahmas 07/12/13 at 13:37:32

Hi there,I am trying to use an external MySQL DB in dataease. I have successfully create the ODBC link and added the DB to dataease. I can also access the DB from dataease. Now, just for testing purposes, I am trying to create a simple report b...

Product: DataEase for Windows 7.x. Written by George Washington 11/04/14 at 08:26:17

no se pude exportar ahora archivos a pdf, ni a excel o otros cosa mala. en verdad creo que hace faltaen las versiones anteriores me funcionaba mas o menos bien.&nbsp;le hace falta a los aplicativos que se desarrollan en Dataeasegr...

Product: DataEase 8 Reporter. Written by eduardo paez 02/05/14 at 14:40:11

Thanks. Anyway I'm trying to use this fuction but it seems to me that it doesn't work on 8.2. I tried also in a DQL.There's something wrong?<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9IAAAJ3CAYAAAB4NWk3AAAAAXNSR0IArs4...

Product: . Written by Marco Marchesi 15/02/16 at 14:50:46

[@EOF@]...

Product: Dataease [{8}]FIVE. Written by Chamil Rajindra 21/02/19 at 10:17:46

Thanks for the very good explanation!AS...

Product: . Written by afonso santos 28/10/19 at 00:50:14

I am pleased to see that the migration from Dos 4.53 is then sa 5.5 works. A really useful thing would be a compiler of SQL languages. Will you get there?Original Text:Mi compiaccio a vedere che la migrazione da Dos 4.53 è poi sa 5.5 funzio...

Product: . Written by Grossi Gioacchino 18/11/19 at 14:33:44

How can i delete a Style sheet?...

Product: Dataease [{8}]FIVE. Written by Rainer 22/03/21 at 11:13:10

I run W7 and since a few days&nbsp;Dataease 8.5 is not starting any more, do you have an idea? i installed it again but that did not help....

Product: Dataease [{8}]FIVE. Written by Rainer 08/06/21 at 14:12:40

[@EOF@]...

Product: . Written by Hiralal Rampul 01/12/21 at 17:47:10

On the blog about HTML Styles - CSS


dg3_HelpView