You can use "non-editable" blocks for this. Create a paragraph or div element (with a collection of paragraphs for example) that contain your message or any other content that the user can't edit, adding a class of mceNonEditable to the block element, eg:

<div class="mceNonEditable">
<h3>Do not edit below this line</h3>
<p>The shortcode below must not be removed or changed</p>
</div>

A non-editable block can also contain editable elements, eg:

<div class="mceNonEditable">
<p>Type your response in the paragraph below</p>
<div class="mceEditable">
<p>Type here....</p>
</div>
</div>

1. Is there a quick way to insert these non/editable blocks (like a toolbar icon etc) rather than having to add via the code or HTML editor? Have i missed such icons?

Use a Template Item in the Template Manager (in a profile assigned to you only) to create a list of non-editable items that you can easily add to editor content, eg:

 2. Once added, is there a method to show these in a different style (i.e maybe red, italics) or is it just as easy to add inline style such as :

Inline styles are fine. You can also style them using the mceNonEditable class in your template stylesheet, eg:

.mceNonEditable {
    border: 1ps dashed #ccc;
    color: red;
    background-color: #eee;
}

3. Do I have to add the following to my custom.css as, at the moment, I can see the 'instruiction' in the front end.

.mceNonEditable, .mceEditable {display:none!important;}

This will hide them in the editor too, as the editor loads the custom.css styles as well. You need a little bit more on the selector to prevent the style being applied in the editor, eg:

.item-content .mceNonEditable {display:none !important;}
.item-content .mceEditable {display:none !important;}