Scribd
Upload
10 views

Developing Cascading Style

it talks about how to develop CSS

Uploaded by

yuti6211
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Developing Cascading Style

it talks about how to develop CSS

Uploaded by

yuti6211
Copyright
© © All Rights Reserved
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