A style sheet is a document that contains the specifications that define the Web pages look and that allows separating an HTML document content from its aesthetic presentation.
The HTML makes reference to the styles sheets that contain the page's aesthetic details, which are transferred to the client and even stored in his cache, to speed up the browsing.
For further information on the style sheets, please refer to the following links:
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2/
Basically, a Cascading Style Sheet includes a group of rules that specify a documents presentation. Each rule is made up by a "selector" and a "style" that applies to the selector as follows:
selector { property: value }
Selectors may be HTML elements (such as BODY, P, EM, etc), Classes, or combinations of both.
Class Selectors allow associating different styles to the same HTML element by means of the CLASS HTML attribute, as follows:
This is the FreeStyleGrid class:
.FreeStyleGrid
{
border-width: 0px;
border-style: none;
}
This is the HTML generated, so as the freestyle grid will take the FreeStyleGrid class settings.
<table id="GRID1" cellspacing="0" border="1" class="FreeStyleGrid">
To configure it in
GeneXus , just modify the FreeStylegrid properties in the Theme Editor.
Afterwards, associate this class to the FreeStyleGrid control in
GeneXus . In the FreeStyleGrid properties associate the corresponding class to the Class property:
You can also add derived classes from the predefined ones, for more information, see:
The W3C defines class ID as "a unique identifier to an element".
CSS IDs are similar to classes in that they define a special case for an element.
They assign an identifier for an element.
Example of a CSS ID.
CSS Code:
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
HTML Code:
<p id="ExampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p>
<p id="ExampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. </p>
How can I configure it in the Theme Editor?
By rigth clicking in the "HTMLNodes" node or in a descendant of it, and selecting "New Id".
This is achieved in
GeneXus by defining HTML tags.
By rigth clicking in the "HTMLNodes" node or in a descendant of it, and selecting "New Tag".
Pseudo-elements are used in CSS to add different effects to some selectors, or to a part of some selectors.
The syntax of pseudo-elements:
selector:pseudo-element {property: value}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property: value}
How do I use pseudo elements in GeneXus?
By rigth clicking in the HTML nodes, selecting New Tag, the following dialog appears:
Then, you can select the pseudo element associated to that Tag.
Note that you can make a combination with classes, and Ids, besides the pseudo elements, for any tag.
In
GeneXus 8.0 (version 1.0 of Theme Editor) you can:
· Define derived classes from the predefined ones. This classes can be associated to
GeneXus controls. For example, create a new class under the "FreeStyleGrid" class. You can do it by the contextual menu of the FreeStyleGrid class.
· Define HTML tags, and make a hierarchy of TAGS. This is called "Contextual Selectors". For example, if we wanted only 'EM' elements within 'H1' to turn red you do it by adding an H1 HTML tag, and an EM HTML tag as its child, and then configure its properties:
So, the CSS you obtain is the following:
H1 EM
{
color: #FF0000;
font-family: "Arial Narrow";
font-size: 4pt;
font: italic small-caps bold 4pt "Arial Narrow";
font-style: italic;
font-variant: small-caps;
font-weight: bold;
}
Look at this example, in this case, you want only H1 elements which have pastoral class associated, to take the color settings.
In the .CSS
H1.pastoral { color: #00FF00 }
In the .HTML
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
With the Theme Editor version 2.0 you can achieve it!
In the previous version, only HTML Tags could be added to the Editor. Now, by adding Custom Classes, we can combine Custom classes and HTML Tags. In this way, we can combine contextual selectors, with class selectors, establishing a hierarchy in which you want the browser to apply the settings. For example, you can make an entry in the CSS as the following:
CustomClass1.CustomClass2 HTMLTag {}
This hierarchy specifies the HTMLTag node, where one of its ancestors has the class='CustomClass2' attribute defined, which at the same time has an ancestor with class='CustomClass1'.
Example:
In the .CSS:
.CustomClass1 .CustomClass2 A
{
color: #ff0000;
}
In the .HTML:
<html>
<body>
...
<table class="CustomClass1">
...
<tr class="CustomClass2"><td><a href='genexus.com'>Sitio GeneXus</a></td>...</tr>
...
</table>
...
</body></html>
II. Basically, you can make distinctions like the following:
Suppose you have in the CSS the follwoing entry:
>>. TABLE.ActiveRow {property: value}
and the follwing:
>>. TABLE .ActiveRow {property: value}
Those expressions are different. In the first, the properties apply to a TABLE with class="ActiveRow"
In the second one, the properties apply to any element with the class="ActiveRow" assigned, and which is defined within a TABLE tag.
III. CSS elements containing pseudo elements can also be defined.