Scribd
Upload
79 views

Css

CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS describes how elements should be rendered on screen, paper, or other media. It controls elements such as layout, colors, and fonts. CSS rules cascade from broad to narrow with the last defined rule taking precedence. This allows efficient maintenance and presentation across different devices.

Uploaded by

Pravin Lakudzode
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
79 views

Css

CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS describes how elements should be rendered on screen, paper, or other media. It controls elements such as layout, colors, and fonts. CSS rules cascade from broad to narrow with the last defined rule taking precedence. This allows efficient maintenance and presentation across different devices.

Uploaded by

Pravin Lakudzode
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS

What is HTML?
 HTML is the language for describing the structure of Web pages.

 HTML gives authors the means to:

1. Publish online documents with headings, text, tables, lists, photos,


etc.
2. Retrieve online information via hypertext links, at the click of a
button.
3. Include spread-sheets, video clips, sound clips, and other applications
directly in their documents.
What is CSS?
1. CSS is an acronym for Cascading Style Sheets.
2. CSS mainly does just one thing: it describes how web pages
should look.
3. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language.
4. The cascading means that a style applied to a parent element
will also apply to all children elements within the parent.
5. For example, setting the color of body text will mean all
headings and paragraphs within the body will also be the same
color.

1. Try it yourself
2. https://www.w3schools.com/css/tryit.asp?filename=trycss_color
Why CSS?
 The biggest problem in traditional classic (specially static) HTML
pages is that the text of your web page and the formatting
operations performed over it are all mixed inside one place / one
file.

 Saves a lot of time

 Provide more attributes


Advantages of CSS
 CSS saves time :
You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web
pages as you want.
 Pages load faster :
Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance:
To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Multiple Device Compatibility:
Style sheets allow content to be optimized for more than one type of device.
By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
Defining a Style
 A style is defined with two sections: one or more selectors and
one or more declarations enclosed in {Curly Brackets}
 Each declaration is made up of a Property: Value; pair
 Syntax is given below

 The above image shows the use of one selector and two
Declarations. Note the use of { } : ; which are essential.
Defining a Style
 A simple style rule syntax with one selector and one declaration
(property: value; pair}
selector {property: value;}

 Example of defining
p {font-size: 10pt}
CSS SELECTORS
Applying Style Sheets
 There are 3 types of style sheets. The difference is where the
style is defined and the area where that style is applied.
1. Inline style sheet within a tag. Applies only to that particular
occurrence of that tag.

2. Internal (also called Embedded) style sheet is defined within the


head section of a page. Applies to that page only

3. External style sheet defined in a separate, hence external, file.


Applies to all pages that link to the external style sheet.
Types of CSS

 Inline styles
 Embedded styles/Internal style
 External styles
Inline style sheet
 Use for
Inline style sheet are should only be used where a particular
style is not going to be repeated elsewhere on the page/site

 Where to define
The definition is defined within the HTML tag in the body
section of the HTML code. It must be redefined every time it is
required

 Syntax
<element STYLE="property:value">
Internal style sheet
 Use for
It is ideal if only 1 page is going to be used for this style.
The styles can then be used more than once throughout the page.
 Where to define
The Internal style sheet is defined within the head section.
<head>
< style type="text/css">
Your Style definitions go here
< /style>
< /head>
 Example:
<head>
< style type="text/css">
Body {background-color: #3333FF; color: #000033;}
p {margin-left: 6px}
< /style>
< /head>
External style sheet

 Use for
This is the best method if you wish to control the design of more
that one page.
 Where to define
The style definitions are only written once and saved into a file.
Each page that wishes to use that file places a link to the file in
the HEAD section.
<head> Section of your pages
Defining External style sheet

 There are two ways to create a CSS file.


 The first is to write the CSS code in Notepad and save it as
a .css file,
 The second one is to directly add the style sheet in our
Solution Explorer and direct Visual Studio to use it on our
HTML page.
Order of precedence
 If the same style is defined with different values in the
different style sheets then the order of precedence is
1. Inline Style Sheets
2. Internal Style Sheets
3. The last External Style sheet
Element based style
 Use an element selector to define a set of properties that you
want every instance of a particular HTML element to use in a
web page.
 For example, to create a margin of 25 pixels around all
paragraphs (content surrounded by <p> tags) in your web page,
you create a style that uses the p element as its selector and
contains declarations for margin properties, as shown in the
following code.
 Example of a rule set for an element selector
p { margin-left: 25px; margin-right: 25px }
Class based style
 Use a class selector to define a set of properties that you want to
use on one or more items in a web page.
 If you ever want to modify the style, you can edit the style's rule
set and every item you've applied the style to will automatically
reflect the changes.
 In the following example, "introduction" is the style's selector,
and "font-size: small" is one property declaration, followed by a
second property declaration.
 Example of a rule set for a class selector
.introduction {font-size: small; color: white}
 Syntax
.class {
css declarations;
}
ID based styles
 Use an ID selector when you want to define a set of properties
for a single item or block of items that you want to distinguish
from all other content in one or more web pages.
 Use an ID selector when you want to style a single HTML
element in a web page.
 Example of a rule set for an ID-based style
#footer {background-color: #CCCCCC; margin: 15px}
Website(2)
HtML ol and ul

You might also like