Scribd
Upload
82 views

CSS Notes Basic

introduction to CSS

Uploaded by

wycliffe.swa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
82 views

CSS Notes Basic

introduction to CSS

Uploaded by

wycliffe.swa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS NOTES

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document
written in HTML or XML. CSS enables the separation of content (HTML) from presentation, making
it easier to maintain web design and styling across multiple pages.
Key Concepts in CSS
1. Selectors:
Selectors are patterns used to target HTML elements that you want to style.
Common selectors:
- Type Selector: Targets all instances of a given HTML element.
css
p{
color: blue;
}
- Class Selector: Targets elements with a specific class attribute. Classes are reusable.
css
.intro {
font-size: 16px;
}
- ID Selector: Targets an element with a unique ID. IDs should be unique within a page.
css
#header {
background-color: gray;
}
2. Properties and Values:
CSS uses properties to define the style of an element and values to specify how the property should
be applied.
Example:
css
body {
background-color: lightgray;
color: black;
font-family: Arial, sans-serif;
}

Page 1 of 8
3. Box Model:
The box model describes how the browser renders an element as a rectangular box, which consists
of:
- Content: The actual content of the box (text, images, etc.).
- Padding: Space between the content and the border.
- Border: A line around the padding and content.
- Margin: Space outside the border.
Example:
css
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
4. CSS Syntax:
A typical CSS rule consists of a selector and a declaration block.
css
selector {
property: value;
}
Example:
css
h1 {
color: darkblue;
text-align: center;
}
5. Cascade and Specificity:
- Cascade: Determines which CSS rule takes precedence when multiple rules apply to the same
element. The order is:
- Inline styles (inside HTML elements)
- External and internal CSS (in `<style>` tags)
- Browser default styles

Page 2 of 8
- Specificity: Refers to how the browser determines which rule to apply based on the importance of
selectors. The more specific the selector, the higher its priority.
Example of specificity order:
css
#id > .class > element
Ways to Apply CSS
a. Inline CSS:
Applied directly to an HTML element via the `style` attribute. Use sparingly as it mixes content and
presentation, making it harder to maintain.
Example:
html
<p style="color: red; font-size: 18px;">This is styled using inline CSS.</p>
b. Embedded (Internal) CSS:
Placed inside the `<style>` tag within the `<head>` section of an HTML document. It is useful for
applying CSS to a single page.
Example:
html
<html>
<head>
<style>
body {
background-color: lightyellow;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is styled using embedded CSS.</h1>
<p>CSS rules are defined in the <style> section.</p>
</body>

Page 3 of 8
</html>
c. External CSS:
Stored in a separate `.css` file, allowing you to apply the same style to multiple HTML documents.
It is the preferred method for large projects due to better maintainability.
- HTML File:
html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Styled with external CSS</h1>
<p>This page uses an external stylesheet.</p>
</body>
</html>
- CSS File (`styles.css`):
css
body {
background-color: white;
font-family: 'Arial', sans-serif;
}
h1 {
color: darkgreen;
text-align: left;
}

p{
color: blue;
font-size: 20px;
}
Common CSS Properties
a. Text and Font Styling:
- `color`: Sets the text color.

Page 4 of 8
- `font-family`: Specifies the font type.
- `font-size`: Specifies the size of the font.
- `text-align`: Aligns the text (left, center, right).
- `font-weight`: Controls the boldness of text.
Example:
css
p{
color: black;
font-size: 16px;
font-family: 'Georgia', serif;
font-weight: bold;
}
b. Background Styling:
- `background-color`: Sets the background color.
- `background-image`: Sets an image as the background.
Example:
css
body {
background-color: #f0f0f0;
}
c. Box Model Properties:
- `margin`: Sets the space outside the border of an element.
- `padding`: Sets the space between the content and the border.
- `border`: Defines the border around the element.
Example:
css
.box {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

Page 5 of 8
d. Layout Properties:
- `display`: Defines the display behavior of an element (e.g., `block`, `inline`, `flex`).
- `position`: Specifies the positioning method (e.g., `absolute`, `relative`, `fixed`).
- `float`: Used to float elements (left or right) in a layout.
- `flexbox` and `grid`: Modern layout systems for aligning and distributing elements.
Example (Flexbox):
css
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: coral;
}
Responsive Web Design with CSS
Responsive design allows web pages to adapt to different screen sizes (mobile, tablet, desktop). This
is achieved using media queries, which apply styles based on device characteristics like screen width.
Example:
css
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
In this example, when the screen width is 600px or smaller, the layout changes to a column format.
# Practical Application: Full HTML Example with Embedded and External CSS
- HTML with both Embedded and External CSS:
html
<!DOCTYPE html>
<html>
<head>

Page 6 of 8
<title>Comprehensive CSS Example</title>
<link rel="stylesheet" href="external-styles.css"> <!-- External CSS -->
<style>
/* Embedded CSS */
h1 {
color: darkblue;
text-align: center;
}

p{
color: #555;
font-size: 18px;
}
.container {
display: flex;
justify-content: space-around;
}
.box {
width: 150px;
height: 150px;
background-color: lightcoral;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<p>This page uses both embedded and external CSS for styling.</p>

Page 7 of 8
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
- External CSS (`external-styles.css`):
css
body {
background-color: lightgrey;
font-family: 'Verdana', sans-serif;
}
Conclusion:
CSS is essential for creating visually appealing and responsive web pages. By using different types of
CSS (inline, embedded, external) and understanding key properties (box model, layout, colors, etc.),
you can control how web content is displayed across different devices and platforms.

Page 8 of 8

You might also like