CS Notes

Writing CSS

2 min read

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

Graph View

Backlinks