Podcast
Questions and Answers
What is the full name of the style sheet language?
What is the full name of the style sheet language?
Cascading Style Sheet
Which of the following are examples of markup languages?
Which of the following are examples of markup languages?
CSS is a list of what that define colors, fonts, layout, and other aspects of HTML elements?
CSS is a list of what that define colors, fonts, layout, and other aspects of HTML elements?
Using style sheets can help reduce the amount of format coding needed for web pages.
Using style sheets can help reduce the amount of format coding needed for web pages.
Signup and view all the answers
What are three ways to insert CSS?
What are three ways to insert CSS?
Signup and view all the answers
What attribute is used to apply inline styles?
What attribute is used to apply inline styles?
Signup and view all the answers
What tag is used to define embedded styles?
What tag is used to define embedded styles?
Signup and view all the answers
External style sheets should be used if you want to apply the same style to multiple pages.
External style sheets should be used if you want to apply the same style to multiple pages.
Signup and view all the answers
In which order are styles applied to an HTML element by the browser (from highest to lowest priority)?
In which order are styles applied to an HTML element by the browser (from highest to lowest priority)?
Signup and view all the answers
What part of a CSS definition is used to match specific elements in a document?
What part of a CSS definition is used to match specific elements in a document?
Signup and view all the answers
What part of a CSS definition specifies which properties of an element will be affected?
What part of a CSS definition specifies which properties of an element will be affected?
Signup and view all the answers
What symbol is used to separate a property from its value in a CSS declaration?
What symbol is used to separate a property from its value in a CSS declaration?
Signup and view all the answers
What characters are used to surround a CSS declaration?
What characters are used to surround a CSS declaration?
Signup and view all the answers
Match the CSS property with its corresponding description:
Match the CSS property with its corresponding description:
Signup and view all the answers
Study Notes
Cascading Style Sheets (CSS) - Lecture Notes
- CSS is a style sheet language used to describe the presentation of a document written in a markup language (e.g., HTML and XHTML).
- CSS is a list of statements (rules) defining colors, fonts, layout, and other aspects of HTML elements.
- Aims to build student awareness of style sheet mechanisms for web programmers and improve practical expertise in web programming techniques.
Aim/Objectives
- Build student awareness of style sheet mechanisms available to web programmers for developing interactive websites.
- Develop practical expertise in CSS providing a strong foundation for mastering web programming techniques.
Learning Outcome
- Use style sheets to enhance the user interface of a web site.
Why Use Style Sheets?
- Allows for greater control over layout and display.
- Significantly reduces the amount of format coding necessary to control display characteristics.
- Enables multiple styles to be attached to a document at once.
- Allows for easy changes to style formatting across a document (useful for online, brochures, print, etc.)
Three Ways to Insert CSS
- External: A separate CSS file referenced from the HTML document.
-
Embedded (Internal): Blocks of CSS information within the HTML document itself, usually in the
<head>section. - Inline: A style definition within the HTML element being modified.
Inline Style
- Use the
styleattribute within the relevant HTML tag. - The
styleattribute can contain any CSS property.
Embedded/Internal Style Sheet
- Used when a single document has unique styling.
- Defined within the
<style>tag, typically inside the<head>section of the HTML document.
External Style Sheet
- Ideal for styles applied to many pages (single change impacts all pages).
- Each page links to the external style sheet using the
<link>tag within the<head>section of the HTML.
Cascading Order
- Inline style (inside the HTML element).
- Internal style sheet (in the
<head>section). - External style sheet.
- Browser default.
Defining a Style
- CSS style definitions follow a specific format:
selector_expression { element-property: property-value(s); } -
selector_expressionselects HTML elements. -
element-propertyspecifies the property to be modified. -
property-value(s)sets the value for the selected property.
Example Code (for Embedded CSS and HTML structure)
<html>
<head>
<style type="text/css">
body { background-color: yellow; }
h1 { background-color: #00ff00; }
p { color: rgb(255, 0, 255); }
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Property Values and Units
- Support CSS keywords (e.g.,
thin,thick). - Real-world measures (inches (in), centimeters (cm), mm, points (pt), picas (pc)).
- Screen measures in pixels (px).
- Relational to font size (em, ex).
- Percentages (%).
- Color codes (
#rrggbborrgb(r, g, b)). - Angles (degrees (deg), radians (rad)).
- Time values (seconds (s), milliseconds (ms)).
- Frequencies (hertz (Hz), kilohertz (kHz)).
Selectors
- Patterns for matching HTML elements to apply styles to them.
- Matching by name, universal selector, class, identifier, and specific attributes.
Matching Elements by Name
- Selectors by element tag name (e.g.,
h1,p). - Formats all instances of the selector's tag name.
Matching Elements by Class
- Selects HTML elements with a specific class (
.class-name).
Matching Elements by Identifier
- Selects HTML elements with a specific ID (
#element-id).
Matching Elements by Specific Attributes
- Selects elements based on specific attributes and values. (e.g., using square brackets).
Pseudo-classes
- Apply styles to elements of specific types without explicit styling.
- Example: anchor styles (
:link,:visited,:active).
Fonts
- CSS supports several font types (serif, sans-serif, cursive, fantasy, monospace).
- Fonts are used to convey various information (readability, emphasis).
Font Characteristiscs
- Baseline.
- Ascent.
- Descent.
Defining a Font family
- Defines font or fonts for elements in a document.
- Multiple names in a common generic family for versatile styling.
CSS Font
- Demonstrates different font-related properties including
font-family,font-size,font-style(normal, italic, oblique), andfont-weight(normal, bold, lighter).
CSS Background image , color , Text color, Text alignment, Text Decoration, Text Transformation (Example code)
- Illustrates examples of CSS properties for controlling background images, colors, text styles, alignments, decorations, and transformations.
CSS Lists (Example Code)
- Shows styling examples for unordered lists (
ul) and ordered lists (ol), and uses different list-style types.
Values for Unordered and Ordered Lists
- Lists the values and their descriptions to control the styling of unordered and ordered lists.
Tables
- Introduces CSS properties designed to style tables including borders, padding, spacing, widths, framing, and alignment.
CSS Border (Example)
- Demonstrates CSS border properties:
-
border-style -
border-width -
border-color
-
CSS Margin (Examples)
- Describes CSS margin properties for controlling spacing around elements.
CSS Padding (Examples)
- Shows examples of padding properties for spacing content within elements.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
Description
This quiz focuses on the fundamentals of Cascading Style Sheets (CSS) and how they are utilized in web programming. It covers the purpose, structure, and advantages of using CSS to improve the presentation of HTML documents. Prepare to enhance your web development skills with practical applications of CSS.
