Scribd
Upload
7 views

Cascaded Style Sheets: 1. What Is CSS?

The document discusses CSS (Cascading Style Sheets) and how it is used to style HTML elements. It covers the different ways to insert CSS styles into an HTML page, including external, internal and inline styles. It also discusses CSS selectors, pseudo-classes, pseudo-elements and some CSS3 modules.

Uploaded by

nada abdelrahman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Cascaded Style Sheets: 1. What Is CSS?

The document discusses CSS (Cascading Style Sheets) and how it is used to style HTML elements. It covers the different ways to insert CSS styles into an HTML page, including external, internal and inline styles. It also discusses CSS selectors, pseudo-classes, pseudo-elements and some CSS3 modules.

Uploaded by

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

Cascaded Style Sheets

1. What is CSS?

 CSS stands for Cascading Style Sheet, CSS describes how HTML elements are to
be displayed on screen, paper, or in other media.
 HTML was NEVER intended to contain tags for formatting a web page, it was created
to describe the content of a web page.

Implementation: Run demo1/index.html and demo2/index.html. this for students to imagine


what the subject is taking about.

2. Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

like indexExternalCSS.html

 Internal style sheet

<head>
<style>
body {
background-color: linen;
}
</style>
</head>

like indexInternalCSS.html

 Inline style

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

Implementation: Run index.html


3. Styling using element name, selector ID, and style class.

Implementation: Run index.html, examples in internal styling paragraph.

4. Psedudo-classes.

A pseudo-class is used to define a special state of an element. For example, it


can be used to: style an element when a user mouse’s over it or style visited
and unvisited links differently.

Implementation: Run index2.html, the example uses a link to be colored when it’s active,
visited and unvisited.

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

 Style the first letter, or line, of an element


 Insert content before, or after, the content of an element

selector::pseudo-element {
property:value;
}

Implementation: Run index2.html, the example uses a paragraph that colors the first line.

5. CSS3: (Please note this for student knowledge only, they are not
required with any coding in this point)

CSS3 is the latest standard for CSS, Some of the most important CSS3
modules are:

 Selectors, Box Mode, Backgrounds and Borders, Image Values and


Replaced Content, Text Effects, 2D/3D Transformations, Animations,
Multiple Column Layout, User Interface.

Implementation: Run css3.html, the example uses a paragraph that colors the first
line.

You might also like