Best description I have read about these three technologies is:
HTML5 – Defines the content
CCS3 – Defines the appearance
Necessary basics for beginners.
Learning all of the various HTML tags and there attributes is obviously required, and I am not going to detail those here. However there is one over arching piece of information that is important when designing and that is understanding the document flow, the HTML elements that participate in document flow and those that do not. (Indeed to make it even more confusing, that elements that normally participate in document flow can be removed from the flow by setting their display attribute).
Document Flow defines how HTML elements order and present themselves when displayed. For example you may want an image to appear in-line in a sentence, or have the image appear to the side with the words flowing around, or even the image acting as a background.
So first thing which elements / tags do NOT – EVER impact document flow.
<head> – and any elements that are included in the Head section
The way that other element participate in document flow can be affected by their display attribute, which can have a host of values, (see: https://www.w3schools.com/CSSref/pr_class_display.asp), but those most commonly used to affect document flow are:
none – removes the element from participating in the document flow.
inline – Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block – Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
inline-block – Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
DIV & Positioning
I did have a problem positioning and sizing <div> elements. When I was last into HTML, to get the layout you needed you used tables and tables within tables. Today, quite rightly, tables are used for what they where intended, and layout is all about <div>. So what are the positioning and sizing problems?
<div> is a block element. The width of a block level element, unless set explicitly, is 100% of its containing element. Similarly its height, unless defined explicitly, is defined by its content. No content -> no height -> nothing visible. So if you are wondering why when you have set the background of your <div> element (to say an <img>) and the <div> element is not displayed, it is possibly because the <div> has no content and hence no height or width. Judging by the Web, this seems to be a common mistake.
Second is the position attribute, or rather the relative value of position. With position:relative the <div> element (indeed any element) is still participating in the document flow. So regardless of where it is moved to (i.e. displayed), it still leaves the space where it was in the flow. With position:absolute that is not the case. The element is removed from the document flow. That change in behaviour between position:relative and position:absolute does make a huge difference as to when you use one over the other. The choice of which to use is not just about the reason you want an element located where you do, but also how you want it to behave.
Loading HTML snippets
I remember when I was developing web pages back in the late 1990’s one issue was that standard Headers and Footers had to be either manually copied to every page (and updated on every page!), or else loaded dynamically using server-side programming. Guess what? We are still in that situation today. I notice that an RFC for this functionality has been submitted to the W3C. I haven’t read the RFC, so cannot comment on its suitability, but I do hope that, if not this proposal, then something that supplies this functionality is approved soon – and then implemented in the Browsers in short order.
The title bar on the Quintic pages have the ‘Q’ in Quintic displayed in a larger font than the rest of the text. Originally I did this manually, that is ‘Q’ and ‘uintic’ were separate words, and I manipulated the fonts, margins and alignments to get the effect I wanted.
I then came across CSS Pseudo-Classes and Pseudo-Elements https://www.w3school.com/CSS/css_pseudo_elements.asp . Specifically the first-letter pseudo-element. At first glance this was exactly what I needed. So I:
Created a CSS .LogoText::first-letter definition (.LogoText being the class for the ‘uintic’ text).
Changed ‘uintic’ to ‘Quintic’
Deleted the stand-alone ‘Q’
and â¦. – it didn’t work. Why not? Because the first-letter pseudo element only applies to the first word in a block. In my case the block started with the Quintic logo (image file), and so first-letter did not apply to Quintic. Instead I had to:
Wrap ‘Quintic’ in its own <p></p> tag (although any block element would have done) and then set this <p> tags display attribute to inline-block so that it continued to flow after the image, but was still a new block as far the first-letter was concerned. This works a treat and has simplified my HTML.
Images and CSS3
On my web site I have a full page background image for the ‘Corporate pages’ (Front page, About, Contacts, Privacy…). For those pages with text, I needed to make the image less intrusive so that the text was readily legible. At first I though I would need to have two images, the Full Image for the Front-page and then a slightly opaque, barker image for those pages with text. Enter CSS. The Image style property has attributes of opacity and filter that allow you to do just that:
filter:alpha(opacity=50); /* For IE8, Just in case */
<img id="mainBodyImageTransparent" />
var image = document.getElementById("mainBodyImage");
image.src = backgroundImg;
where backgroundImgTransparent is defined in my Media.js file as:
backgroundImgTransparent = “./images/imageName_” + orientation + “.jpg”;