Scribd
Upload
13 views15 pages

Lecture 7

This document provides an introduction to CSS, including CSS rules, methods of inserting CSS like inline, internal and external stylesheets, CSS selectors, and selector precedence. CSS is a stylesheet language used to describe the presentation of HTML documents. There are different types of CSS selectors that target specific elements to style. Styles can be applied via inline, internal and external stylesheets, with inline having the highest precedence and external the lowest.

Uploaded by

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

Lecture 7

This document provides an introduction to CSS, including CSS rules, methods of inserting CSS like inline, internal and external stylesheets, CSS selectors, and selector precedence. CSS is a stylesheet language used to describe the presentation of HTML documents. There are different types of CSS selectors that target specific elements to style. Styles can be applied via inline, internal and external stylesheets, with inline having the highest precedence and external the lowest.

Uploaded by

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

Web Technologies

Introduction to CSS
Today’s Lecture
• CSS Introduction
• CSS Rules
• Inserting CSS
– Inline CSS
– Internal CSS
– External CSS
• CSS Selectors
• CSS Selectors Precedence
CSS
• CSS (Cascading Style Sheets)
– It’s a stylesheet language that used to describe the presentation
of a document written in HTML.
• CSS was proposed by Hakon Wium Lie in 1994.
– At that time, Hakon Wium Lie was working with Tim Berners-
Lee at CERN.
• CSS1 was introduced by W3C in 1996.
– Hakon Wium Lie and Bert Bos are credited as the original
developers.
• CSS2 was published by W3C in 1998.
• CSS3 was published by W3C in 1999.
– Several new functionalities have been provided through CSS3
like background decoration, rounded corners, box shadows etc.
CSS Rules
CSS Rules
• Selector
– It describes which element(s) within the HTML document to
target and apply styles.
– Syntax
• Selector { property: value; }
CSS Rules
• Declaration
• Property
• It determines styles that will be applied to the element.
• Property names fall after a selector, within curly brackets {}
and immediately preceding a colon :
• There are various properties we can use.
– Example: color, and font-size.
– p { color: orange; font-size: 16px; }
– Value
• Behavior of the property is determined with a value.
• Values can be identified as the text between colon : and
semicolon ;
– p { color: orange; font-size: 16px; }
Inserting CSS
• When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
• There are three ways of inserting CSS:
– Inline CSS
– Internal CSS
– External CSS
Inserting CSS
• Inline CSS
– It’s used to apply a style for a single element.
– To use inline CSS, add ‘”style’’ attribute to relevant element.
– Style attribute can contain any CSS property.
– Used of inline CSS overrides and styling a particular element.
<body>
<h1 style="color:blue;">Welcome Dear Students</h1>
<p style="color:red;">Web Technologies</p>
</body>
Inserting CSS
• Internal CSS
– It used if one single HTML page has a unique style.
– To use Internal CSS, add <style> in <head> section of relevant page.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: green;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p style="color: blue;">This is a paragraph.</p>
</body>
</html>
Inserting CSS
• External CSS
• It’s ideal when style is applied to many pages.
• To use External CSS, add <link> of a CSS file (.css file extension)
in <head> section.
• <link rel=“stylesheet” href=“mystyle.css”>
– External style sheet can be written in any text editor but must
be saved with .css extension.
Inserting CSS
• External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Selectors
• Simple Selectors
– CSS Universal Selector, CSS Element Selector, CSS Class Selector,
and CSS ID Selector.
• Pseudo-Class Selectors
– Link Pseudo-Classes, User Action Pseudo-Classes, and User
Interface State Pseudo-Classes.
• Attribute Selectors
– Attribute Present Selector, Attribute Equals Selector, Attribute
Contains Selector, Attribute Begins with Selector, and Attribute
Ends with Selector.
• Combining Selectors
– Child Selectors (Descendant Selector, and Direct Child Selector),
and Sibling Selectors (General Sibling Selector, and Adjacent
Sibling Selector).
CSS Selectors Precedence
• Which styles will be applicable when there is more than one style
specified?
• All styles cascade into a stylesheet in this order with highest to
lowest priority in the sequence:
– Inline CSS
– Internal CSS
– External CSS
– Browser's default styles
Summary of Today’s Lecture
• CSS Introduction
• CSS Rules
• Inserting CSS
– Inline CSS
– Internal CSS
– External CSS
• CSS Selectors
• CSS Selectors Precedence
References
• https://www.w3schools.com/css/default.asp
• https://www.w3schools.com/css/css_intro.asp
• https://www.w3schools.com/css/css_syntax.asp
• https://www.w3schools.com/html/html_css.asp

You might also like