CSS | IGCSE Information and Communication Technology Preparation - Year 11 PDF Download
| Table of contents |
|
| How to use CSS |
|
| Inline Styles |
|
| Classes |
|
| External CSS |
|
How to use CSS
- The presentation layer of a web page is determined by CSS (Cascading Style Sheets), focusing on layout, colors, fonts, and animations.
- It delineates the content (HTML) from the visual presentation of the web page.
- CSS provides enhanced control and adaptability in crafting the design of a web page.
Inline Styles
External CSS is composed in a distinct file with a .css extension and linked to the HTML document. This approach enables the utilization of the same styles across multiple pages. For instance:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Inline CSS is written directly within the HTML tags using the style attribute. This applies the style only to that specific element. E.g.
<p style="color:blue;">This is a blue paragraph.</p>
Background Properties
- Background Colour: Set the background colour using the background-color property. e.g. background-color: blue;
- Background Images: Set a background image using the background-image property. e.g. background-image: url("image.jpg");
Font Properties
Control the appearance of text with font properties. This includes font-size, font-family, color, text-align, and more. E.g.
p {
font-size: 14px;
font-family: Arial;
color: blue;
text-align: center;
}
Tables
CSS is used to style HTML tables, allowing us to define the appearance of the table, table rows, table headers, and table data cells.
- Size: Control the width and height of a table using width and height. e.g. width: 100%; height: 200px;
- Background Colour: Use background-color to set the background. e.g. background-color: yellow;
- Borders: Apply a border using the border property. This includes colour, thickness, and visibility. For instance: border: 2px solid black;
- Collapsed Borders: Use border-collapse: collapse; to make borders appear as a single line
- Spacing: Control the space between cells with border-spacing. e.g. border-spacing: 5px;
- Padding: Define the space between cell content and its border with padding. e.g. padding: 10px;
table {
width: 100%;
height: 200px;
background-color: yellow;
border: 2px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
- Size: Control the width and height of rows, headers, and data cells just like with tables. e.g. width: 50px; height: 50px;
- Background Colour: Use background-color to set the background of rows, headers, and data cells
- Horizontal and Vertical Alignment: Control alignment with text-align (horizontal) and vertical-align (vertical). e.g. text-align: center; vertical-align: middle;
- Padding: Define the space between cell content and its border with padding
- Borders: Apply a border using the border property
th, td {
width: 50px;
height: 50px;
background-color: white;
text-align: center;
vertical-align: middle;
padding: 10px;
border: 1px solid black;
}
Question for CSSTry yourself: Which CSS property is used to set the background color of an element?View Solution
Classes
- CSS classes are employed to style multiple HTML elements concurrently.
- To define a class, employ a period (.) followed by the class name. To apply a class to an HTML element, utilize the class attribute.
- Background Colour: Use the background-color property. E.g.
.red-background {
background-color: red;
} - Background Images: Use the background-image property. E.g.
.image-background {
background-image: url("image.jpg");
} - Font Properties: Control the font size, family, colour, and alignment. E.g.
.big-blue-text {
font-size: 20px;
font-family: Arial;
color: blue;
text-align: center;
} - Size: Control the width and height with width and height. E.g.
.small-cell {
width: 30px;
height: 30px;
} - Background Colour: Use background-color to set the background. E.g.
.yellow-cell {
background-color: yellow;
} - Horizontal and Vertical Alignment: Use text-align (horizontal) and vertical-align (vertical). E.g.
.center-align {
text-align: center;
vertical-align: middle;
} - Spacing, Padding, Borders: Use padding for space inside the cell, and border for cell borders. E.g.
.padded-cell {
padding: 10px;
border: 2px solid black;
} - Collapsed Borders: Use border-collapse: collapse; the table class to remove spaces between cell borders. E.g.
.collapsed-table {
border-collapse: collapse;
}
Apply these classes to HTML elements like this:
<table class="collapsed-table">
<tr class="small-cell yellow-cell center-align">
<td class="padded-cell">Content</td>
</tr>
</table>
External CSS
- External Styles refer to CSS styles that are delineated in a distinct .css file and linked to the HTML document. This enables the reuse of identical styles across various web pages.
- To establish external styles for HTML elements such as h1, h2, h3, p, and li, just designate the element and delineate the styles within curly braces {}. For instance:
h1 { font-family: Arial;
font-size: 30px;
color: blue;
text-align: center;
}
h2 {
font-family: Arial;
font-size: 25px;
color: red;
text-align: left;
}
h3 {
font-family: Arial;
font-size: 20px;
color: green;
text-align: right;
}
p, li {
font-family: Arial;
font-size: 14px;
color: black;
text-align: justify;
} - The CSS provided assigns distinct font families, sizes, colors, and alignments to h1, h2, h3, p, and li tags. Additionally, the p and li elements share the same style.
- To implement bold or italic styles, utilize the font-weight and font-style properties respectively:
h1 {
font-weight: bold; /* makes text bold */
}
p {
font-style: italic; /* makes text italic */
} - Comments in CSS serve to elucidate the code and enhance readability. They can be inserted at any point within the code and have no impact on the outcome.
- A CSS comment is initiated with /* and terminated with */. See above for examples.
Attached Stylesheets vs Inline Style Attributes
- Attached Stylesheets, represented by external .css files linked to an HTML document, facilitate the reuse of identical styles across multiple web pages. Integration of an attached stylesheet is accomplished using the <link> tag within the <head> tag.
<head>
<link rel="stylesheet" href="styles.css">
</head> - Inline Style Attributes entail CSS rules that are directly applied to an HTML element through the style attribute. They exclusively impact the particular element to which they are applied:
<p style="color:blue;">This is a blue paragraph.</p> - The primary distinction lies in the fact that attached stylesheets facilitate reusability and enhance organization, whereas inline styles are employed for individual, specific modifications.
Hierarchy of Multiple Attached Stylesheets and Inline Styles
- When multiple styles are defined for the same HTML element, the style closest to the element takes precedence. This phenomenon is referred to as the Cascading order.
- The cascading order, ranked from highest to lowest priority, is as follows:
- Inline styles (within the HTML element)
- External and internal styles (within the head section)
- Browser defaults
Characteristics of a Style and a Class
- A Style encompasses a collection of CSS properties that determine the visual presentation of an HTML element.
- A Class serves as a means of selecting multiple elements to impart the same style.
- The disparity between them lies in their usage: a style defines the CSS properties, whereas a class is employed to apply these properties to numerous elements.
Relative File Paths for Attached Stylesheets
- Relative file paths are employed for linked stylesheets since they denote the location of the CSS file relative to the current HTML file. This enhances code portability and simplifies management.
- For instance, if the CSS file resides in the same folder as the HTML file, the path would be "styles.css". If the CSS file is situated in a subfolder named "css", the path would be "css/styles.css".
The document CSS | IGCSE Information and Communication Technology Preparation - Year 11 is a part of the Year 11 Course IGCSE Information and Communication Technology Preparation.
All you need of Year 11 at this link: Year 11
FAQs on CSS - IGCSE Information and Communication Technology Preparation - Year 11
| 1. What are the three ways to use CSS? |  |
Ans. The three ways to use CSS are inline styles, classes, and external CSS.
| 2. What is the difference between inline styles and classes in CSS? | |
Ans. Inline styles are applied directly to an HTML element using the style attribute, while classes are reusable styles that can be applied to multiple elements by assigning the class attribute.
| 3. How is external CSS different from inline styles and classes? | |
Ans. External CSS is a separate file containing all the styles for a website, which can be linked to multiple HTML pages. This allows for easier maintenance and consistency across the website.
| 4. Why is using classes in CSS considered a best practice? | |
Ans. Using classes in CSS allows for better organization, reusability, and consistency in styling across a website. It also helps in separating content from design, making it easier to update styles in the future.
| 5. What is the syntax for linking an external CSS file to an HTML document? | |
Ans. The syntax for linking an external CSS file to an HTML document is <link rel="stylesheet" type="text/css" href="styles.css"> placed within the <head> section of the HTML document.
Related Exams
About this Document
|
Nov 22, 2024 Last updated |
Document Description: CSS for Year 11 2024 is part of IGCSE Information and Communication Technology Preparation preparation.
The notes and questions for CSS have been prepared according to the Year 11 exam syllabus. Information about CSS covers topics
like How to use CSS, Inline Styles, Classes, External CSS and CSS Example, for Year 11 2024 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for CSS.
Introduction of CSS in English is available as part of our IGCSE Information and Communication Technology Preparation
for Year 11 & CSS in Hindi for IGCSE Information and Communication Technology Preparation course.
Download more important topics related with notes, lectures and mock test series for Year 11
Exam by signing up for free. Year 11: CSS | IGCSE Information and Communication Technology Preparation - Year 11
Description
Full syllabus notes, lecture & questions for CSS | IGCSE Information and Communication Technology Preparation - Year 11 - Year 11 | Plus excerises question with solution to help you revise complete syllabus for IGCSE Information and Communication Technology Preparation | Best notes, free PDF download
Information about CSS
In this doc you can find the meaning of CSS defined & explained in the simplest way possible. Besides explaining types of
CSS theory, EduRev gives you an ample number of questions to practice CSS tests, examples and also practice Year 11
tests
|
91 docs|23 tests
|
Download as PDF
|
Explore Courses for Year 11 exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
CSS | IGCSE Information and Communication Technology Preparation - Year 11
,Important questions
,Sample Paper
,Summary
,MCQs
,Free
,Previous Year Questions with Solutions
,practice quizzes
,Semester Notes
,Extra Questions
,Exam
,CSS | IGCSE Information and Communication Technology Preparation - Year 11
,video lectures
,past year papers
,Viva Questions
,ppt
,mock tests for examination
,CSS | IGCSE Information and Communication Technology Preparation - Year 11
,study material
,shortcuts and tricks
,Objective type Questions
;
Additional Information about CSS for Year 11 Preparation
CSS Free PDF Download
The CSS is an invaluable resource that delves deep into the core of the Year 11 exam.
These study notes are curated by experts and cover all the essential topics and concepts, making your preparation more efficient and effective.
With the help of these notes, you can grasp complex subjects quickly, revise important points easily,
and reinforce your understanding of key concepts. The study notes are presented in a concise and easy-to-understand manner,
allowing you to optimize your learning process. Whether you're looking for best-recommended books, sample papers, study material,
or toppers' notes, this PDF has got you covered. Download the CSS now and kickstart your journey towards success in the Year 11 exam.
Importance of CSS
The importance of CSS cannot be overstated, especially for Year 11 aspirants.
This document holds the key to success in the Year 11 exam.
It offers a detailed understanding of the concept, providing invaluable insights into the topic.
By knowing the concepts well in advance, students can plan their preparation effectively.
Utilize this indispensable guide for a well-rounded preparation and achieve your desired results.
CSS Notes
CSS Notes offer in-depth insights into the specific topic to help you master it with ease.
This comprehensive document covers all aspects related to CSS.
It includes detailed information about the exam syllabus, recommended books, and study materials for a well-rounded preparation.
Practice papers and question papers enable you to assess your progress effectively.
Additionally, the paper analysis provides valuable tips for tackling the exam strategically.
Access to Toppers' notes gives you an edge in understanding complex concepts.
Whether you're a beginner or aiming for advanced proficiency, CSS Notes on EduRev are your ultimate resource for success.
CSS Year 11 Questions
The "CSS Year 11 Questions" guide is a valuable resource for all aspiring students preparing for the
Year 11 exam. It focuses on providing a wide range of practice questions to help students gauge
their understanding of the exam topics. These questions cover the entire syllabus, ensuring comprehensive preparation.
The guide includes previous years' question papers for students to familiarize themselves with the exam's format and difficulty level.
Additionally, it offers subject-specific question banks, allowing students to focus on weak areas and improve their performance.
Study CSS on the App
Students of Year 11 can study CSS alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the CSS,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of CSS is prepared as per the latest Year 11 syllabus.
|
© EduRev
|
Education Revolution
|
Follow Us
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup