Scribd
Upload
48 views23 pages

CSS Notes

This document provides an overview of cascading style sheets (CSS) and includes the following key points: - It describes three types of CSS - inline, embedded/internal, and external - and how each can be used to style web pages. - External style sheets allow uniform styling across multiple pages by linking to a single CSS file, while inline and embedded styles target individual elements or pages. - CSS follows a cascading priority system where more specific styles override general ones. This allows different levels of styling from broad to targeted. - Selectors like classes and IDs provide ways to target styling to specific elements using attributes added to HTML tags. - The document outlines concepts like the

Uploaded by

nallamal1006
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
48 views23 pages

CSS Notes

This document provides an overview of cascading style sheets (CSS) and includes the following key points: - It describes three types of CSS - inline, embedded/internal, and external - and how each can be used to style web pages. - External style sheets allow uniform styling across multiple pages by linking to a single CSS file, while inline and embedded styles target individual elements or pages. - CSS follows a cascading priority system where more specific styles override general ones. This allows different levels of styling from broad to targeted. - Selectors like classes and IDs provide ways to target styling to specific elements using attributes added to HTML tags. - The document outlines concepts like the

Uploaded by

nallamal1006
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/ 23

CT050-3-1-WAPP

WEB APPLICATIONS
CASCADING STYLESHEET
(CSS)

Module Code & Module Title Slide Title SLIDE 1


Topic & Structure of The Lesson

• Introduction
• Inline Styles
• Embedded Style Sheets
• Linking External Style Sheets
• Conflicting Styles
• HTML Selectors
• Class Selectors
• W3C CSS Validation Service
• Web Resources

Module Code & Module Title Slide Title SLIDE 2


Learning Outcomes

• At the end of this topic, You should be able to


• Control the appearance of a Web site by creating style sheets.
• Use a style sheet to give all the pages of a Web site the same look and feel.
• Use the class attribute to apply styles.
• Specify the precise font, size, color and other properties of displayed text.
• Specify element backgrounds and colors.
• Understand the box model and how to control the margins, borders and padding.
• Use style sheets to separate presentation from content.

Module Code & Module Title Slide Title SLIDE 3


Key Terms You Must Be Able To Use

• If you have mastered this topic, you should be able to use the following terms
correctly in your assignments and exams:

• CSS
– Cascading Style Sheet

Module Code & Module Title Slide Title SLIDE 4


Introduction

• Cascading Style Sheets (CSS)


– Separation of structure from presentation
• a style sheet is a document that contains instructions that define how to
display HTML elements in a Web page.
• These instructions are called styles.
• An external style sheet typically has the .css file extension.
• 3 types
– Inline
– Embedded / Internal
– External

Module Code & Module Title Slide Title SLIDE 5


Inline Styles

• Declare an individual element’s format


– Attribute style
– CSS property
– Followed by a colon and a value <p style="font-size: 20pt; color:
• Inline style is a one-time style instruction #0000ff"> Hello </p>
placed in an individual HTML tag.
• However, using inline CSS means that you <p> Bye</p>
are not taking advantage of the true powers
of CSS, and it means that you are not
separating content from presentation.

Module Code & Module Title Slide Title SLIDE 6


Inline Styles

Module Code & Module Title Slide Title SLIDE 7


Embedded/ Internal Style Sheets

• Embed an entire CSS document in an XHTML document’s head section


– Multipurpose Internet Mail Extensions (MIME) type
• Describes a file’s content
– Property background-color
• Specifies the background color
– Property font-family
• Specifies the name of the font to use
– Property font-size
• Specifies a 14-point font
• it only affects the style of the page on which it is written

Module Code & Module Title Slide Title SLIDE 8


Embedded/Internal Style Sheets

Module Code & Module Title Slide Title SLIDE 9


Linking External Style Sheets

• External style sheets


– Can provide uniform look and feel to entire site
• One external style sheet can control the appearance of many Web pages.
• By creating a CSS file that contains all of the style information for your website, you
can:
– Maintain a consistent look across all pages that link to the style sheet.
– Easily update the look of all pages by changing the values in one file.
– Make your pages much smaller and quicker to download, because all of the style
information has been removed to one file.

Module Code & Module Title Slide Title SLIDE 10


Linking External Style Sheets

• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:

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

Module Code & Module Title Slide Title SLIDE 11


Linking External Style Sheets

Module Code & Module Title Slide Title SLIDE 12


Conflicting Styles

• You could use any or all of these types of styles in a single HTML document.
• If multiple style instructions exist, they will “cascade” into a single set of instructions,
with some instructions taking priority over others.
• This list describes the priority
1. Inline Style (affects single HTML element; overrides all other style instructions)
2. Embedded Style Sheet (affects one HTML document; overrides external style sheet)
3. External Style Sheet (affects multiple documents, overridden by #1 and #2)
4. Browser default

Module Code & Module Title Slide Title SLIDE 13


Conflicting Styles

Some other points to keep in mind:


• If two styles are applied to the same text, the browser displays all attributes of both
styles unless specific attributes conflict.
• If attributes from two styles applied to the same text conflict, the browser displays the
attribute of the innermost style (the style closest to the text itself).
• HTML formatting will override any CSS formatting.
• Again, please understand that different browsers may implement CSS differently. It is
very important to test your Web pages in a variety of browsers to make sure your pages
display correctly.

Module Code & Module Title Slide Title SLIDE 14


Conflicting Styles

Module Code & Module Title Slide Title SLIDE 15


HTML Selectors

• HTML selectors are the text part of a HTML tag and are used to define the
behavior of the specific HTML tag.
• For example: H1 is the selector for <H1> tag.
• Although HTML tag and the selector appear to be identical, they are not the
same.
• The HTML selector is used to control the behavior of its specific HTML tag.

h1 { font-family: arial, sans-


serif }
p { font-size: 14pt }
Module Code & Module Title Slide Title SLIDE 16
Class Selectors

• Class selectors are selectors that you


create from scratch.
• Can be applied to any HTML tag

.userDefineName { color: blue; }


<p class="userDefineName">Do Re
Mi</p>
<h1 class =“userDefienName”>Hello</h1>
<p>Bye</p>
Module Code & Module Title Slide Title SLIDE 17
ID Selectors

• ID selectors matches an element based on the value of its id attribute.


• Can be applied to any HTML tag

#idname { color: red; }

<p id=“idname”>Do Re Mi</p>


<h1 id=“idname”>Hello</h1>
<p>Bye</p>

Module Code & Module Title Slide Title SLIDE 18


Class vs ID Selector

• Class selectors can be used to identify more then one HTML element.
• ID selectors only used to identify one HTML element.

<html>
<head>
</head> CSS
<body>
<div class="main"> .main {
<h3>This is a testing of CSS styling.</h3> background-color: #FFAFA4;
<p id="demo">Sample paragraph with an ID</p> }
<p> Sample paragraph with no ID</p>
</div> #demo {
</body> background-color: #DEDAF7;

</html> }

Module Code & Module Title Slide Title SLIDE 19


Quick Review Question

• Discuss the types of CSS and its usage in various type of web pages.

Module Code & Module Title Slide Title SLIDE 20


SUMMARY OF MAIN TEACHING POINTS
 CSS
 Types
 Class
 ID

Module Code & Module Title Slide Title SLIDE 21


Question and answer session

Q&A
Module Code & Module Title Slide Title SLIDE 22
What we will cover next

• ASP.NET

Module Code & Module Title Slide Title SLIDE 23

You might also like