CSS: Styling

Overview

CSS Styling focuses on specific properties that enhance the look and feel of web pages, making them visually appealing and easier to navigate. By mastering common CSS styling properties and techniques, you can create responsive, engaging, and accessible designs for different devices and screen sizes.

Key Styling Properties (Based on Appendix 5d)

Colour and Background

• colour: Sets the text colour.

h1 {
  colour: blue;
}

• background-colour: Sets the background colour for an element.

.header {
  background-colour: #F0F0F0;
}

• Hex and Named Colours: Colours can be defined using named colours (like blue), hex codes (e.g., #A2441B), or RGB values.

Text and Font Properties

• font-family: Specifies the typeface for text, often with a fallback font.

p {
  font-family: Arial, sans-serif;
}

• font-size: Sets the text size.

.small-text {
  font-size: 12px;
}

• Text Alignment and Decoration: Use text-align to position text (e.g., center) and text-decoration to add effects like underlining.

Borders

• border-style: Defines the style of a border (e.g., solid, dashed).

.box {
  border-style: solid;
}

• border-colour: Sets the colour of the border.
• border-width: Adjusts the thickness of the border.

Box Model and Layout

• margin: Creates space outside the element.
• padding: Adds space inside the element, between the content and border.
• height and width: Set the dimensions of an element.

.container {
  width: 100%;
  padding: 20px;
  margin: 10px;
}

Using CSS Classes and IDs

• Classes (.classname) are reusable styles that can be applied to multiple elements.
• IDs (#idname) are unique styles meant for a single element.

.highlight {
  background-colour: yellow;
}
#main-header {
  font-size: 24px;
  text-align: center;
}

Note Summary