ACK ST.

ANDREWS TRAINING COLLEGE

ICT(CERTIFICATIONS)
WEB DESISGN -CSS NOTES
CSS (Cascading Style Sheets) is a language used to style HTML elements. It
allows us to change the appearance of web pages by modifying colors, fonts,
spacing, and layouts. CSS separates content (HTML) from design, making
websites more visually appealing and easier to maintain.
CSS works by enabling you to associate rules with the elements that appear in a
web page. These rules govern how the content of those elements should be
rendered
a CSS rule, which is made up of two parts:
The selector indicates which element or elements the declaration applies to. (If
it applies to more than one element, you can have a comma-separated list of
several elements.)
The declaration sets out how the elements referred to in the selector should be
styled.

Selectors are used to target specific HTML elements and apply styles.

CSS Selectors
• Element Selector (Targets all elements of a type)
• Class Selector (Targets elements with a specific class)
• ID Selector (Targets a single element with an ID)
The declaration is also split into two parts, separated by a colon:
A property is the property of the selected element(s) that you want to affect, in
this case the width property.
A value is a specification for this property; in this case it is that table cells
should be 36 pixels wide.

This is like the way that HTML elements can carry attributes and how the
attribute controls a property of the element; the attributes’ value would
be the setting for that property. For example, a<td> element could have
a width attribute whose value is the width you want the table to be:<td
width="36"></td>
With CSS, however, rather than specifying the attribute on each instance of the
element, the selector indicates that this one rule applies to all elements in the
document.

Here is an example of a CSS rule that applies to several different

elements (the <h1>, <h2>, and <h3>elements). A comma separates the
name of each element that this rule applies to. The rule also specifies
several properties for these elements with each property-value pair
separated by a semicolon. Note how all the properties are kept inside
the curly braces:
Even if you have never seen a CSS rule before, you should now have a
good idea of what this rule does. There are three heading elements
named in the selector (<h1>, <h2>, and <h3>), and this rule says that
where these headings are used they will be written in a bold Arial font in
black with a white background.

How to Add CSS

There are three main ways to apply CSS to a web page:

1. Inline CSS (Inside an HTML tag)

2. Internal CSS (Inside a <style> tag in the HTML file)
3. External CSS (In a separate .css file linked to the HTML file)
4.

We will stick to external

External CSS Example

HTML:

Below are examples of css code you can apply on your webpages feel free to try them out

CSS Code Explanation

Sets the text color of the entire webpage to dark
body { color: #333; font-family: Arial,
gray (#333) and uses Arial as the primary font, with
sans-serif; }
sans-serif as a fallback.
CSS Code Explanation
Changes the paragraph’s background color to
p { background-color: lightgray; }
light gray.

p { color: black; } Sets the text color of paragraphs to black.

p { text-align: center; } Centers the text inside the paragraph.

Adds a solid black border of 2 pixels around the

p { border: 2px solid black; }
paragraph.

Adds space inside the border (around the text) for

p { padding: 10px; }
better readability.

Limits the paragraph width to 50% of the page

p { width: 50%; }
width.

Centers the paragraph horizontally and adds a 10-

p { margin: 10px auto; }
pixel margin at the top and bottom.

h1 { color: blue; } Changes the color of all <h1> headings to blue.

Converts <h1> and <h2> headings to uppercase

h1, h2 { text-transform: uppercase; }
letters.

a { text-decoration: none; } Removes the underline from links.

Changes the color of a link to red when the mouse

a:hover { color: red; }
hovers over it.

Rounds the corners of a <div> element to 10

div { border-radius: 10px; }
pixels.

button {background-color: green; color: Styles a button with a green background, white
white; border: none; padding: 10px text, no border, padding, and a cursor change
20px; cursor: pointer; } when hovered over.

button:hover { background-color: Darkens the button's background color when

darkgreen; } hovered over.

img { width: 100px; height: auto; border: Ensures images are 100 pixels wide while
2px solid gray; } maintaining their aspect ratio, with a gray border.

Changes bullet points in unordered lists to squares

ul { list-style-type: square; }
instead of default circles.
CSS Code Explanation
table { border-collapse: collapse; width: Removes spacing between table borders and
100%; } makes the table stretch to full width.

td, th { border: 1px solid black; padding: Adds a border, padding, and centers text inside
8px; text-align: center; } table cells (<td>) and headers (<th>).

ANOTHER WAY TO LOOK AT CSS LETS GO!

CSS, which stands for Cascading Style Sheets, is a stylesheet language used to control the
presentation and layout of HTML documents. It allows us to apply styles such as colors,
fonts, spacing, and positioning to elements on a webpage.

Imagine a website as a house:

• HTML is the structure (walls, foundation, and rooms).

• CSS is the interior design (paint, furniture, lighting, and decorations).
• JavaScript is the functionality (doors that open, lights that turn on, and interactive
features).

CSS ensures that web pages are visually appealing and user-friendly.

Why Use CSS?

Using CSS provides several benefits:

• Separation of Content and Design: HTML focuses on structure, while CSS handles
appearance, making websites easier to maintain.
• Consistency: A single CSS file can style multiple pages, ensuring uniformity across a
website.
• Faster Page Loading: CSS reduces the need for repetitive inline styles, leading to
cleaner and more efficient code.
• Responsive Design: CSS makes web pages adaptable to different screen sizes,
improving accessibility.

How CSS Works

CSS uses a set of rules to apply styles to elements. Each rule consists of:

1. Selector: The HTML element(s) to be styled.

2. Declaration Block: Contains style properties and values inside curly braces {}.
3. Property: The aspect of the element to style (e.g., color, font-size).
4. Value: The specific setting for the property (e.g., blue, 16px).

Example:
p {
color: blue;
font-size: 16px;
}

This rule applies a blue color and a font size of 16 pixels to all <p> elements.

Ways to Apply CSS

There are three main ways to include CSS in an HTML document:

1. Inline CSS (Applied directly within an HTML tag)

<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

• Best for quick styling but not recommended for larger projects due to limited
maintainability.

2. Internal CSS (Defined within a <style> block in the HTML document’s

<head> section)

<style>
p {
color: green;
font-size: 20px;
}
</style>

• Suitable for single-page styling but not ideal for larger websites.

3. External CSS (Stored in a separate file and linked to the HTML document)
<link rel="stylesheet" href="styles.css">
/* styles.css */
p {
color: purple;
font-size: 22px;
}

• Recommended for scalable and maintainable web projects.

CSS Selectors
Selectors define which elements to style. Below are the most commonly used selectors:

Selector Type Example Description

Element Selector p { color: blue; } Targets all <p> elements
.box { background-color: gray; Targets all elements with class
Class Selector } "box"
#header { font-size: 24px; }
Targets an element with ID
ID Selector
"header"
Universal * { margin: 0; } Targets all elements
Selector
Group Selector h1, h2 { color: black; } Styles multiple elements together

Example Usage:
/* Element selector */
h1 {
color: navy;
}

/* Class selector */
.box {
background-color: lightgray;
padding: 10px;
}

/* ID selector */
#main-header {
font-size: 28px;
}

CSS Box Model

Every HTML element is treated as a rectangular box. The box model consists of:

1. Content - The actual text or image inside the element.

2. Padding - Space around the content, inside the border.
3. Border - The edge surrounding the padding and content.
4. Margin - Space outside the border that separates elements.

Example of Box Model in CSS:

div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}

Analogy: Imagine a framed picture:

• The content is the picture itself.

• Padding is the space between the picture and the frame.
• Border is the actual frame.
• Margin is the space between the frame and the wall.

CSS Layout Techniques

CSS provides several methods for designing web page layouts:

1. Display Property

• block: Elements take up the full width available.

• inline: Elements only take up as much width as needed.
• flex: Enables flexible layouts.
• grid: Creates structured grid-based layouts.

2. CSS Flexbox

Flexbox is a powerful layout tool for aligning and distributing elements efficiently.

.container {
display: flex;
justify-content: center;
align-items: center;
}

3. CSS Grid

Grid provides a structured layout system for complex designs.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

Analogy: Think of Flexbox as a row of adjustable seats in a bus, while CSS Grid is a
chessboard where elements fit into defined spaces.

CSS is a powerful tool that enhances the appearance of web pages. Understanding its
concepts allows developers to create visually appealing, responsive, and well-structured
websites. By mastering selectors, the box model, and layout techniques, you can build user-
friendly interfaces that function seamlessly across different devices.