Scribd
Upload
70 views

Lab 11: Cascading Style Sheets (CSS)

1) CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including colors, layout, and fonts. It can be used to style web pages and user interfaces for web and mobile applications. 2) There are three main benefits of CSS: it solves the problem of repeating style information on every page, it saves a lot of time by allowing changes to entire sites from one CSS file, and it provides more attributes than HTML to define styles. 3) There are three ways to insert CSS - external style sheets, internal style sheets within <style> tags, and inline styles within HTML elements using the style attribute. External style sheets are best for whole sites

Uploaded by

Tayyab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
70 views

Lab 11: Cascading Style Sheets (CSS)

1) CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including colors, layout, and fonts. It can be used to style web pages and user interfaces for web and mobile applications. 2) There are three main benefits of CSS: it solves the problem of repeating style information on every page, it saves a lot of time by allowing changes to entire sites from one CSS file, and it provides more attributes than HTML to define styles. 3) There are three ways to insert CSS - external style sheets, internal style sheets within <style> tags, and inline styles within HTML elements using the style attribute. External style sheets are best for whole sites

Uploaded by

Tayyab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Student Name: __________________________Roll No: ______________ Section: ______________

Lab 11: Cascading Style Sheets (CSS)

What is CSS?
CSS is an acronym stands for Cascading Style Sheets. It is a style sheet language
which is used to describe the look and formatting of a document written in markup language.
It provides an additional feature to HTML. It is generally used with HTML to change the style
of web pages and user interfaces.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

• CSS describes how HTML elements are to be displayed on screen, paper, or in another
media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Why use CSS?


These are the three major benefits of CSS:
1) Solves a Big Problem
Before CSS, tags like font, color, background style, element alignments, border and size had
to be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page,
it will be become a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!

2) Saves a lot of time


CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.
CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title>, <P> etc.
Declaration Block: The declaration block can contain one or more declarations separated by
a semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.


CS 111| Introduction to ICT 1
Student Name: __________________________Roll No: ______________ Section: ______________

Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned
to color property.
Selector{Property1: value1; Property2: value2; ..........;}
<html> <!--Lab 11 Example 01-->
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World! </p>
<p>These paragraphs are styled with CSS</p>
</body>
</html>
CSS Selectors
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector


The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color
<html> <!--Lab 11 Example 02-->
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS Id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

CS 111| Introduction to ICT 2


Student Name: __________________________Roll No: ______________ Section: ______________

The id of an element should be unique within a page, so the id selector is used to select one
unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

The style rule below will be applied to the HTML element with id="para1":

<html> <!--Lab 11 Example 03-->


<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Note: An id name cannot start with a number!

3) CSS Class Selector


The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of
the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
<html> <!--Lab 11 Example 04-->
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Note: A class name cannot start with a number!
You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
<html> <!--Lab 11 Example 05-->
<head>
<style>
p.center {
text-align: center;
CS 111| Introduction to ICT 3
Student Name: __________________________Roll No: ______________ Section: ______________

color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>

HTML elements can also refer to more than one class.


In the example below, the <p> element will be styled according to class="center" and to
class="large":

<html> <!--Lab 11 Example 06-->


<head>
<style>
p.center {
text-align: center;
color: blue;
font-family: arial;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be blue and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
</body>
</html>

4) CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the pages.
<html> <!--Lab 11 Example 07-->
<head>
<style>
*{
color: green;
font-size: 20px;
background-color:yellow;
font-family: verdana; }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>

CS 111| Introduction to ICT 4


Student Name: __________________________Roll No: ______________ Section: ______________

<p>And me!</p>
</body>
</html>

5) CSS Group Selector


If you have elements with the same style definitions, like this:
h1 { text-align: center;
color: red; }
h2 { text-align: center;
color: red; }
p{ text-align: center;
color: red; }
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:

<html> <!--Lab 11 Example 08-->


<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Three Ways to Insert CSS


There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style

External Style Sheet


With an external style sheet, you can change the look of an entire website by changing just one
file!
Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
<html> <!--Lab 11Example 09-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
CS 111| Introduction to ICT 5
Student Name: __________________________Roll No: ______________ Section: ______________

</html>

An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.
Here is how the "myStyle.css" looks:

mystyle.css
body {
background-color: lightblue;
}

h1 {

color: navy;

margin-left: 20px;
}
Note: Do not add a space between the property value and the unit (such as margin-left: 20
px;). The correct way is: margin-left: 20px;
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:

<html> <!--Lab 11 Example 10-->


<head>
<style>
body { background-color: linen; }
h1 {
color: maroon;
margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:

<html> <!--Lab 11 Example 11-->


<body>
<h1 style="color:blue; margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>

CS 111| Introduction to ICT 6


Student Name: __________________________Roll No: ______________ Section: ______________

Lab 11 Task

Question No. 01: Apply the CSS styling on lab 11

CS 111| Introduction to ICT 7

You might also like