Scribd
Upload
2 views

Chapter 3 - Cascading style sheet(SS)

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in web development for styling HTML documents. It covers CSS syntax, methods of incorporating CSS into HTML, and various properties related to colors, fonts, margins, and the box model. Additionally, it discusses CSS inheritance, specificity hierarchy, table styling, and measuring units used in CSS.

Uploaded by

yibeltalmesfin278
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Chapter 3 - Cascading style sheet(SS)

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in web development for styling HTML documents. It covers CSS syntax, methods of incorporating CSS into HTML, and various properties related to colors, fonts, margins, and the box model. Additionally, it discusses CSS inheritance, specificity hierarchy, table styling, and measuring units used in CSS.

Uploaded by

yibeltalmesfin278
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Web Programming

Instructor: Melaku M.

Target Group: G4 CS Student


Chapter 3
Introduction to Cascading Style Sheets(CSS)

❖CSS is a stylesheet language used to describe the presentation of a


document written in HTML.
❖It is used to format/style the layout and appearance of a webpage.
❖CSS describes how HTML elements should be displayed/rendered
on screen, or in other media.
❖With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, set background images or background colors, and much more.
CSS Syntax
❖A CSS rule consists of a selector and a declaration block.
✓ The selector points to the HTML element you want to style.
✓ The declaration includes a CSS property name and a value.
❖Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.

h1 is a selector in CSS, color:blue is declaration, color is a property, blue is the property value
Using CSS
❖CSS can be added to HTML documents in 3 ways:
➢Inline - by using the style attribute inside HTML elements
➢Internal - by using a <style> element in the <head> section
➢External - by using a <link> element to link to an external CSS file

❖The most common way to add CSS, is to keep the styles in external
CSS files.
1. Inline CSS
❖An inline CSS is used to apply a unique style to a single HTML element.

❖An inline CSS uses the style attribute of an HTML element.

❖The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>


<p style="color:red;">A red paragraph.</p>
2. Internal CSS
❖An internal CSS is defined in the <head> section of an HTML
page, within a <style> element.

❖An internal CSS is used to define a style for a single HTML page.

❖The example in next slide sets the text color of ALL the <h1>
elements (on that page) to blue, and the text color of ALL the <p>
elements to red. In addition, the page will be displayed with a
"powderblue" background color:
2. Internal CSS
<html>
<head>
<style>
body{background-color: powderblue;}
h1 {color: blue;}
p {color: red; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External CSS
❖An external style sheet is used to define the style for many HTML pages.

❖To use an external style sheet, add a link to it in the <head> section of each
HTML page:
CSS Colors, Fonts and Sizes
❖Demonstrating some of the commonly used CSS properties.

❖The CSS color property defines the text color to be used.

❖The CSS font-family property defines the font to be used.

❖The CSS font-size property defines the text size to be used.

❖The CSS border property defines a border around an HTML element.

❖The CSS padding property defines a padding (space) between the text and
the border.

❖The CSS margin property defines a margin (space) outside the border.
<html>
<head>
<style>
h1 { color: blue;
font-family: verdana;
font-size: 30px;}
p { color: red;
font-family: courier;
font-size: 16px;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Border
The CSS border property defines a border around an HTML element.
Border and padding
The CSS padding property defines a padding (space) between the text and the border.
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Style Sheet Rules
❖Use the HTML style attribute for inline styling

❖Use the HTML <style> element to define internal CSS

❖Use the HTML <link> element to refer to an external CSS file

❖Use the HTML <head> element to store <style> and <link> elements

❖Use the CSS color property for text colors

❖Use the CSS font-family property for text fonts

❖Use the CSS font-size property for text sizes

❖Use the CSS border property for borders

❖Use the CSS padding property for space inside the border

❖Use the CSS margin property for space outside the border.
Style rule Precedence: Specificity Hierarchy

❖Specificity is the algorithm used by browsers to determine the CSS declaration


that is the most relevant to an element, which in turn, determines the property
value to apply to the element.

❖The specificity algorithm calculates the weight of a CSS selector to determine


which rule from competing CSS declarations gets applied to an element.
❖Precedence order:
1. Inline styles - Example: <h1 style="color: pink;">
2. IDs - Example: #navbar {color: blue;} How to Calculate Specificity?
3. Classes, - Example: .test {color: green;}
4. Elements and pseudo-elements - Example:p {color: red;}
In this example, we have used the "p" element as selector, and specified a
red color for this element. The text will be red:

The text will now be green because the class


selector is given higher priority
In this example, we have added the id selector (named "demo"). The
text will now be blue, because the id selector is given higher priority.
In this example, we have added an inline style for the "p" element. The text
will now be pink, because the inline style is given the highest priority:
CSS Inheritance
❖Inheritance, a fundamental concept in object-oriented programming (OOP),
mirrors real-life inheritance where children inherit traits from parents.

❖In OOP, a child class inherits properties from a parent class, establishing a
hierarchical relationship between them.

❖CSS Inheritance: important mechanism that allows styles to be passed down


from parent elements to their child elements. This means that child elements
automatically inherit the styles of their parent elements unless they have their
own conflicting styles.
CSS Inheritance
❖Syntax Here parentclass passes a
CSS styling done as color
to be red. Whereas the
child classes div1Child
and div2Child have no
ruleset of color: red set to
them but they got
displayed in red.
It is because the child
div’s 1 and 2 inherited the
properties from the parent
i.e. parentclass.
Example 1:

❖In CSS inheritance, the child element will naturally inherit


properties from its parent element.
Example 2:

❖In this example, the child paragraph element inherits the font-size and color
styles from its parent, the .parent div. However, it also has its own font-weight
style, which overrides the inherited font-weight from its parent.
List of Inherited and non-inherited properties
Foreground and Background Properties
➢Foreground and background properties in CSS are used to style the content
and the area surrounding it respectively.

Foreground Properties 3. text-decoration: Applies


decorations like underline,
1. Color: Use the color property to
overline
set the text color. text-decoration: underline;

2. Font: Control the font style, size, 4. Text Shadow:


Adds shadows effect to text.
weight, and family.
Foreground and Background Properties
➢Background Properties.

1. Background Color: Set the background color of an element.

2. Background Image: Use an image as a background.


CSS Box Model
❖The CSS box model is essentially a box that wraps around every HTML
element. It is a layout model that describes how different components of a web
element are structured and positioned. It consists of : content, padding, borders
and margins.
CSS Box Model
Explanation of the different parts:

1. Content - The content of the box, where text and images appear

2. Padding - This is the space between the content box and the border.

3. Border - This is the outer edge of the element. It can be styled with
different colors, widths, and styles (e.g., solid, dashed, dotted).

4. Margin - Margin: This is the space between the border of the element
and other elements on the page. It can be used to control the spacing
between elements.
Demonstrating the Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px; }
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: white;
width: 400px;
border: 15px solid blue;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content </p>
</body>
</html>
Table styling properties
CSS provides a rich set of properties to style tables, allowing you to
customize their appearance, layout and enhance its functionality.
A typical HTML table structure looks like this:

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
CSS Properties for Table Styling
►padding: Sets the space between the cell content and the cell border.
►border: Sets the border style, width, and color for the cell.
►text-align: Specifies the horizontal alignment of the cell content.
►vertical-align: Specifies the vertical alignment of the cell content.
►width: Sets the width of the cell.
►height: Sets the height of the cell.
►font-weight: Sets the font weight (e.g., bold).
►background-color: Sets the background color of the header cell.
►color: Sets the color of the header cell text.
►border-spacing: Sets the spacing between table borders when border-
collapse is set to separate.
►table-layout: Determines how the table layout is calculated.
• auto: The browser determines the table layout.
• fixed: The table layout is based on the width of table cells.
CSS Properties for Table Styling
1. Borders: Add borders to the table and its cells.
<style>
table {
border-collapse: collapse; /* Merges table cell borders */
width: 100%; /* Full-width table */
}
th, td {
border: 1px solid #ddd; /* Light gray border */
}
</style>
CSS Properties for Table Styling
2. Padding and Alignment: Control padding and text alignment within cells
<style>
th, td {
padding: 8px; /* Space inside cells */
text-align: left; /* Align text to the left */
}
</style>
CSS Properties for Table Styling
3. Background Colors: Set background colors for headers and alternating rows.
<style>
th {
background-color: #f2f2f2; /* Light gray for headers */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Light gray for even rows */
}
</style>
CSS Properties for Table Styling
4. Hover Effects: Change the background color of rows on hover.
<style>
tr:hover {
background-color: #f1f1f1; /* Highlight on hover */
}
</style>
CSS Properties for Table Styling
5. Font Styles: Customize font size and style..
<style>
th {
font-weight: bold; /* Bold text for headers */
}
td {
font-size: 14px; /* Set a specific font size */
}
</style>
CSS Measuring Units
❖CSS provides various measuring units that help define sizes, spacing, and
positions of elements on a webpage.

❖Understanding these units is crucial for responsive design and layout.

❖Most commonly used CSS measuring units:

1. Pixels (px): A fixed unit representing a single dot on the screen.

Example: width: 300px;

2. Points (pt): Primarily used in print styles; 1 point is 1/72 of an inch.

Example: font-size: 12pt;


3. Inches (in): Represents physical inch measurements.
Example: width: 2in;
CSS Measuring Units
4. Centimeters (cm): Represents physical centimeter measurements.
Example: width: 5cm;
5. Millimeters (mm): Represents physical millimeter measurements.
Example: width: 50mm;
6. Percentages (%): Relative to the parent element's size.
Example: width: 50%; (50% of the parent element's width)
7. Em (em): Relative to the font-size of the element itself.
Example: font-size: 2em; (2 times the current font size element p=16) 2*16
8. Rem (rem): Relative to the font-size of the root element (<html>).
Example: font-size: 2rem; (2 times the root font size eg. Body 16) 2*16

You might also like