When creating and maintaining this website, we occasionally come across coding information that is either confusing or difficult to find from internet sources.
Whilst we do not profess to be coding experts, we have worked out some solutions you may find helpful.
This page includes some of these solutions for 'cascading style sheet' codes.
Cascading style sheet files are used to hold code for the styling features that are used throughout your website.
The inclusion of style code in your html page can affect its SEO rating. It is recommended that you call styling requirement from your css file as much as possible.
'css' files are text files; plain and simple.
You simply create the file in Notepad and save it as a text file (using the UTF-8 formal option) and then change the extension from '.txt' to '.css'
The only things that distinguish it from other text files are:
Its file extension (.css)
and
Its content is in css code
Style names in a css file must not duplicate any such names in your .js files.
HTML files call both 'class' or 'id' names.
When calling either from your css file, the names must be formatted in the css file as follows:
names called under 'class' must be preceded by '.' (a dot) e.g.: .name{position: relative; left: 10px; top: 20px}
and
'id' names must be preceded by a '#' (a hash) e.g.: #name{position: relative; left: 10px; top: 20px}
The difference between the two is that ID="" is used to identify one element and class="" can be used to identify more than one.
An element is an object, image or body of text, and it is positioned on your page using the following instruction in your css file:
.name{position: relative; left: 10px; top: 20px}
There are a number of options for positioning:
static: this is the default option. It puts the element in the 'html' paging code-flow as compiled. If this is what you want then you can ignore calling it unless you wish to apply margins and/or paging.
relative: This option positions your element relative to the parent division (e.g. <div></div>) in which it appears. I.e. the element will remain positioned on the page and scroll with it.
fixed: This option will position the element in the overall Window. I.e. it will remain in that position in the Window even if you resize it or scroll the page. It is positioned in the Window, not your page.
absolute: This option will position the element vertically in the page and horizontally in the Window. I.e. whilst it scrolls with the page it will not move as the window is resized.
sticky: This option alters its priorities between relative and fixed and some browsers don't like it. Best avoided at present.
All of the above can be dimensioned using percentages (%) or pixels (px). You should avoid using negative positioning values.
Whilst we couldn't find any advice on the internet that worked, the following did (for us):
.procedure{display: block; width: wwwpx; padding-left: 50%; margin-left: -mmmpx; float: left;}
where: www is the width (in pixels) of the element you wish to centre and; -mmm = -www/2