Scribd
Upload
12 views

Developing Cascading Style

it talks about how to develop CSS

Uploaded by

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

Developing Cascading Style

it talks about how to develop CSS

Uploaded by

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

Developing Cascading Style Sheet

Alkan Health Science and Technology


Department of Web Development and Database

Compiled by:-
Bedru Y.

Oct ,2023
Wollo, Ethiopia
Presentation Outline
 Introduction CSS
 Use CSS techniques to create web pages
 Ensure web page and CSS are validated and tested
Cascading Style Sheets (CSS)
• Describes the appearance, layout, and presentation of information on
a web page
• HTML describes the content of the page.
• Describes how information is to be displayed, not what is being
displayed
• Can be embedded in HTML document or placed into separate .css
files
Cascading Style Sheets (CSS)
• CSS ("Cascading Style Sheets") determines how the elements in
our HTML documents are displayed and formatted.
• By using CSS, we separate the content of a web page from the
presentation (format and styling) of that content.
• CSS enables us to make all pages of our website look similar and
consistent.
• The power of CSS is that it allows us to make site-wide formatting
changes by making edits to a single file.
Cascading Style Sheets (CSS)
• A CSS file consists of one or more rules.
• Each rule starts with a selector
• A selector specifies an HTML element(s) and then applies style
properties to them
• The correct syntax of a CSS declaration is: selector {property:
value;}
Cascading Style Sheets (CSS)
• Internal and external style sheets use this identical CSS syntax.
• Internal style sheets must use the opening and closing <style> tags
to surround the CSS code,
• while external style sheets do not use the <style> element.
• A semicolon must be placed after each CSS declaration.
• Omitting this semicolon is the single most common mistake made by
those learning CSS.
Cascading Style Sheets (CSS)
• We can define as many properties as we wish for a selector:
Cascading Style Sheets (CSS)
• We can add CSS code in any combination of three different ways:
• Inline Style - CSS code is placed directly into an XHTML element
within the <body> section of a web page.
• Internal Style Sheet - CSS code is placed into a separate,
dedicated area within the <head> section of a web page.
• External Style Sheet - CSS code is placed into a separate
computer file and then linked to a web page.
Cascading Style Sheets (CSS)
• Inline Style - To define an inline CSS style, we simply add the style
attribute to an HTML element with the CSS declaration as the attribute
value:
Cascading Style Sheets (CSS)
• Internal Style - To use an internal CSS style sheet, we add a <style>
section within the <head> of the page. All our CSS declarations go within
this section:
Cascading Style Sheets (CSS)
• External Style - To use an external CSS style sheet, we create a new file
(with a .css extension) and write our style declarations into this file.
• We then add a <link> element into our HTML file, right after the opening
<head> tag:
Cascading Style Sheets (CSS)
• Benefits of External Style - The real power of using an external style sheet
is that multiple web pages on our site can link to the same style sheet:
Cascading Style Sheets (CSS)
• Internal Style Sheets:
• are appropriate for very small sites, especially those that have just
a single page.
• might also make sense when each page of a site needs to have a
completely different look.
• External Style Sheets:
• are better for multi-page websites that need to have a uniform look
and feel to all pages.
• make for faster-loading sites (less redundant code).
• allow designers to make site-wide changes quickly and easily.
Cascading Style Sheets (CSS)
• We use the term "cascading" because there is an established order of
priority to resolve formatting conflicts:
1) Inline style (highest priority)
2) Internal style sheet (second priority)
3) External style sheet (third priority)
4) Web browser default (only if not defined elsewhere)
Cascading Style Sheets (CSS)
• CSS properties for colors
Cascading Style Sheets (CSS)
• Specifying colors
• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white (white), yellow
• RGB codes: red, green, and blue values from 0 (none) to 255 (full)
• hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Cascading Style Sheets (CSS)
• Grouping Styles
• A style can select multiple elements separated by commas
• The individual elements can also have their own styles
Cascading Style Sheets (CSS)
• CSS Comments /*….*/
• CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
• The // single-line comment style is NOT supported in CSS
• The <!-- ... --> HTML comment style is also NOT supported in
CSS
/* This is a comment.
It can span many lines in the CSS file. */
Cascading Style Sheets (CSS)
• CSS properties for Fonts

You might also like