Embedded Files
PROGRAMMING FOR THE WEB: CSS
Introduction to CSS
Introduction to CSS
CSS (Cascading Style Sheets) is used to style and layout web pages.
It allows you to control the colour, font, size, spacing, and many other aspects of HTML elements.
We will go through a few examples, but you can find way more here: https://www.w3schools.com/CSS/default.asp
Linking a Stylesheet
Linking a Stylesheet
One of the ways to use CSS with your HTML is to link your CSS file to your HTML file.
This is done using the <link> tag in the <head> section of your HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Styled Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
CSS Syntax
CSS Syntax
CSS (Cascading Style Sheets) consists of rules that define how HTML elements should be displayed. Each rule has two main parts: selectors and declarations.
Selector: The selector points to the HTML element you want to style. It's like the "target" of your style rule.
Declaration Block: The declaration block contains one or more declarations, separated by semicolons. Each declaration includes a CSS property and a value, separated by a colon.
selector {
property1: value1;
property2: value2;
/* More declarations can go here */
}
- The selector is followed by curly braces { }.
- Inside the braces, you list your declarations.
- Each declaration is a property-value pair.
- The property and value are separated by a colon :.
- Each declaration ends with a semicolon ;.
p {
color: blue;
font-size: 16px;
}
This rule would make all paragraph text blue and 16 pixels in size:
p is the selector (targeting all paragraph elements).
color: blue; is one declaration (setting the text color to blue).
font-size: 16px; is another declaration (setting the font size to 16 pixels).
h1, h2, h3 {
font-family: Arial, sans-serif;
color: navy;
}
You can have multiple selectors for the same declaration block by separating them with commas.
This rule applies the same styles (Arial font and navy colour) to all <h1>, <h2>, and <h3> elements.
Selectors
Selectors
CSS selectors are used to target specific HTML elements. Here are some common types:
Element Selector:
Element Selector:
Targets all HTML elements of that type. The example below will make all <p> elements red.
Class Selector
Class Selector
Class selectors allow you to apply styles to multiple elements that share the same class. By adding the class attribute to our HTML elements, we can select them in our CSS regarless of their type. Class selectors start with a dot (.) followed by the class name.
The following CSS will give a yellow background to any element with the class "highlight".
ID Selector
ID Selector
ID selectors target a single, unique element on a page. You add an ID to an element using the id attribute.
Each ID should be unique within a page. ID selectors start with a hash (#) followed by the ID name.
Descendant Selector
Descendant Selector
Descendant selectors are a powerful way to target elements based on their hierarchical relationship in the HTML structure. They allow you to style elements that are nested within other elements. A descendant selector consists of two or more selectors separated by spaces.
We could use this to style navigation links, without affecting other links or list items on the page:
Colours
Colours
Colours in CSS can be specified in several ways and applied to both text and backgrounds:
Font Properties
Font Properties
CSS provides various properties to style text:
Box Model
Box Model
The CSS box model is a fundamental concept that describes how elements are rendered on a web page. Every HTML element can be thought of as a box with several layers. Understanding the box model is crucial for controlling layout and spacing in CSS.
Components of the Box Model
Content: The inner part of the box, where text and images appear.
Padding: The space between the content and the border. It's transparent.
Border: A line that goes around the padding and content.
Margin: The space outside the border. It's used to separate the element from other elements.
Task 1: Style Your Basic Page
Task 1: Style Your Basic Page
Now that you've learned some fundamental CSS concepts, let's apply them to the HTML page you created in the previous task. Your goal is to style the page using CSS to make it visually appealing and demonstrate your understanding of the concepts we've covered.
Create and link a CSS file:
Create a CSS file and link it to your HTML file.Style the body:
Set a background colour and choose a font for the entire page.Style the headings:
Differentiate your main heading and subheadings using CSS properties like color, font-size, and font-weight.Style the image:
Adjust the appearance of your image using properties like border and padding.Style the list and links:
Customize the appearance of your list and its links. Consider changing colours, removing default styles, and adding hover effects.Apply the box model:
Use margin, padding, and border properties to adjust the layout of your elements.
Instructions:
Open your project-16-html folder using VS Code
Fetch any changes using GitHub in the terminal. E.g. git fetch
If there are any changes, we need to pull them. E.g. git pull
You will re-use the task1.html file from last project.
Create the task1.css file using the terminal. Hint: touch
Remember to commit and push your code when done! Here are the terminal commands to do so:
Include any new files to be commited. E.g.
git add task1.cssCommit your changes with a meaningful message:
git commit -am "Your message here"
Note: The -a flag automatically stages all modified files before committing, -m is to add a message.Push your changes to GitHub:
git push origin main
Version control software such as GitHub is a huge part of Software Engineering and Web Development. It allows you to keep track of your progress, revert to older versions, collaborate with others, and access your code through the cloud from anywhere.
Page updated
Report abuse