Styling a Web Page with CSS

HTML defines the structure of a page, and CSS (Cascading Style Sheets) defines how it looks. Separating content from design makes a page easier to manage: a single CSS file can change the colour and font of a whole site. A CSS rule has two parts: a selector saying which element it applies to and property: value; pairs.

The simplest way to style an element is the style attribute: <p style="color: blue; font-size: 18px;">Salom</p>. Properties are separated by semicolons. Commonly used properties are: color for text colour, background-color for background colour, font-size for font size, font-family for the typeface and text-align for alignment (left, center, right).

To give one style to many elements, styles are moved to a separate place. They are written in a <style> tag inside <head> or in a separate style.css file connected with <link rel="stylesheet" href="style.css">. A selector can be a tag name (all p elements), a class (.card for elements with class="card") or an identifier (#menu for the one element with id="menu"). Classes are used most often.

Every element is pictured as a “box”: the content, padding (inner space) around it, a border (line), and margin (outer space) outside. A colour can be given by name (red), by HEX code (#1e88e5) or as rgb(30, 136, 229). In design, limit the number of colours and leave enough contrast between text and background so the page is easy to read.

Key takeaways

• HTML is structure; CSS is appearance.
• A CSS rule consists of a selector and property: value; pairs.
• Styles are given by the style attribute, a <style> tag or an external .css file.
• A selector can be a tag, a class (.name) or an identifier (#name); an element’s box has margin, border and padding.