Formatting text, colour, background and layout with CSS

Hello students, welcome to Kwickprep. Two pages can have the same words, but one looks dull and the other looks like a real website. The difference is CSS. Today we will format text, colours, backgrounds and layout, and learn the box model that exams love.

First, a quick reminder of how a CSS rule is written. The selector says which elements to style. Each property names what to change, like color or font-size. The value says how, and a semicolon ends each declaration. All declarations sit inside curly brackets.

Let us start with text. Font-family chooses the typeface, like Arial. Font-size sets how big the text is, often in pixels, written px. Font-weight makes text bold. Font-style makes text italic.

More text properties control the line of text. Text-align places text left, right, centre or justified. Text-decoration adds or removes an underline. Text-transform changes letters to capitals or small letters. Line-height sets the space between lines, which makes notes easier to read.

Here is text formatting in action. The h1 heading uses Arial, a size of thirty pixels, and centre alignment. Every paragraph is justified, so both edges of the text are straight. Notice CSS uses the American spellings color and center, so colour and centre are not recognised.

The color property sets the text colour. CSS accepts colours in three common ways. A colour name, like red, is easiest. A hex code starts with a hash and has six digits for red, green and blue. The rgb form gives red, green and blue as numbers from zero to two hundred fifty five.

Now backgrounds. Background-color fills the area behind an element. Background-image puts a picture behind it, using url with the file name. Background-repeat set to no-repeat shows the picture once instead of tiling it. Background-position center places it in the middle.

For layout, every element is treated as a box, called the box model. In the centre is the content, the actual text or image. Padding is space inside the box, around the content. Border is the line around the padding. Margin is space outside the border, which pushes other boxes away.

Here a notice box uses all the parts. Width is three hundred pixels for the content. Padding is ten pixels inside, and the border is two pixels, solid and black. Margin is twenty pixels outside. Pause and predict. How wide does the box look on screen? Three hundred plus twenty padding plus four border, which is three hundred twenty four pixels.

More properties control layout. Width and height set the size of a box. Display block makes an element start on a new line, while inline keeps it in the same line. Float left moves a box to the left, and text wraps around it. Position helps place a box exactly.

Here is a simple two column layout, like a school website. The class side floats left and takes thirty percent of the width. The class main floats right and takes seventy percent. Together they fill the whole width, so the two columns sit side by side.

Watch out for four mistakes that break styles. Writing colour with a u is ignored, because CSS only knows color. Forgetting the semicolon can break the next declaration. A space inside a size, like sixteen space px, is invalid. And a missing closing curly bracket spoils the rules after it.

Let us revise what we learned today. Font-family, font-size, font-weight and font-style format the letters. Text-align, text-decoration and line-height format the lines. Colours can be names, hex codes or rgb values. Background properties add a colour or an image. Every element is a box of content, padding, border and margin, placed with width, float and display.