Styled Text Tricks Intro.
Hi all, and welcome to another WebKarnage tutorial. As the title states, this is all about little HTML and CSS tricks that can be used to help you get more control and flexibility from your RapidWeaver Styled Text pages. We are not going to be going for the jugular with reems of complex code, but showing how some basic knowledge of lightweight code can make the difference.
The Styled Text page type, is RapidWeaver’s standard page type, and has so much going for it in terms of both simplicity and hidden power. I feel it is the essence of RapidWeaver in that sense, as we would describe RapidWeaver in just the same way. You can simply type some text into the page, drop an image onto it, click once on the image, choose Format>HTML>Align Image Right and your text wraps around the image! Brilliant!
A Few Simple Rules.
These are rules for following this tutorial, but not hard and fast rules when making your own pages.
- Paste any text or code used using ‘Paste As Plain Text’ (Command>Option>V) to prevent any unexpected formatting code creeping in.
- Be careful to highlight everything between start and end HTML tags when applying ‘Ignore Formatting’.
- Take you time, and try changing the code to see the effects. It will improve your ‘feel’ for what is going on.
- Do ask questions on the RapidWeaver forum. The only daft question is the one you didn’t ask!
HTML and CSS, What’s The Basic Difference?
OK, so we know they are both types of code, and they even share a some things, but why is some code called HTML, and some CSS? Here is a simplistic view of the difference.
HTML is code that acts exactly where it is written and generates elements,ie. content. If it is written in the content container (main edit window in RapidWeaver), that’s where is is applied. It is also ‘run’ by the browser generally in the order it is written.
CSS code is written in sheets to be referred to, to be applied later to HTML elements as they appear changing how they look, and also inside HTML tags where it is referred to as ‘Inline Styling’. CSS stads for ‘Cascading Style Sheets’. This means CSS in different places has different levels of precedence. The ‘closer’ the CSS is to the element, or the later on the same sheet even, the greater the precedence. Therefore, we start with the styles.css sheet in the theme, with the Custom CSS box in the Page Inspector taking precedence over that, and inline styling taking ultimate precedence. We can override later CSS with the ‘!important’ declaration. For example, this allows us to be sure that when we put CSS in the Custom CSS box, inline styling can be overridden.
Past The Basic Settings.
We are not going to be covering how the basic HTML commands already available from the RapidWeaver formatting menu, and we will assume that all of you are familiar with the basics such as using ‘Align Image Right’ to let your text wrap around the image on the left. This is well covered in the manual for RapidWeaver 4. It also mentions using an HTML div (an area or division of an HTML document) with the class of ‘image-right’ to do the same job. There is some CSS in the styles.css file in the theme used that will then be applied to this class. It starts with ‘.image-right’. The period says this styling will be applied to a class of div, if we used id=”image-right” the CSS would need to start with a hash instead of the period. We will be expanding on this use of HTML.