Last Revision Jan 30 14

BlueGriffon and Resources

This section written for bluegriffon-1.7.2.win32 - available here and in Downloads

Using BlueGriffon (BG) with HTML & CSS, JavaScript, SVG and MathML.

HTML Editor

Web page development using BG Wysiwyg view:



HTML5 Elements and Attributes

BG main menu File > New for HTML5 page and Insert > HTML5 Element for sub-menu of elements to be placed on page/inserted in document. These elements (in alphabet order) are described (with examples) at html5doctor.com.
Elements can have attributes as explained at w3chools. Following table lists the elements, each with link to w3schools.com that gives descriptions of corresponding attributes with examples;  table entries with Purpose notes probably of more immediate use for web pages/webapps.

a Link
abbr
area Area inside clickable image-map
article
audio
b
bdi
bdo
blockquote
br Single line break
button Clickable type of button
canvas Defer to SVG
cite
code
datalist
dd
del
details
dfn
div Group block-elements for CSS
dl
dt
em
embed Container for external application
fieldset
figcaption
figure
footer
form
h1-h6 Define HTML headings
header
hgroup
hr
i Usually text displayed in italic
iframe Inline frame to embed another document
img Define image in HTML page
input Input types
ins
keygen
label label for input element
legend
li List item
link Link to external style sheet
map Image map, clickable areas
mark
menu
meter Display a gauge
nav
noscript Test Javascript available
object Embed object within HTML document
ol Ordered list
optgroup
option Options for drop-down list
p Paragraph with margins before and after
param Object element parameters
pre
progress Show task progress bar
q Put in quotes (" ")
rp
rt
ruby (East Asian typography)
s Score out
samp
section
select Drop-down list
small
source E.g., video source file
span Link to parts of page, style parts of page etc.
strong
style Style information in head section or with scoped attribute
sub Subscript
summary
sup Superscript
table Tabular information
textarea Multi-line text input or read-only (scrolling)
time
track
ul Unordered list
var
video HTML5 video
wbr



CSS Selectors and Properties

At w3schools.com - CSS selectors and CSS Properties.
BG wysiwyg view and Style Properties panel interact to enable rapid setting of styles for selected HTML element (<div>, <p>, <button> etc., as in 'HTML5 Elements and Attributes' above). In wysiwyg view, click on element to select and, most useful, main menu > Edit > Select... offers F4/shift+F4 keys to step through selection of all elements (tags) present.

In wysiwyg view, Heading ('Tag Selectors') selected and Heading 3 (<h3>) selected from drop-down list (at left, format toolbar). In Style Properties panel > Apply styles to: > all elements of same type... h3 is flagged up (all <h3> tags on the page receive same style properties). In this example, Font Family set for h3 elements on the page. CSS style statement is:
h3 {font-family: Arial, Helvetica, sans-serif;}
Individual element (object) given unique ID for style properties assigned to this element alone. In wysiwyg view, text input (from menu Insert > HTML5 Element...) selected and, in this case, ID entry 'edText' entered in combo box at lower left toolbar. In Style Properties panel > Apply styles to: > this element only through its ID, and the <input id='edText'> is flagged up. In this example, Colors are selected solely for the text input with ID 'edText'. CSS style statement is:
#edText {background-color: #ffff99; color: blue;}
Class 'altInputs' typed in drop-down list at lower left toolbar. From the list, Class name entered for text input, two panels ( <div> tags), input for file upload, and button - each selected in turn and class name set. In Style Properties panel > Apply styles to: > all elements of class. In this example, an element of the class 'altInputs' is selected and Font and Color styles set that apply to all elements of the class. CSS style statement is:
.altInputs { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; background-color: #ffff66; color: blue; }
Given Table (Insert > HTML5 Element > Table) - Do color alternate rows - Need selectors that locate odd and even numbered rows so as to apply alternate colors accordingly. Selector Builder is part of BG CSS Stylesheet Editor - when installed, go to main menu Tools > CSS Stylesheet Editor. In this example, Editor picks up on <style> element in the <head> section (Source view). In CSS Editor, click on <style> in URL column (not shown - left of Rules column), click on table in Rules column and click on plus button (bottom of Rules column) to add Style Rule using Selector Builder. First task here is select all table data (<td> tag) cells in a table row (<tr> tag). In Editor > Selector type td and see all of all elements td. Mouse over top panel shows button 'Add more context to this selector'. Click on this button. The td cells constitute (descend from) a table row. In drop-down lists below all elements td, select descendants of elements of type and follow this with tr. Thus far the Selector shows tr td, but table row selection has to be for successive rows either odd or even in number. Mouse over third panel local to edit box and click on plus button (Add new constraint), then in drop-down list select n-th child and type 'even' in edit box. Selector now shows tr:nth-child(even) td; that means as the table is drawn, check nth row number and if even select all column cells in the row. Mouse over top right of background panel, click on plus button (Add more context to this selector),select descendants of elements of type table and Selector shows table tr:nth-child(even) td. Click on OK and close Selector Builder. Then, with new table rule selected in Rules column of CSS Editor, in Colors section, set Background color. Close CSS Editor, then in Source view see the style rule:
table tr:nth-child(2n) td { background-color: #ffff99;}
For selection of odd numbered table row (so as to set alternate colors) - In Selector Builder, copy the even-row selector and change to n-th child odd. Click OK then with new table rule selected in Rules column of CSS Editor, in Colors section, set Background color. Close CSS Editor, then in Source view see the style rule:
table tr:nth-child(2n+1) td { background-color: #ccffff;}

Style Properties Panel

General
font-family
font-size
line-height
font-weight
font-style
text-decoration
text-transform
font-variant
text-align
vertical-align
text-direction
letter-spacing
word-spacing
word-wrap
text-indent
Colors
text-color (foreground)
background-color
Geometry
width
height
min-width
max-width
min-height
max-height
padding-top
padding-left
padding-bottom
padding-right
margin-top
margin-left
margin-bottom
margin-right
Position and Layout
display
visibility
float
clearance
overflow
text-overflow
position
z-index
offset top
offset left
offset bottom
offset right
Borders
top color
top width
top style
left color
left width
left style
bottom color
bottom width
bottom style
right color
right width
right style
top left corner (radius)
top right corner (radius)
bottom left corner (radius)
bottom right corner (radius)
Shadows
text shadow
box shadow
Lists
type
position (markers)
image (markers)
Transformations
transform origin
perspective origin
perspective depth
transform style
backface visibility
rotation, translation, skew, scale
Transitions
property, duration, function, delay
Flexibility
flexibility
Columns
count
width
gap
rule-color
rule-style
rule-width
Tables
table layout
caption position
table borders
border spacing
empty cells
Miscellaneous
cursor
unicode bidi
orphans
widows
page break before
page break inside
page break after
BG wysiwyg view - main menu > Panels > Style Properties.

Table at right corresponds to the collapsable sections of the Properties panel. Style properties in the table are linked to w3schools.com CSS Property reference pages - definitions and instructions for use, browser support, property values with demos.

Stylesheets Panel

BG facilitates internal and external style sheets with the
Stylesheets panel: BG wysiwyg view - Main menu > Panels > Stylesheets. Plus (+) button, bottom of panel, shows stylesheet properties dialog that determines internal stylesheet (embedded in document) or external new or existing (.css) file selection. When external stylesheet selected, click on dialog OK does write link in head section, e.g., <link href="stylesheet.css" rel="stylesheet" type="text/css"> or does write
<style type="text/css">...</style>
for embedded style properties.
Stylesheets panel shows list of .css file name(s) and/or <style> tag for internal stylesheet. In the panel list, click on file or <style> to select enables up/down arrows (panel bottom right) that change list order; for instance, change embedded <style> written before or after <link>, and this may change CSS styling of the page.
In the Stylesheets panel, double-click on list item opens editor (example shown at right) for .css file or <style>...</style> statements in Source view. Edit changes (when Commit changes button pressed) are reflected in wysiwyg view and changes are committed to the .css file or head section of HTML page. Not generally necessary to use editor except, usefully, for reviewing style sheets - Using BG Style Properties is the way to rapidly apply style rules with the real advantage of having CSS statements written to file or on HTML page, without editing.

CSS References

Contact originator