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
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 (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 */
}
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.
CSS selectors are used to target specific HTML elements. Here are some common types:
Targets all HTML elements of that type. The example below will make all <p> elements red.
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 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 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 in CSS can be specified in several ways and applied to both text and backgrounds:
CSS provides various properties to style text:
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.
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.css
Commit 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.