课 23, 主题 5

In Progress

← Previous Next→

css

课 Progress

0% Complete

Writing CSS

What is CSS?

Cascading Style Sheets (CSS) define the style or appearance of a webpage
CSS uses selectors such as classes or IDs
CSS can be placed within HTML or externally in a file
Multiple pieces of CSS can be combined
Where CSS is used within the HTML, this will be used rather than any external CSS styling and will override the external stylesheet

Classes & Identifiers

Classes

In CSS, a class is a type of selector that is used to apply a specific style to one or more HTML elements
A class is denoted by a full stop (.) followed by the class name. E.g. .myClass refers to any HTML element with the class attribute set to “myClass”
The class selector is versatile in that it allows the same styles to be applied to multiple HTML elements across the webpage

Identifiers

An identifier, also known as an ID, is another type of selector in CSS
An identifier is represented by a hash (#) followed by the ID name. For example, #myID would select any HTML element with the ID attribute set to “myID”
IDs are unique within a webpage, meaning that each ID can only be used once per page. This makes them useful for styling singular, distinct elements on a webpage
E.g.

<body>

<div id="header">

<h1>Study Guide</h1>

</div>

<div class="subject" id="maths">

<h2>Maths Revision</h2>

<p>Key topics to revise are algebra, trigonometry, and statistics.</p>

</div>

<div class="subject" id="english">

<h2>English Revision</h2>

<p>Focus on improving your grammar, vocabulary, and essay writing skills.</p>

</div>

<div class="subject" id="science">

<h2>Science Revision</h2>

<p>Remember to revise the core concepts in physics, chemistry, and biology.</p>

</div>

</body>

Here’s an example to illustrate the styling of classes and IDs:

/* styles.css */

#header {

background-color: lightblue;

padding: 10px;

text-align: center;

}

.subject {

border: 1px solid black;

margin: 10px;

padding: 10px;

}

#maths {

background-color: #FFDDDD;

}

#english {

background-color: #DDFFDD;

}

#science {

background-color: #DDDDFF;

}

This is what the page looks like:

Example webpage using different formatting using CSS for IDs and classes

All the subjects have the same border and heading style but each one has a different coloured background

Computer-Science-A-level-Ocr

css

Writing CSS

What is CSS?

Classes & Identifiers

Classes

Identifiers

Responses