Created by Turbolearn AI
Introduction to CSS
So, we're jumping into the world of CSS (Cascading Style Sheets) today! You've
already conquered HTML, so you know how to structure a webpage. Now, it's time to
make it look good.
HTML Recap
Let's quickly revisit HTML. If I were to ask you what HTML does, you might say:
It provides a skeleton for your webpage.
It gives your page structure.
It adds semantics to your page.
Basically, it's all about the content and structure.
What is CSS?
CSS is all about appearance. It enhances and improves the visual aspects
of your page. Think color changes, text alignment, background colors, and
more.
Essentially, CSS is responsible for the visual styling of your website.
Breaking Down 'Cascading Style Sheets'
Style Sheets: Think of this as a document or sheet containing style
configurations. It includes properties and their assigned values. For example:
background-color: red;
text-color: yellow;
border: 1px solid black;
Cascading: This part deals with how CSS handles conflicts when the same
property is styled in multiple places.
Homework: Research the four factors that CSS uses to determine which
style to apply when there are conflicting styles.
Page 1
Created by Turbolearn AI
So, in a nutshell, CSS is a file or section where you define how your webpage should
be styled, affecting its visual appearance.
Different Ways to Add CSS
There are three primary ways to add CSS to your HTML document:
Inline CSS
Internal CSS
External CSS
Inline CSS
With inline CSS, you apply styles directly within HTML elements using the style
attribute.
<p style="background-color: yellow;">This is a paragraph with a yellow bac
<p style="color: aqua;">This paragraph has aqua text.</p>
Internal CSS
For internal CSS, you embed styles within the <style> tag inside the <head> section
of your HTML document.
Styling with CSS
Internal CSS
Internal CSS involves embedding CSS rules directly within the <style> tag inside the
<head> section of an HTML document.
Page 2
Created by Turbolearn AI
<head>
<style>
h1 {
color: green;
}
</style>
</head>
In this example, all <h1> elements on the page will have green text. This method is
generally discouraged for larger projects due to its tendency to create confusion. As
the number of styles increases, the code becomes more complex and harder to
maintain.
Syntax Breakdown
The syntax for internal CSS consists of a selector, properties, and values.
h1 {
color: green;
}
Selector: Indicates the HTML element to be styled (e.g., h1).
Properties: The styles you want to apply (e.g., color).
Values: The specific settings for those styles (e.g., green).
The selector targets specific HTML elements, and the properties inside the brackets
define how those elements should be styled. The values assign specific
characteristics to those properties.
CSS Precedence
When multiple styles are applied to the same element, the browser follows a specific
order to determine which style takes precedence.
Page 3
Created by Turbolearn AI
Priority Styling Method Example
1 Inline CSS <p style="background-color: yellow;">
2 Internal CSS <style> p {background-color: blueviolet;} </style>
3 External CSS <link rel="stylesheet" href="styles.css">
Inline CSS has the highest priority, followed by internal CSS, and then external CSS.
If there are conflicting rules, the style defined in the inline CSS will be applied.
Using !important
The !important declaration can override the standard CSS precedence.
p {
background-color: blueviolet !important;
}
By adding !important to a style declaration, you ensure that this style will always be
applied, regardless of where it is defined.
External CSS
External CSS involves creating a separate .css file and linking it to your HTML
document. This approach is preferred for larger projects because it promotes better
organization and maintainability.
Steps for Implementing External CSS
1. Create a .css file (e.g., styles.css).
2. Link the .css file to your HTML file using the <link> tag in the <head> section.
<head>
<link rel="stylesheet" href="babbar.css">
</head>
Page 4
Created by Turbolearn AI
Example
babbar.css file:
h1 {
font-size: smaller;
text-align: center;
}
This CSS code will make all <h1> elements smaller and center-aligned on the page.
CSS Styling Methods
Inline CSS
Inline CSS involves directly embedding CSS rules within HTML elements
using the style attribute.
<p style="color: red;">This is a paragraph with inline CSS.</p>
The styling is applied directly to the specific HTML element.
Internal CSS
Internal CSS involves embedding CSS rules within the <style> tag inside
the <head> section of an HTML document.
CSS rules are defined within the <style> tag.
These rules apply to elements within the same HTML document.
External CSS
External CSS involves creating separate .css files containing CSS rules,
which are then linked to HTML documents using the <link> tag.
Page 5
Created by Turbolearn AI
CSS rules are stored in external .css files.
The <link> tag in the HTML <head> links the CSS file to the HTML document.
This method promotes separation of concerns, keeping styling separate from
HTML structure.
Selectors in CSS
Selectors are patterns used to select the HTML elements you want to
style.
Selectors allow you to target specific HTML elements and apply CSS
configurations to them.
Types of Selectors
Selector Type Description Example
Element Target HTML elements based on their
p { color: brown; }
Selectors tag names.
Target a specific HTML element based #articleOne { color: blue;
ID Selectors
on its id attribute. }
Class Target HTML elements based on their .myClass { font-size: 16px;
Selectors class attribute. }
Group Apply the same styles to multiple h1, h2, p { font-family:
Selectors elements. sans-serif; }
Element Selectors
Use HTML tag names to select elements.
Applies styling to all occurrences of the specified element in the HTML
document.
For example, p { color: red; } will turn all paragraphs red.
ID Selectors
Page 6
Created by Turbolearn AI
Uses the id attribute of an HTML element to select a specific element.
ID selectors are prefixed with a # symbol.
For example, #myElement { color: blue; } will style the element with
id="myElement".
Styling with ID Selectors
To style an element using its ID, you must first copy the ID. Then, use a hashtag (#)
followed by the ID name in your CSS to apply styles.
<article id="articleOne">
<!-- Content here -->
</article>
#articleOne {
background-color: green;
}
In the above example, any element with the ID articleOne will have a green
background color. Because IDs are unique, this style will only apply to one element.
Class Selectors
Classes allow you to apply the same styles to multiple elements. Elements can share
the same class, unlike IDs, which should be unique.
<p class="paraClass">This is paragraph one.</p>
<p class="paraClass">This is paragraph two.</p>
<p class="paraClass">This is paragraph three.</p>
To style elements with a specific class, use a dot (.) followed by the class name in
your CSS:
Page 7
Created by Turbolearn AI
.paraClass {
background-color: yellow;
}
In the example above, all elements with the class paraClass will have a yellow
background.
If a paragraph element had the paraClass class removed, the style wouldn't apply:
<p class="paraClass">This is paragraph one.</p>
<p class="paraClass">This is paragraph two.</p>
<p>This is paragraph three.</p>
.paraClass {
background-color: yellow;
}
Only the first two paragraphs would have the yellow background.
You can assign multiple properties within the curly braces. If there are conflicting
rules, the latter rule will be applied. For example, the last rule applied will take
precedence.
.paraClass {
background-color: yellow;
background-color: red;
background-color: aqua; /* aqua will be the resulting background color *
}
Group Selectors
Grouping selectors allows you to apply the same styles to multiple elements at
once, reducing redundancy in your CSS.
To group selectors, separate them with commas:
Page 8
Created by Turbolearn AI
p, article {
max-width: 500px;
}
In this example, all <p> and <article> elements will have a max-width of 500 pixels.
You can also group selectors based on a combination of element and class:
p.paraClass {
text-align: center;
}
This will only apply the text-align: center; style to <p> elements that also have the
class paraClass.
For example:
<p class="paraClass">Paragraph one with paraClass.</p>
<p class="paraClass">Paragraph two with paraClass.</p>
<p>Paragraph three without paraClass.</p>
<article class="paraClass">Article with paraClass.</article>
p.paraClass {
text-align: center;
}
Only the first two <p> elements will have their text centered. The third <p> and the
<article> will not be affected.
Key Concepts Review
Page 9
Created by Turbolearn AI
HTML: Provides the structure, like a skeleton, and describes the content of a
webpage.
CSS: Enhances the appearance and styling of the webpage.
Cascading Style Sheets (CSS) is used for styling and adding appeal
to a webpage.
Inline CSS: Applying styles directly within HTML elements using the style
attribute.
Internal CSS: Defining styles within the <style> tag inside the <head> of an
HTML document.
External CSS: Creating a separate .css file and linking it to the HTML
document.
Selectors Overview
Selector Type Description Example
Element
Styles all HTML elements of a specific type. p { ... }
Selector
ID Selector Styles a specific element with a unique ID. #myElement { ... }
Class Selector Styles all elements with a specific class. .myClass { ... }
Styles multiple elements or selectors with the p, h1, .myClass {
Group Selector
same styles. ... }
Page 10
