Week 5 & 6: CSS (Cascading Style Sheets) – Basics
Introduction to CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation (look
and feel) of an HTML document. While HTML is used to define the structure of a webpage,
CSS is used to control the layout, colors, fonts, spacing, and overall design of the page.
CSS allows web developers to separate the content (HTML) from the presentation (styles),
which provides flexibility, efficiency, and maintainability. It is one of the core technologies
behind modern web design, along with HTML and JavaScript.
CSS can control:
• Text styles (font size, color, etc.)
• Element positioning (layout, margins, padding, etc.)
• Backgrounds, borders, and shadows
• Responsive design (adjusting styles based on device screen size)
• Animations and transitions
Understanding CSS Elements and Structure
CSS is written using a specific syntax that includes selectors, properties, and values.
1. CSS Syntax: The basic structure of a CSS rule consists of a selector, a property, and
a value. The selector targets the HTML element you want to style, and the property
defines what aspect of the element to modify. The value specifies how the property
should be applied.
The general syntax is:
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
• h1: This is the selector (it targets all <h1> elements).
• color: This is the property (it defines the text color).
• blue: This is the value (it sets the text color to blue).
2. Selectors: Selectors target the HTML elements that you want to style. Some common
selectors are:
• Element Selector: Targets all elements of a specific type (e.g., all <h1> elements).
• Class Selector: Targets elements with a specific class. Classes are defined with a .
before the class name (e.g., .button).
• ID Selector: Targets an element with a specific ID. IDs are defined with a # before the
ID name (e.g., #header).
• Universal Selector: Targets all elements on the page. It is represented by an asterisk *.
Example:
/* Class selector */
.button {
background-color: green;
}
/* ID selector */
#header {
background-color: gray;
}
/* Element selector */
h2 {
color: red;
}
3. Grouping Selectors: You can group multiple selectors to apply the same styles to
different elements by separating the selectors with commas.
Example:
h1, h2, h3 {
font-family: Arial, sans-serif;
}
This will apply the same font family to <h1>, <h2>, and <h3> elements.
Inline, Internal, and External CSS
There are three main ways to apply CSS styles to an HTML document: inline, internal, and
external. Each has its use case, advantages, and limitations.
1. Inline CSS:
Inline CSS involves adding CSS styles directly within an HTML element using the style
attribute. This method is used for applying styles to a single element and is not recommended
for large-scale styling due to lack of maintainability.
Syntax:
<tagname style="property: value;">
Content goes here
</tagname>
Example:
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>
• Pros: Quick and easy for styling individual elements.
• Cons: Not scalable or reusable, and difficult to maintain when styling large or complex
pages.
2. Internal CSS:
Internal CSS involves placing the CSS rules within the <style> tag in the <head> section of the
HTML document. This method is useful when you want to apply styles to an entire page but
don’t want to use an external stylesheet.
Syntax:
<head>
<style>
selector {
property: value;
}
</style>
</head>
Example:
<head>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
p{
color: blue;
font-size: 16px;
}
</style>
</head>
• Pros: Easy to implement within a single document, and the styles are contained within
the document.
• Cons: Styles are not reusable across multiple pages, which can make it difficult to
manage large websites.
3. External CSS:
External CSS involves linking to an external stylesheet that contains all the CSS rules. This is
the most efficient and scalable method for styling a website. External CSS is stored in a separate
.css file and linked to HTML files via the <link> tag.
Syntax (linking external CSS):
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
Example of [Link]:
body {
background-color: lightblue;
font-family: "Helvetica", sans-serif;
}
h1 {
color: darkblue;
}
p{
font-size: 14px;
color: gray;
}
• Pros: External stylesheets can be applied to multiple pages, making them easy to
maintain and update. This approach also keeps HTML files cleaner and more organized.
• Cons: Requires a separate file, and if the file is not linked correctly, styles will not be
applied.
Differences Between Inline, Internal, and External CSS
Type of
Where to Write Scope Advantages Disadvantages
CSS
Inside HTML
Inline Fast and easy for Not reusable; hard to
element using Single element
CSS one-off styling maintain
style attribute
Not reusable; can become
Internal Inside <style> tag Single HTML Good for single-
difficult to manage in large
CSS in <head> section document page styling
projects
Linked to HTML Multiple Reusable across
External Requires a separate file;
document using HTML pages; easier to
CSS initial setup needed
<link> tag documents maintain
CSS Specificity and the Cascade
One of the key features of CSS is its cascading nature, meaning that multiple styles can be
applied to the same element, and the browser will use a set of rules to determine which styles
take precedence. This is called CSS specificity.
1. Specificity: The more specific a selector is, the higher its precedence. For example, an
ID selector has higher specificity than a class selector, which in turn has higher
specificity than an element selector.
2. Cascade: When conflicting styles are applied to an element, the browser applies styles
based on the order of appearance in the CSS file, where the last rule takes precedence.
Example:
/* Lower specificity */
p{
color: red;
}
/* Higher specificity */
#unique-paragraph {
color: blue;
}
In this case, the paragraph with the id="unique-paragraph" will be colored blue, despite the
earlier rule targeting all <p> elements.
Conclusion
In Weeks 5 and 6, you learned the following core concepts of CSS:
• CSS is essential for styling and controlling the layout of web pages.
• Selectors are used to target HTML elements and apply styles.
• There are three main ways to apply CSS: inline, internal, and external.
o Inline CSS is used for quick styling of individual elements.
o Internal CSS is placed within the <style> tag of a document and affects only
that document.
o External CSS allows for the creation of reusable styles across multiple pages.
• Understanding specificity and the cascade is crucial for managing conflicting styles
and ensuring the desired styling is applied.
With these fundamental skills, you are now equipped to start styling web pages effectively and
organize your CSS for large-scale, maintainable projects. In the upcoming weeks, you will
learn more advanced CSS techniques, including layout, positioning, and responsive design.
