Cascading Style Sheets (CSS) is a style sheet language that separates document structure and presentation. It allows separation of semantics from presentation for easier multi-platform presentation and independent changes. CSS applies to HTML and XML documents. There are two main style sheet languages: CSS and XSL. CSS declarations apply based on a cascade rule that considers origin, specificity, and order of rules. Property values can be inherited in CSS. Key CSS properties control fonts, text formatting, box model, and colors.
Cascading Style Sheets (CSS) is used to separate document semantics from presentation by applying styles. CSS applies to HTML and XML documents. It allows easier presentation on multiple platforms, consistent styling, and independent changes to semantics and presentation. CSS rules cascade based on specificity and source to determine which styles apply. Properties can be inherited from parent elements or take initial values. Common properties control fonts, text color, and box model measurements.
This document discusses Cascading Style Sheets (CSS) and provides an overview of CSS syntax, rules, and properties. It covers how CSS separates document structure and presentation, the different style sheet languages, how CSS associates stylesheets with HTML documents, and the CSS rule cascade for determining which styles apply. It also summarizes CSS properties for fonts, text formatting, and color.
Cascading Style Sheets (CSS) is used to separate a document's semantics from its presentation. CSS allows the same content to be presented in different styles for different rendering methods, such as on screens, in print, or by speech. CSS declarations apply styles to HTML elements based on selectors, and rules determine which styles take precedence when multiple selections apply. Properties specify values for attributes like fonts, colors, spacing, and positioning to achieve the desired presentation.
The document discusses Cascading Style Sheets (CSS) and how they are used to separate a document's semantics from its presentation. CSS allows the same content to be displayed differently on various platforms. It describes the basic syntax of CSS, including selectors, style rules, and the cascade which determines which rules take precedence when multiple rules apply. It also covers CSS inheritance, font properties, and how CSS works with HTML through external and embedded style sheets.
Css Founder always works for customer satisfaction for their exact need we can say they are very professional and the Team of this company is very experienced.
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
This tutorial covers all the basics of CSS. This is a quick guide to CSS.Anyone having understanding of HTML can easily learn CSS in 10 minutes with this video tutorial. It covers all the basics of Style Sheets in Web designing.
For more detail you can also visit our Tech Blogs at https://msatechnosoft.in/blog/tech-blogs
This document discusses Cascading Style Sheets (CSS) and how they can be used to control the style and layout of web documents. CSS allows for a consistent look across multiple platforms, division of labor between design and coding teams, and user control over formatting. CSS rules use selectors to target specific elements and properties to set styles like colors, fonts, sizes, and positioning. CSS handles inheritance of styles and prioritizes rules based on specificity. Styles can position elements outside of normal flow using relative, float, and absolute positioning.
Cascading Style Sheets (CSS) is used to separate document semantics from presentation by applying styles. CSS applies to HTML and XML documents. It allows easier presentation on multiple platforms, consistent styling, and independent changes to semantics and presentation. CSS rules cascade based on specificity and source to determine which styles apply. Properties can be inherited from parent elements or take initial values. Common properties control fonts, text color, and box model measurements.
This document discusses Cascading Style Sheets (CSS) and provides an overview of CSS syntax, rules, and properties. It covers how CSS separates document structure and presentation, the different style sheet languages, how CSS associates stylesheets with HTML documents, and the CSS rule cascade for determining which styles apply. It also summarizes CSS properties for fonts, text formatting, and color.
Cascading Style Sheets (CSS) is used to separate a document's semantics from its presentation. CSS allows the same content to be presented in different styles for different rendering methods, such as on screens, in print, or by speech. CSS declarations apply styles to HTML elements based on selectors, and rules determine which styles take precedence when multiple selections apply. Properties specify values for attributes like fonts, colors, spacing, and positioning to achieve the desired presentation.
The document discusses Cascading Style Sheets (CSS) and how they are used to separate a document's semantics from its presentation. CSS allows the same content to be displayed differently on various platforms. It describes the basic syntax of CSS, including selectors, style rules, and the cascade which determines which rules take precedence when multiple rules apply. It also covers CSS inheritance, font properties, and how CSS works with HTML through external and embedded style sheets.
Css Founder always works for customer satisfaction for their exact need we can say they are very professional and the Team of this company is very experienced.
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
This tutorial covers all the basics of CSS. This is a quick guide to CSS.Anyone having understanding of HTML can easily learn CSS in 10 minutes with this video tutorial. It covers all the basics of Style Sheets in Web designing.
For more detail you can also visit our Tech Blogs at https://msatechnosoft.in/blog/tech-blogs
This document discusses Cascading Style Sheets (CSS) and how they can be used to control the style and layout of web documents. CSS allows for a consistent look across multiple platforms, division of labor between design and coding teams, and user control over formatting. CSS rules use selectors to target specific elements and properties to set styles like colors, fonts, sizes, and positioning. CSS handles inheritance of styles and prioritizes rules based on specificity. Styles can position elements outside of normal flow using relative, float, and absolute positioning.
Presentation to the Triangle Drupal Users Group (TriDUG) July meeting. This is a brief overview of what CSS selectors are and how they can be used to target CSS at specific parts of Drupal pages.
Note: This was done using the Fusion Starter theme in Drupal 7 but is applicable to D6 and other "major" themes.
Sorry, the slide animations did not come thru... but only the before and after slide really got effected.
Cascading Styling Sheets(CSS) simple design language intended to transform th...JebaRaj26
1.Inline CSS
2. Internal
3.External
Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900; font-size:50px;
font-style:italic; text-align:center;">
Nesamony Memorial Christian College
</p>
</body>
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}
.mca {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.nmcc {
font-style: bold;
font-size: 20px;
}
</style>
</head>
External CSS: External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc).
CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>
<body>
<div class="main">
<div class=“mca">Department of Computer Science & Applications</div>
<div id=“nmcc">
Basics of Web Design
</div>
</div>
</body>
</html>
This document discusses CSS (Cascading Style Sheets) and how it can be used to style web pages. It begins by defining CSS and listing some of its main advantages, such as allowing reuse of styles across pages and faster loading times. It then covers CSS syntax, selectors, properties and values. The document also discusses the different methods of associating CSS with HTML, including inline, internal and external stylesheets. Finally, it provides examples of how to style specific elements like fonts, text, backgrounds and more using CSS.
Cascading Style Sheets (CSS) is a language for styling web pages that separates presentation from content. CSS handles the look and feel of a web page by controlling color, fonts, spacing, sizing, backgrounds, and other visual aspects. CSS provides powerful control over HTML elements while keeping web pages lightweight and load faster. CSS rules can be applied internally, inline, or externally through linked style sheets to globally style elements across multiple web pages. Common CSS properties control color, fonts, text, backgrounds, borders, positioning, and visual effects.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also covers how CSS works through rules, selectors, and the cascade to match rules to elements. The document then summarizes visual formatting techniques in CSS like fonts, colors, positioning, and the box model. It concludes with techniques for dual presentation to support browsers with and without CSS.
The document discusses separating semantics from presentation in HTML using CSS. It introduces CSS and how it can be used to apply styles through external and embedded style sheets. It covers CSS syntax including selector strings and rule cascading. It also covers CSS properties related to fonts, text formatting, box model, backgrounds, normal flow layout, and positioning elements outside the normal flow.
This document provides an introduction to CSS (Cascading Style Sheets) through a series of lessons:
- Lesson 1 defines CSS and its history, purpose of separating formatting from content, and examples of how CSS changes page appearance without altering HTML.
- Lesson 2 explains CSS syntax including selectors, declarations, properties/values, and declaration blocks. Students create their first CSS page.
- Lesson 3 covers CSS class and ID selectors. Students create pages using class and ID selectors.
- Lesson 4 describes three methods to apply CSS - inline, internal, and external style sheets.
The document includes assignments for students to practice CSS concepts by modifying provided code examples.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses:
- The background and goals of CSS including separating structure and presentation, easing website updates, and maintaining consistency.
- An overview of key CSS concepts including rules, selectors, the parse tree, inheritance, and the cascade order for determining which styles apply.
- Visual formatting techniques including specifying fonts, colors, image positioning, the box model, and borders.
- Methods for dual presentation to ensure usable content if CSS is not supported or not working properly, such as hiding non-essential content and using parsing bugs for browser detection.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses:
1. The background and goals of CSS including making updates to many pages at once and maintaining consistency.
2. An overview of CSS including color, font, border, and position.
3. How CSS works by applying rules through selectors that match elements and applying properties to change presentation. The cascade determines which rules take precedence.
4. Examples of using CSS for visual formatting of fonts, colors, images, and applying the box model for layout.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also summarizes how CSS works through rules, selectors, and the cascade to match rules to elements in the parse tree. The document outlines key CSS concepts like visual formatting, fonts, colors, positioning, and hiding CSS for dual presentation in browsers with and without full CSS support.
This document provides an introduction to CSS (Cascading Style Sheets) including motivation for separating presentation from semantics, CSS syntax, the box model, fonts, text formatting, normal flow layout, and positioning elements outside of normal flow. Key points covered include using selectors to target elements, the rule cascade for determining applied styles, inheritance of property values, and properties for formatting fonts, backgrounds, colors, and positioning boxes.
This document provides an introduction to CSS (Cascading Style Sheets) through a series of lessons:
1. The history and purpose of CSS is discussed, noting that it was proposed in 1994 to help solve formatting problems in HTML.
2. CSS syntax and structure are explained, including selectors, properties and values, declarations, and declaration blocks. Examples are provided of how CSS can be used to style HTML elements.
3. Additional CSS selectors like classes and IDs are covered, along with creating comments in CSS. Students are assigned to create basic CSS pages demonstrating these concepts.
4. Methods for applying CSS styles are reviewed, including inline, internal, and external styling. Best practices
Cascading Style Sheets (CSS) is a language for styling web pages that allows separation of document content from document presentation. CSS controls the look and formatting of content like colors, layout, fonts, and more. There are several ways to associate CSS with HTML documents, including internal CSS within <style> tags, inline CSS with the style attribute, external CSS in a .css file linked via <link>, and @import rules. CSS rules are made of selectors, properties, and values to style elements. Common properties include color, font-family, background, and text-align. CSS handles global presentation of content across devices.
This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS as a language used to control the style and layout of web pages, and describes some key advantages like separation of style from content, ability to change appearance globally, and compatibility across devices. It also outlines common CSS syntax like selectors that target elements by type, class, ID and other attributes to style them.
This document provides an introduction to Cascading Style Sheets (CSS) including:
- CSS is used to describe the presentation of documents including sizes, spacing, fonts, colors, and layout.
- CSS separates content from presentation by defining styles in a separate CSS file rather than within HTML tags.
- CSS rules consist of selectors, declarations separated by semicolons, and properties and values separated by colons to style specific elements.
This document provides an introduction and overview of Cascading Style Sheets (CSS). It discusses using CSS to control the appearance of websites by separating content from presentation. It describes various methods for including CSS with HTML, including inline styles, embedded style sheets within <style> tags, and external CSS files linked via <link> tags. Key CSS concepts covered include selectors, the CSS syntax of rules and declarations, and using type, class, ID and other selectors to target specific elements. Maintaining styles in external CSS files is presented as the preferred approach for organization and maintenance.
This document covers HTML divisions (divs) and CSS styling. It discusses how divs are used to separate content and can be thought of as boxes. Divs use <div> and </div> tags and can take attributes like id and class. Id uniquely identifies an element, while class identifies elements that will share styling. There are three ways to apply stylesheets - inline styles within HTML tags, internal stylesheets within <style> tags, and external stylesheets linked via <link> tags. The document encourages experimenting with CSS rules to style divs and other elements.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
The document provides an introduction to software engineering. It defines software engineering as an engineering discipline concerned with all aspects of software production. It discusses why software engineering is important given that errors in complex software systems can have devastating consequences, as shown through examples of software failures in air traffic control, satellite launches, and ambulance dispatch systems. The document also covers fundamental software engineering concepts like the software process, process models, and costs.
The document discusses software testing concepts like validation testing vs defect testing, system and component testing strategies, and test automation tools. It defines key terms like bugs, defects, errors, faults, and failures. It also describes techniques like equivalence partitioning and boundary value analysis that are used to generate test cases that thoroughly test software. Component testing tests individual program parts while system testing tests integrated groups of components. Test cases specify conditions to determine if software works as intended.
Presentation to the Triangle Drupal Users Group (TriDUG) July meeting. This is a brief overview of what CSS selectors are and how they can be used to target CSS at specific parts of Drupal pages.
Note: This was done using the Fusion Starter theme in Drupal 7 but is applicable to D6 and other "major" themes.
Sorry, the slide animations did not come thru... but only the before and after slide really got effected.
Cascading Styling Sheets(CSS) simple design language intended to transform th...JebaRaj26
1.Inline CSS
2. Internal
3.External
Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900; font-size:50px;
font-style:italic; text-align:center;">
Nesamony Memorial Christian College
</p>
</body>
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}
.mca {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.nmcc {
font-style: bold;
font-size: 20px;
}
</style>
</head>
External CSS: External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc).
CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>
<body>
<div class="main">
<div class=“mca">Department of Computer Science & Applications</div>
<div id=“nmcc">
Basics of Web Design
</div>
</div>
</body>
</html>
This document discusses CSS (Cascading Style Sheets) and how it can be used to style web pages. It begins by defining CSS and listing some of its main advantages, such as allowing reuse of styles across pages and faster loading times. It then covers CSS syntax, selectors, properties and values. The document also discusses the different methods of associating CSS with HTML, including inline, internal and external stylesheets. Finally, it provides examples of how to style specific elements like fonts, text, backgrounds and more using CSS.
Cascading Style Sheets (CSS) is a language for styling web pages that separates presentation from content. CSS handles the look and feel of a web page by controlling color, fonts, spacing, sizing, backgrounds, and other visual aspects. CSS provides powerful control over HTML elements while keeping web pages lightweight and load faster. CSS rules can be applied internally, inline, or externally through linked style sheets to globally style elements across multiple web pages. Common CSS properties control color, fonts, text, backgrounds, borders, positioning, and visual effects.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also covers how CSS works through rules, selectors, and the cascade to match rules to elements. The document then summarizes visual formatting techniques in CSS like fonts, colors, positioning, and the box model. It concludes with techniques for dual presentation to support browsers with and without CSS.
The document discusses separating semantics from presentation in HTML using CSS. It introduces CSS and how it can be used to apply styles through external and embedded style sheets. It covers CSS syntax including selector strings and rule cascading. It also covers CSS properties related to fonts, text formatting, box model, backgrounds, normal flow layout, and positioning elements outside the normal flow.
This document provides an introduction to CSS (Cascading Style Sheets) through a series of lessons:
- Lesson 1 defines CSS and its history, purpose of separating formatting from content, and examples of how CSS changes page appearance without altering HTML.
- Lesson 2 explains CSS syntax including selectors, declarations, properties/values, and declaration blocks. Students create their first CSS page.
- Lesson 3 covers CSS class and ID selectors. Students create pages using class and ID selectors.
- Lesson 4 describes three methods to apply CSS - inline, internal, and external style sheets.
The document includes assignments for students to practice CSS concepts by modifying provided code examples.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses:
- The background and goals of CSS including separating structure and presentation, easing website updates, and maintaining consistency.
- An overview of key CSS concepts including rules, selectors, the parse tree, inheritance, and the cascade order for determining which styles apply.
- Visual formatting techniques including specifying fonts, colors, image positioning, the box model, and borders.
- Methods for dual presentation to ensure usable content if CSS is not supported or not working properly, such as hiding non-essential content and using parsing bugs for browser detection.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses:
1. The background and goals of CSS including making updates to many pages at once and maintaining consistency.
2. An overview of CSS including color, font, border, and position.
3. How CSS works by applying rules through selectors that match elements and applying properties to change presentation. The cascade determines which rules take precedence.
4. Examples of using CSS for visual formatting of fonts, colors, images, and applying the box model for layout.
This document provides an overview of CSS (Cascading Style Sheets) for computer science students. It discusses the background and goals of CSS, including making it easy to update many pages at once and maintain consistency. It also summarizes how CSS works through rules, selectors, and the cascade to match rules to elements in the parse tree. The document outlines key CSS concepts like visual formatting, fonts, colors, positioning, and hiding CSS for dual presentation in browsers with and without full CSS support.
This document provides an introduction to CSS (Cascading Style Sheets) including motivation for separating presentation from semantics, CSS syntax, the box model, fonts, text formatting, normal flow layout, and positioning elements outside of normal flow. Key points covered include using selectors to target elements, the rule cascade for determining applied styles, inheritance of property values, and properties for formatting fonts, backgrounds, colors, and positioning boxes.
This document provides an introduction to CSS (Cascading Style Sheets) through a series of lessons:
1. The history and purpose of CSS is discussed, noting that it was proposed in 1994 to help solve formatting problems in HTML.
2. CSS syntax and structure are explained, including selectors, properties and values, declarations, and declaration blocks. Examples are provided of how CSS can be used to style HTML elements.
3. Additional CSS selectors like classes and IDs are covered, along with creating comments in CSS. Students are assigned to create basic CSS pages demonstrating these concepts.
4. Methods for applying CSS styles are reviewed, including inline, internal, and external styling. Best practices
Cascading Style Sheets (CSS) is a language for styling web pages that allows separation of document content from document presentation. CSS controls the look and formatting of content like colors, layout, fonts, and more. There are several ways to associate CSS with HTML documents, including internal CSS within <style> tags, inline CSS with the style attribute, external CSS in a .css file linked via <link>, and @import rules. CSS rules are made of selectors, properties, and values to style elements. Common properties include color, font-family, background, and text-align. CSS handles global presentation of content across devices.
This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS as a language used to control the style and layout of web pages, and describes some key advantages like separation of style from content, ability to change appearance globally, and compatibility across devices. It also outlines common CSS syntax like selectors that target elements by type, class, ID and other attributes to style them.
This document provides an introduction to Cascading Style Sheets (CSS) including:
- CSS is used to describe the presentation of documents including sizes, spacing, fonts, colors, and layout.
- CSS separates content from presentation by defining styles in a separate CSS file rather than within HTML tags.
- CSS rules consist of selectors, declarations separated by semicolons, and properties and values separated by colons to style specific elements.
This document provides an introduction and overview of Cascading Style Sheets (CSS). It discusses using CSS to control the appearance of websites by separating content from presentation. It describes various methods for including CSS with HTML, including inline styles, embedded style sheets within <style> tags, and external CSS files linked via <link> tags. Key CSS concepts covered include selectors, the CSS syntax of rules and declarations, and using type, class, ID and other selectors to target specific elements. Maintaining styles in external CSS files is presented as the preferred approach for organization and maintenance.
This document covers HTML divisions (divs) and CSS styling. It discusses how divs are used to separate content and can be thought of as boxes. Divs use <div> and </div> tags and can take attributes like id and class. Id uniquely identifies an element, while class identifies elements that will share styling. There are three ways to apply stylesheets - inline styles within HTML tags, internal stylesheets within <style> tags, and external stylesheets linked via <link> tags. The document encourages experimenting with CSS rules to style divs and other elements.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
The document provides an introduction to software engineering. It defines software engineering as an engineering discipline concerned with all aspects of software production. It discusses why software engineering is important given that errors in complex software systems can have devastating consequences, as shown through examples of software failures in air traffic control, satellite launches, and ambulance dispatch systems. The document also covers fundamental software engineering concepts like the software process, process models, and costs.
The document discusses software testing concepts like validation testing vs defect testing, system and component testing strategies, and test automation tools. It defines key terms like bugs, defects, errors, faults, and failures. It also describes techniques like equivalence partitioning and boundary value analysis that are used to generate test cases that thoroughly test software. Component testing tests individual program parts while system testing tests integrated groups of components. Test cases specify conditions to determine if software works as intended.
Cyclomatic complexity is a software metric used to measure the complexity of a program based on the number of linearly independent paths. It is calculated as the number of edges - nodes + 2 in the program's control flow graph. Higher cyclomatic complexity indicates a more complex program that is likely more error-prone. Testing seeks to determine the required quality standard and strategy before planning specific unit, integration, and system tests. Factors considered in test planning include prioritizing what to test based on damage severity and risk levels, determining test sources, who will perform the tests, where to conduct them, and when to terminate testing. The results are documented in a software test plan.
The document discusses function point analysis (FPA), a method used to estimate the size of a software project based on its functionality. FPA was initially developed by Allan J. Albrecht in 1979 at IBM. It measures the functional size of a software application in terms of function points, which are used to estimate factors like project time and resources required. FPA is independent of programming languages and can be used for various types of software systems. The document also discusses software quality metrics, which focus on measuring the quality of products, processes, and projects. These include metrics like defect density, customer problems, and customer satisfaction.
This document discusses techniques for estimating the cost of software projects. It explains that software cost estimation aims to predict the effort, time and total cost required. The key components of software costs are outlined as labor costs, hardware/software costs, and overhead costs. The document then examines various techniques for measuring programmer productivity and estimating project size, including lines of code, function points, and object points. Finally, it analyzes different estimation techniques like algorithmic modeling, expert judgment, analogy, and top-down vs. bottom-up approaches.
The document discusses software project management. It defines a software project as the complete process of software development from requirements gathering through testing and maintenance. A software project manager closely monitors the development process, prepares plans, arranges resources, and manages communication between team members. Software project management involves planning, scope management, estimation of size, effort, time and cost, and other activities. Estimation techniques include decomposition by functions or activities and empirical models. Lines of code is a common size metric but does not consider complexity. Effort estimation forecasts time required and project estimation uses a stepwise decomposition approach.
XML is a markup language that defines rules for encoding documents in a human- and machine-readable format. It allows users to define their own elements and tags to structure data. Some key benefits of XML include its extensibility, ability to carry data independently of presentation, and status as a public standard. While XML provides structure and organization, it does not perform computations or specify how data should be displayed.
The document discusses configuration management and software configuration management (SCM) concepts. It defines key SCM terms like baseline, software configuration item, and configuration. It describes the SCM process which includes identification, version control, change control, configuration auditing, and status reporting. Challenges of SCM in component-based software development are also covered. Effective SCM is important for software projects to manage changes and maintain integrity across software versions and releases.
High cohesion and low coupling are characteristics of good design that make software components more independent and modular. Cohesion refers to how related the responsibilities of a component are, while coupling refers to interdependencies between components. The document defines and provides examples of different types of cohesion and coupling, from ideal to poor, to help understand their impacts on maintenance and modifiability.
The document discusses several software development life cycle (SDLC) models, including waterfall, iterative, prototyping, and spiral models. It describes the basic stages and processes involved in each model. The waterfall model involves sequential stages of requirements analysis, design, implementation, testing, and deployment. The iterative model allows revisiting earlier stages and incremental releases. The prototyping model uses prototypes to gather early user feedback. Finally, the spiral model combines iterative development and risk analysis, proceeding in cycles of planning, risk analysis, development, and evaluation.
Software design involves deriving solutions that satisfy software requirements. The design process involves understanding the problem, identifying solutions, and describing solution abstractions at different levels. Design takes place through overlapping phases like architectural design, interface design, and component design. Good design principles include having linguistic modular units, few interfaces, small interfaces, explicit interfaces, and information hiding. This achieves cohesion within modules and loose coupling between modules.
This document provides an overview of software engineering and the evolution of practices in the field. It discusses how software development has progressed from an ad hoc exploratory approach to more systematic approaches utilizing structured programming, data structure design, data flow design, and object-oriented design. Modern practices emphasize prevention over correction of errors through life cycle models, documentation, testing and other techniques.
The document discusses software requirements and documentation. It states that properly documenting requirements is crucial to avoid mistakes during development. Requirements analysis involves gathering and analyzing requirements, then specifying them in a document. This ensures developers understand the problem and can develop a satisfactory solution. The document also discusses data flow modeling, object-oriented modeling, prototyping techniques, and classifying requirements as functional or non-functional.
The document provides guidance on writing a software requirements specification (SRS) document. An SRS document is important as it establishes shared expectations for a software project between clients and developers. It describes the intended use, features, and challenges of a software application. The SRS includes sections on purpose, scope, functional and non-functional requirements, interfaces, and design constraints. It is created before development to ensure all stakeholders understand what the software should do.
Animation involves manipulating still images to create the illusion of movement. Traditional animation involves drawing images by hand on transparent sheets that are photographed and exhibited as film. Today, computer-generated imagery (CGI) is commonly used. There are 12 principles for effective animation including squash and stretch, anticipation, staging, follow through and overlapping action, solid drawing, timing, and exaggeration. Different animation techniques include traditional 2D animation, digital 2D/3D animation, puppetry, claymation, cut-out animation, and flipbook animation. Common file formats for animation include PNG, JPG, GIF, and SVG.
Voice recognition and voice response systems allow for hands-free data entry using speech as the interface. Voice recognition systems analyze speech patterns to convert them to digital codes for computer input. Most require training a system to recognize a user's voice. Voice recognition is used in applications like manufacturing quality control and airline baggage sorting. Voice response systems provide verbal guidance for tasks using voice messaging and synthesis. Examples include automated phone systems and online services.
Windows was developed by Microsoft and macOS was developed by Apple. Windows was first launched in 1985 while macOS was first launched in 2001. Both operating systems allow for multitasking and have strong networking capabilities. However, Windows generally has better compatibility with third-party hardware and software while macOS has stronger security features and integration with other Apple devices.
The document discusses digital audio and sound systems. It covers topics like:
- Sound cards and speakers are needed to play sophisticated sounds on computers.
- Users can check for and adjust sound card settings through the Control Panel.
- Formats like WAV, AIFF, AU store uncompressed digital audio, while MP3, Vorbis use lossy compression.
- MIDI files contain instructions to recreate music rather than audio waves, making them much smaller in size.
Video is composed of a series of still images called frames displayed in rapid succession to create the illusion of motion. It involves both visual and audio components. There are two main types of video - analogue and digital. Analogue video represents images and sound through continuous signals while digital video uses discrete numeric data. Common video file formats include .MP4, .AVI, .WMV and .MOV, each suited for different uses and applications.
The document discusses text and its use in multimedia. It describes factors that affect text legibility like font size and style. It recommends choosing easily readable fonts in few sizes and colors. It also discusses tools for editing and designing fonts used to create custom fonts and manipulate existing ones. These tools include Fontographer and Font Monger. The document also discusses using text in multimedia, like subtitles, and navigation elements like menus and buttons. Hypertext and hypermedia are discussed along with their structures like nodes, anchors, and links that allow non-linear navigation.
How to Setup Warehouse & Location in Odoo 17 InventoryCeline George
In this slide, we'll explore how to set up warehouses and locations in Odoo 17 Inventory. This will help us manage our stock effectively, track inventory levels, and streamline warehouse operations.
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPRAHUL
This Dissertation explores the particular circumstances of Mirzapur, a region located in the
core of India. Mirzapur, with its varied terrains and abundant biodiversity, offers an optimal
environment for investigating the changes in vegetation cover dynamics. Our study utilizes
advanced technologies such as GIS (Geographic Information Systems) and Remote sensing to
analyze the transformations that have taken place over the course of a decade.
The complex relationship between human activities and the environment has been the focus
of extensive research and worry. As the global community grapples with swift urbanization,
population expansion, and economic progress, the effects on natural ecosystems are becoming
more evident. A crucial element of this impact is the alteration of vegetation cover, which plays a
significant role in maintaining the ecological equilibrium of our planet.Land serves as the foundation for all human activities and provides the necessary materials for
these activities. As the most crucial natural resource, its utilization by humans results in different
'Land uses,' which are determined by both human activities and the physical characteristics of the
land.
The utilization of land is impacted by human needs and environmental factors. In countries
like India, rapid population growth and the emphasis on extensive resource exploitation can lead
to significant land degradation, adversely affecting the region's land cover.
Therefore, human intervention has significantly influenced land use patterns over many
centuries, evolving its structure over time and space. In the present era, these changes have
accelerated due to factors such as agriculture and urbanization. Information regarding land use and
cover is essential for various planning and management tasks related to the Earth's surface,
providing crucial environmental data for scientific, resource management, policy purposes, and
diverse human activities.
Accurate understanding of land use and cover is imperative for the development planning
of any area. Consequently, a wide range of professionals, including earth system scientists, land
and water managers, and urban planners, are interested in obtaining data on land use and cover
changes, conversion trends, and other related patterns. The spatial dimensions of land use and
cover support policymakers and scientists in making well-informed decisions, as alterations in
these patterns indicate shifts in economic and social conditions. Monitoring such changes with the
help of Advanced technologies like Remote Sensing and Geographic Information Systems is
crucial for coordinated efforts across different administrative levels. Advanced technologies like
Remote Sensing and Geographic Information Systems
9
Changes in vegetation cover refer to variations in the distribution, composition, and overall
structure of plant communities across different temporal and spatial scales. These changes can
occur natural.
Temple of Asclepius in Thrace. Excavation resultsKrassimira Luka
The temple and the sanctuary around were dedicated to Asklepios Zmidrenus. This name has been known since 1875 when an inscription dedicated to him was discovered in Rome. The inscription is dated in 227 AD and was left by soldiers originating from the city of Philippopolis (modern Plovdiv).
This presentation was provided by Rebecca Benner, Ph.D., of the American Society of Anesthesiologists, for the second session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session Two: 'Expanding Pathways to Publishing Careers,' was held June 13, 2024.
A Visual Guide to 1 Samuel | A Tale of Two HeartsSteve Thomason
These slides walk through the story of 1 Samuel. Samuel is the last judge of Israel. The people reject God and want a king. Saul is anointed as the first king, but he is not a good king. David, the shepherd boy is anointed and Saul is envious of him. David shows honor while Saul continues to self destruct.
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxEduSkills OECD
Iván Bornacelly, Policy Analyst at the OECD Centre for Skills, OECD, presents at the webinar 'Tackling job market gaps with a skills-first approach' on 12 June 2024
This presentation was provided by Racquel Jemison, Ph.D., Christina MacLaughlin, Ph.D., and Paulomi Majumder. Ph.D., all of the American Chemical Society, for the second session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session Two: 'Expanding Pathways to Publishing Careers,' was held June 13, 2024.
2. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Motivation
HTML markup can be used to represent
Semantics: h1 means that an element is a top-level
heading
Presentation: h1 elements look a certain way
It’s advisable to separate semantics from
presentation because:
It’s easier to present documents on multiple platforms
(browser, cell phone, spoken, …)
It’s easier to generate documents with consistent look
Semantic and presentation changes can be made
independently of one another (division of labor)
User control of presentation is facilitated
3. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Style Sheet Languages
Cascading Style Sheets (CSS)
Applies to (X)HTML as well as XML
documents in general
Focus of this chapter
Extensible Stylesheet Language (XSL)
Often used to transform one XML document to
another form, but can also add style
XSL Transformations covered in later chapter
4. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
A styled HTML document
produced by the style sheet style1.css:
5. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
link element associates style sheet with doc.
6. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
type attribute specifies style language used
7. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
href attribute provides style sheet URL
8. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
title attribute provides style sheet name
9. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
Alternative, user selectable style sheets
can be specified
10. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
11. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
A styled HTML document
produced by the style sheet style2.css:
12. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
Note that alternate, user selectable style is
not widely supported: firefox 3 and IE 8 do,
but IE 6, IE 7 and Chrome don’t.
13. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Introduction
Single document can be displayed on
multiple media platforms by tailoring style
sheets:
This document will be printed differently than
it is displayed.
14. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax
Parts of a style rule (or statement)
15. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Single element type:
Multiple element types:
All element types:
Specific elements by id:
16. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
17. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Elements belonging to a style class:
Referencing a style class in HTML:
Elements of a certain type and class:
class selector: begins with a period .
18. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Elements belonging to a style class:
Referencing a style class in HTML:
Elements of a certain type and class:
this span belongs to three style classes
19. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Elements belonging to a style class:
Referencing a style class in HTML:
Elements of a certain type and class:
this rule applies only to span’s belonging to class special
20. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Source anchor elements:
Element types that are descendents:
pseudo-classes
21. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Source anchor elements:
Element types that are descendants:
rule applies to li element that is
22. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Source anchor elements:
Element types that are descendants:
rule applies to li element that is
part of the content of an ol element
23. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax:
Selector Strings
Source anchor elements:
Element types that are descendants:
rule applies to li element that is
part of the content of an ol element
that is part of the content of a ul element
24. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax
Style rules covered thus far follow ruleset
syntax
At-rule is a second type of rule
Reads style rules from specified URL
Must appear at beginning of style sheet
URL relative to style sheet URL
25. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Style Sheets and HTML
Style sheets referenced by link HTML
element are called external style sheets
Style sheets can be embedded directly in
HTML document using style element
Most HTML elements have style attribute
(value is list of style declarations)
26. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Style Sheets and HTML
Rules of thumb:
Use external style sheets to define site-wide style
Prefer style sheets (either external or embedded)
to style attributes
XML special characters
Must use references in embedded style sheets and
style attribute
Must not use references in external style sheets
27. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Rule Cascade
What if more than one style declaration
applies to a property of an element?
The CSS rule cascade determines which style
rule’s declaration applies
28. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Rule Cascade
To find the value for an element/property
combination, user agents must apply the
following sorting order:
1- Find all declarations that apply to the
element and property in question, for the target
media type. Declarations apply if the
associated selector matches the element in
question.
29. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Rule Cascade
2- The primary sort of the declarations is
by weight and origin: for normal
declarations, author style sheets override
user style sheets which override the default
style sheet. For "!important" declarations,
user style sheets override author style sheets
which override the default style sheet.
"!important" declaration override normal
declarations. An imported style sheet has
the same origin as the style sheet that
imported it.
Five origin/weight levels:
1. user/important
2. author/important
3. author/normal
4. user/normal
5. user agent/normal
30. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Rule Cascade
3- The secondary sort is by specificity of selector: more
specific selectors will override more general ones. Pseudo-
elements and pseudo-classes are counted as normal elements
and classes, respectively.
Specificity:
1. style attribute
2. rule with selector:
1. ID
2. class/pseudo-class
3. descendant/element type
4. universal
3. HTML attribute
31. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Rule Cascade
4- Finally, sort by order specified: if two rules have the same
weight, origin and specificity, the latter specified wins. Rules
in imported style sheets are considered to be before any rules
in the style sheet itself.
Conceptually, create one
long style sheet. Later
style rules have higher
priority than earlier rules.
32. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Inheritance
What if no style declaration applies to a
property of an element?
Generally, the property value is inherited
from the nearest ancestor element that has a
value for the property
If no ancestor has a value (or the property
does not inherit) then CSS defines an initial
value that is used
34. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Inheritance
Property values:
Specified: value contained in declaration
Absolute: value can be determined without reference
to context (e.g., 2cm)
Relative: value depends on context (e.g., larger)
Computed: absolute representation of relative
value (e.g., larger might be 1.2 x parent font
size)
Actual: value actually used by browser (e.g.,
computed value might be rounded)
35. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Inheritance
Most properties inherit computed value
Exception discussed later: line-height
A little thought can usually tell you whether
a property inherits or not
Example: height does not inherit
36. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Glyph (visual representation)
character cell
(content area)
A font is a mapping from code points to glyphs
37. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
A font is a mapping from code points to glyphs
glyphs do not necessary stay inside cells!
38. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
A font family is a collection of related fonts
(typically differ in size, weight, etc.)
font-family property can accept a list of
families, including generic font families
first choice font
39. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
A font family is a collection of related fonts
(typically differ in size, weight, etc.)
font-family property can accept a list of
families, including generic font families
second choice font
40. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
A font family is a collection of related fonts
(typically differ in size, weight, etc.)
font-family property can accept a list of
families, including generic font families
generic
41. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
generic
fonts are
system-
specific
42. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Note that most generic font can be easily set
on Firefox and Chrome, but such option
doesn’t seem to be available on IE 7 and 8. IE
will still default to something although maybe
not what you had hoped for!
43. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Many properties, such as font-size, have a value that is
a CSS length
All CSS length values except 0 need units
44. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Computed value
of font-size
property
45. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Reference font defines em and ex units
Normally, reference font is the font of the
element being styled
Exception: Using em/ex to specify value for
font-size
parent element’s font is
reference font
46. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Other ways to specify value for
font-size:
Percentage (of parent font-size)
Absolute size keyword: xx-small, x-small,
small, medium (initial value), large,
x-large, xx-large
User agent specific; should differ by ~ 20%
Relative size keyword: smaller, larger
Relative to parent element’s font
47. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
48. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
Text is rendered using line boxes
Height of line box given by line-height
Initial value: normal (i.e., cell height; relationship with
em height is font-specific)
Other values (following are equivalent):
49. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
When line-height is greater than cell
height:
Inheritance of line-height:
Specified value if normal or unit-less number
Computed value otherwise
50. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
font shortcut property:
51. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
font shortcut property:
Initial values used if no value specified in font
property list (that is, potentially reset)
52. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Font Properties
font shortcut property:
specifying line-height (here, twice cell height)
any order size and family required,
order-dependent
53. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Text Formatting
54. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Text Color
Font color specified by color property
Two primary ways of specifying colors:
Color name: black, gray, silver, white, red, lime,
blue, yellow, aqua, fuchsia, maroon, green, navy,
olive, teal, purple, full list at
http://www.w3.org/TR/SVG11/types.html#Color
Keywords
red/green/blue (RGB) values
57. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Box Model
Every rendered element occupies a box:
(or inner edge)
(or outer edge)
66. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Box Model
If multiple declarations apply to a property,
the last declaration overrides earlier
specifications
Left border is 30px wide,
inset style, and red
67. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Backgrounds
background-color
Specifies background color for content, padding,
and border areas
Margin area is always transparent
Not inherited; initial value transparent
background-image
Specifies (using url() function) image that
will be tiled over an element
68. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Backgrounds
<body style="background-image:url('CucumberFlowerPot.png')">
69. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
In normal flow processing, each displayed
element has a corresponding box
html element box is called initial containing
block and corresponds to entire document
Boxes of child elements are contained in boxes
of parent
Sibling block elements are laid out one on top of
the other
Sibling inline elements are one after the other
70. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
(body)
(html)
71. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Block
elements
only
72. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
html
body
div d1
div d2
div d3
div d4
Top edges of
block boxes are
in document order
73. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
What is a “block element”?
Element with value block specified for its
display property
User agent style sheet (not CSS) specifies default
values; typical block elements include html,
body, p, pre, div, form, ol, ul, dl, hr, h1
through h6
Most other elements except li and table-related
have inline specified for display
74. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
When blocks stack, adjacent margins are
collapsed to the size of the larger margin
75. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Initial value of width property is auto, which for
block boxes means to make the content area as wide
as possible within margin/padding constraints:
Width of block boxes
increases as browser
client area is widened
76. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Can also specify CSS length or percentage
(of parent’s content width) for width
property
By default, width of right margin is
adjusted to accommodate a change to
width
77. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Can also specify CSS length or percentage
(of parent’s content width) for width
property
Centering can be achieved by setting
both margins to auto
78. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Boxes corresponding to character cells and
inline elements are laid out side by side in line
boxes that are stacked one on top of the other
Character cells aligned by baseline
Heights
based on
content
79. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Padding/borders/margins affect width but
not height of inline boxes
80. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Normal Flow Layout
Specify value for vertical-align to position
an inline element within line box:
initial
value of
vertical-
align
81. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
CSS allows for boxes to be positioned
outside the normal flow:
Relative positioning
span’s shifted backwards relative to normal flow
82. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
CSS allows for boxes to be positioned
outside the normal flow:
Float positioning
span taken out of normal
flow and “floated” to the
left of its line box
83. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
CSS allows for boxes to be positioned
outside the normal flow:
Absolute positioning
span’s removed from
normal flow and
positioned relative
to another box
84. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Properties used to specify positioning:
position: static (initial value),
relative, or absolute
Element is positioned if this property not static
Properties left, right, top, bottom apply to
positioned elements
Primary values are auto (initial value) or CSS length
float: none, left, or right
Applies to elements with static and relative
positioning only
85. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Relative positioning
Specifying positive value for right property of
relatively positioned box moves it to left
<span style="background-color:red">
</span><span class="right">Red</span>
span
containing
text moves
left
86. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Relative positioning
Specifying negative value for left property
also moves box to left
<span style="background-color:red">
</span><span class="right">Red</span>
same
effect as
before
87. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Float positioning
Specify value for float property
88. Beyond Normal Flow
Float positioning
Specify value for float property
Floated element becomes a CSS block
element (e.g., can set height and width)
89. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Absolute positioning
Specify location for corner of box relative to
positioned containing block
margin area
padding area
containing
block
This second paragraph has a
note.
p elements are positioned (but don’t move!)
90. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Absolute positioning
Specify location for edges of box relative to
positioned containing block
91. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Absolute positioning
10em padding top
edge
padding left
edge
92. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Absolute positioning
8em
93. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
Beyond Normal Flow
Absolutely positioned box does not affect
positioning of other boxes!
Second absolutely
positioned box
obscures first
94. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Position-Related Properties
z-index: drawing order for overlaid boxes
(largest number drawn last)
95. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Position-Related Properties
display: value none means that element
and its descendants are not rendered and do
not affect normal flow
visibility: value hidden (initial value
is visible) means that element and its
descendants are not rendered but still do affect
normal flow