The document provides an overview of CSS foundations including the three layers of web design, what CSS is, CSS syntax, selectors, applying styles, and the cascade. It discusses the structure, style, and behavior layers and how CSS is used to control presentation. Key points covered include the different ways to add CSS rules, CSS selectors like type, ID, class, and descendant selectors, and how specificity and inheritance apply styles. It also reviews CSS properties for styling text, lists, and links.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
This document discusses HTML and CSS. It provides an overview of HTML, describing it as a markup language used to define web pages using tags. It gives examples of basic HTML tags and page structure. It also covers CSS, explaining that CSS is used to style and lay out HTML elements, including different ways of inserting CSS like inline, internal, and external stylesheets. The document provides examples of HTML code and CSS code.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
The <div> tag defines sections in an HTML document and is used to group block elements to apply styles. It can contain other tags and attributes like id, class, style, and title can be used to identify and style the <div> section. Common uses include wrapping content in containers with specific backgrounds, alignments, or other styles.
Intro to HTML and CSS - Class 2 SlidesHeather Rock
1. CSS stands for Cascading Style Sheets and refers to how styles are applied hierarchically to HTML elements.
2. There are three main ways to attach CSS to a webpage: inline, embedded, and linked. Linked style sheets keep the styles in a separate .css file for easy maintenance.
3. CSS selectors allow targeting specific elements by HTML tag names, classes, IDs, and other attributes. Common selectors include colors, fonts, links, and compound selectors.
The document discusses the 3 layers of a web page: content (HTML), presentation (CSS), and behavior (JavaScript). It states that the content layer defines the structure and semantics, the presentation layer specifies the visual design, and the behavior layer adds interactivity. It provides examples of using HTML tags like <h1>, <p>, and <ul> to build the content layer and separates the different layers to build a webpage like building a house with different materials.
This document provides an introduction to HTML and CSS. It discusses what HTML and CSS are used for, with HTML defining the content or structure of a document and CSS controlling the style. It outlines some of the most important HTML elements like <div>, <span>, <p>, and <h1-h6> and how they are used. It also introduces new HTML5 elements like <header>, <nav>, <section>, <article>, and <aside>. The document then discusses CSS selectors for targeting elements, properties for changing elements, and values. It notes that browsers have default styling and custom properties. Finally, it encourages keeping CSS simple and mentions available frameworks.
This document discusses how to insert paragraphs into an HTML document using HTML5 and CSS for styling. It demonstrates creating a basic page with paragraphs, linking an external CSS stylesheet, and including some basic CSS styling rules to change font, background color, and add a table structure. The presentation recommends validating the code and testing the page in different browsers.
This document provides an overview of HTML elements and tags. It discusses the basic HTML page structure including <html>, <head>, and <body> tags. It also covers common text formatting tags, links, images, lists, and more. The document emphasizes that HTML provides semantic structure and meaning to content through appropriate tag usage. It concludes with a brief discussion of relative vs. absolute links and FTP for transferring files to a server.
The document provides an overview of HTML (Hypertext Markup Language) including:
1) HTML is a markup language used to describe web pages using tags to structure content like headings, paragraphs, lists, links, images and tables.
2) Various HTML tags are described like <h1>-<h6> for headings, <p> for paragraphs, <b> for bold, <i> for italic, and <a> for links.
3) Additional HTML concepts covered include internal and external CSS, meta tags, images, tables, frames, iframes and cascading style sheets (CSS) for styling content.
This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
CSS is used to style and lay out web pages. There are three types of CSS: external, internal, and inline stylesheets. External stylesheets define styles in CSS files and can be used across many web pages, internal stylesheets are defined within the <style> tags in an HTML page, and inline styles are defined within HTML elements using the style attribute. CSS selectors allow targeting specific elements using IDs, classes, types, and other attributes to style them. Common CSS properties include colors, backgrounds, borders, padding, margins, and styling of links and lists.
Introduction to web design discussing which languages is used for website des...Aditya Dwivedi
This PPT on web design gives you a brief introduction to web design discussing which languages is used for website designing
This PPT covers the following topics:
• What is website design
• Languages for web design
• Html (Hypertext markup language)
• Html elements
• Tables in HTML
• Html forms
• Tags of HTML
• Introduction to CSS
• CSS (Cascading Stylesheet)
• Types of stylesheet
• CSS selectors
• CSS background property
• CSS images
• CSS links
• CSS position
MAAN Software Inc. is a leading software firm generating its services since a long time in the domain of digital solution. It has successfully managed to aid hundreds of entrepreneurs and small businessmen to launch their endeavors and turn them into successful digital units.
HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.
This document provides an introduction to HTML and covers several key topics:
1. It explains what HTML is and that it is the skeleton or structure of web pages, describing elements with markup tags.
2. It reviews important HTML tags like headings, paragraphs, links, images, and lists and how they are used to provide structure and semantics to text.
3. It also discusses other useful tags like comments and provides additional resources for further learning HTML.
This document provides an overview of HTML and covers topics such as basic HTML structure and tags, formatting text, adding links, creating lists and tables, inserting images, and using form elements. The document includes examples to demonstrate each HTML feature discussed.
This document discusses different types of web navigation, including structural, associative, and utility navigation. It also discusses types of pages like navigational, content, and functional pages. Good navigation is critical for the user experience and should show users where they are, where they can go, and how to get back. Navigation should match users' mental models of the site and not be overwhelming with too many choices.
This document provides a summary of 10 usability and user experience guidelines that can help make someone a better web designer. The guidelines discussed include mental models, the 80/20 rule, Fitts' law, Hick's law, the seven plus or minus two rule, the two second rule, the F-shaped reading pattern, the trunk test, consistency, and the principle that form follows function. Each guideline is briefly explained in 2-3 sentences with examples given for some. References for further reading on user experience design are also provided.
Responsive web design (RWD) creates dynamic changes to a website's appearance depending on the screen size and orientation of the device being used to view it. It uses media queries and breakpoints, which allow different style rules for different screen widths. A mobile-first approach designs for mobile screens first before adjusting styles for larger screens.
The document discusses conventions and expectations for website design. It explains that users expect websites to work in predictable ways, so conventions have developed over time through cultural norms, technology limitations, familiarity from other media, ease of use, advertising, common platforms, and trends. It then outlines some basic components that are found on most websites, such as a header, feature area, body/content, sidebar, and footer. Finally, it discusses the standard web development process and where graphic/UI designers fit within the planning and design stages.
JavaScript is a client-side scripting language that is commonly used to create dynamic and interactive effects on web pages. It resides in the browser and is used to enhance user interfaces and experiences on websites. JavaScript code is made up of statements that are written within script tags. Functions are blocks of code in JavaScript that perform specific tasks, and variables are used to store and retrieve values. jQuery is a JavaScript library that simplifies client-side scripting by using CSS selectors and providing methods to easily manipulate HTML elements and run animations. Both JavaScript and jQuery code is typically linked from the HTML head or an external .js file and placed above other scripts.
The document provides guidelines for using images on the web, including saving images in the proper format like JPG, PNG, or GIF depending on whether the image needs transparency or a wide color range, and at the optimal size for the context. It discusses using images within HTML and CSS and measuring images in pixels, and provides exercises to practice saving images at different formats and sizes using Save for Web.
The document discusses key concepts in web design including usability, user experience, and user-centered design. It defines usability as how easy a product is to use, user experience as encompassing all aspects of a user's interaction with a company or product, and user-centered design as optimizing a product around how users need or want to use it rather than forcing users to change their behavior. The document also provides examples of techniques for understanding users like personas, use cases, and usability testing to help ensure designs are focused on the user.
Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS declarations are made up of selectors and properties. Selectors identify elements on the page and properties set specific styles for those elements, like color, font, size, and layout. CSS rules cascade based on specificity and source, with more specific and inline rules taking precedence over broader and external rules. Inheritance passes down text-based styles by default.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML and XML documents. CSS separates document content from document presentation, enabling control over elements like layout, colors, and fonts. This separation improves accessibility, flexibility, and maintenance of web pages. CSS can format pages for different rendering methods like on-screen, in print, and for speech-based browsers.
In this presentation we examine the use of Contrast, Repetition, Alignment and Proximity as elements of good design, found in the Joshua Tree Epiphany.
This chapter introduces key concepts about the internet and web development. It describes the evolution of the internet from the removal of commercial restrictions in the 1990s. It also explains standards bodies that coordinate internet protocols and addresses. The chapter outlines internet infrastructure, including clients, servers, and protocols like HTTP, TCP/IP, and domain name systems. It introduces markup languages like HTML, XHTML, and HTML5 that form the building blocks of web pages. Finally, it discusses popular uses of the internet like e-commerce, blogs, and social media.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Your Presentation is CRAP, and That's Why I Like ItJo McRell
The document discusses the CRAP principles for designing effective visual presentations. It advocates using Contrast, Repetition, Alignment, and Proximity (CRAP) to create slides that are easy to understand. A series of before and after examples demonstrate how applying these principles can improve slide clarity and readability. The slides become more scannable and help audiences better understand and remember the presented information.
A starter guide to Color Theory in design. We will cover ideals like the Color Wheel (Primary, Secondary, Tertiary), Compliments, Triads, Split Compliments, Analogous, Shades, Tints, Monochromatic, Warm & Cool, and of course take a quick look at the differences between RGB and CMYK Color Modes.
The document provides an overview of basic CSS concepts including what CSS is, why it's used, CSS syntax, selectors like element, class, ID and pseudo selectors, and common CSS properties for styling like color, background, fonts, text, lists, and borders. CSS is used to control the presentation and layout of HTML documents and allows separation of HTML semantic content from visual design.
This document discusses different types of forms and form elements that can be used to collect user input on a website, including text fields, checkboxes, radio buttons, dropdown menus, submit buttons, and file uploads. It provides examples of how to code these different form elements using HTML tags like <form>, <input>, <label>, <select>, and <textarea> and describes attributes that can be added to customize elements. The document also offers best practices for labeling form fields and designing accessible forms.
This document provides an introduction to JavaScript and jQuery. It defines JavaScript as a scripting language used to create dynamic and interactive web pages and applications. It resides in the browser rather than on the server. JavaScript uses functions to organize code into well-defined, reusable tasks. Functions are executed when events occur or when called from other scripts. The document also defines jQuery as a JavaScript library that simplifies client-side scripting with HTML through its selector engine and methods. jQuery code is linked in the page head or an external file below CSS but above other scripts.
The document provides an introduction to CSS including an overview of what CSS is, why it is used, and its basic syntax and structure. CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of structured documents written in HTML or XML. It allows separation of document content from document presentation and formatting. CSS saves development time, makes pages load faster, and allows easier page maintenance.
This is part of my classroom curriculum on IBM Rational Host Access Transformation Services. More material is available from our on site classroom courseware.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
The document provides instructions for downloading Aptana Studio and provides a brandery airport code. It includes the following information:
1. It instructs readers to download Aptana Studio from the provided URL if they have not already done so.
2. It provides a brandery airport code of "brandery123".
3. The document does not contain any other information.
This document provides an introduction to HTML and CSS, the basic building blocks of web design. It explains that HTML is the markup language used to define the structure and content of a web page, while CSS is used to specify the visual styling and layout. The document outlines some key HTML elements and tags as well as the basic syntax of CSS selectors, properties, and values used to style HTML elements. It encourages using the browser's "Inspect Element" tool and CodePen to experiment with and learn HTML and CSS.
This document discusses various topics related to Cascading Style Sheets (CSS). It begins with definitions of CSS, its versions (CSS1, CSS2, CSS3), and differences between HTML, CSS and JavaScript. It then covers CSS basic syntax, applying CSS to HTML documents using inline, internal and external stylesheets, CSS selectors like ID, class, and various other advanced selectors. The document provides examples to explain concepts like CSS lengths and units, border, margin, padding properties and more.
The document provides an introduction to CSS (Cascading Style Sheets), explaining what CSS is, how it works, and some basic syntax and concepts. CSS allows separation of document content from document presentation by defining styles that are applied to HTML elements. Styles can be defined internally, in an external CSS file, or inline. The CSS box model is also explained, with the content, padding, border, and margin areas of elements illustrated. Common CSS properties for text formatting are also listed.
The document provides an introduction to CSS (Cascading Style Sheets) including the different methods for linking an external CSS stylesheet (internal, external, inline). It describes CSS syntax using selectors, properties, and values to style HTML elements. Specific CSS properties like margins, padding, and classes/IDs are defined. The document is a tutorial that teaches CSS basics through examples to style text formatting, layout, and design elements of a webpage.
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.
CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. It provides greater typography and layout controls and easier site maintenance through separation of design (CSS files) from content (HTML files). CSS selectors target specific elements to change properties like colors, backgrounds, fonts etc. Styles can be defined internally, in a separate external CSS file, or inline within elements. Classes allow targeting elements with the same styling. Common CSS properties control text, backgrounds, fonts and other visual aspects of HTML elements.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML documents. CSS describes how HTML elements are displayed on screen, paper, or other media. CSS saves work by allowing control of layout and presentation for multiple web pages from one stylesheet file. CSS solves the problem of formatting documents that originally arose from adding font tags and other styling attributes directly into HTML.
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.
CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS can be defined internally, inline, or externally in CSS files. CSS rules have selectors and declarations, where properties and values are used to style elements. Common CSS properties control color, text formatting, background images and colors. Styles can be applied to HTML elements, classes, or IDs. When multiple conflicting styles are defined, styles are cascaded according to precedence rules with inline styles having the highest priority.
The document discusses different types of client-side scripts including Cascading Style Sheets (CSS), JavaScript, and Dynamic HTML (DHTML). It explains how CSS can be used to style web pages through internal, external, and inline styling. Common CSS properties for styling backgrounds, text, and other elements are also described.
The document summarizes Workshop #2 on web development hosted by Sohail Asghar and Saad Mustafa. It covers the basics of HTML, CSS, and JavaScript. For HTML, it discusses basic tags like headings, paragraphs, links, images and lists. For CSS, it explains concepts like selectors, colors, backgrounds, borders, fonts, padding, and margins. For JavaScript, it provides introductions to variables, output, data types, and more.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including how elements should be rendered on screen, on paper, in speech, or on other media. CSS saves time because styles defined in CSS files can be reused across multiple HTML pages. It provides more control over formatting than HTML alone and helps separate a document's content from its presentation. The document then explains various CSS concepts like selectors, properties, syntax, and how to apply styles using internal, external and inline 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 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) allow control over the appearance of web pages by separating presentation from content. CSS is used to create consistent styles across multiple pages by defining styles that can be applied using classes and IDs. CSS rules define selectors and properties to style HTML elements, and separating styles from HTML structure makes pages easier to maintain and modify. Common CSS selectors include element, class, ID, and contextual selectors. Styles can be linked to HTML using inline, embedded, and external stylesheets.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
This document discusses user-centered design and the roles of web designers. It explains that web designers encompass skills in graphic, UI, and UX design. The standard web development process involves planning, design, production, and launch. Planning includes defining user needs through research and analysis. Design involves wireframes, prototypes, and visual design. UX design focuses on ensuring a positive user experience through attributes like usability, ease of use, and minimizing errors. The goal of user-centered design is to optimize products around how users want to use them rather than forcing users to change behavior.
This document provides information about a web design course offered in the fall of 2012 at Columbia College Chicago. The 3-credit course covers topics like hypertext, graphic styles, file formats, and user interfaces. Students will design and build HTML documents and graphics and write a thesis. The course requires prerequisites in introduction to graphic design and visual communications. Objectives include learning HTML, CSS, designing for the web. The course will include exercises, projects, and quizzes. Students will maintain a blog and complete an online ad campaign and personal portfolio project.
The document provides an overview of HTML elements and tags for basic webpage structure and formatting. It discusses the <html>, <head>, <body> tags and their uses. It also covers common text formatting tags (<p>, <h1>-<h6>), lists (<ul>, <ol>, <li>), links (<a>), images (<img>), and the differences between relative and absolute links. The document is intended as an introduction to basic HTML tags and elements for building webpage structure.
This document provides an introduction and overview of topics that will be covered in a Web Design I class, including:
- The basics of HTML elements, tags, and page structure with headings, paragraphs, and nesting tags.
- Key concepts like the difference between the Internet and World Wide Web, how URLs and IP addresses work, and the difference between static and dynamic web pages.
- The three layers of web design: structure with HTML, style with CSS, and behavior with JavaScript.
- A preview of upcoming topics like HTML elements, client style sheets, and learning solid structural design before adding visual design.
This course explores using photography for design communications. Students will apply skills from Photography I to create all images needed for their design and advertising layouts. The course covers alternative photography methods, location and studio lighting, and tabletop photography. Students must have taken Photography I and either Photography I Workshop or Digital Photography for Non-Majors. Attendance is required as students will critique each other's work and collaborate on projects. Students should expect to spend 6-8 hours per week outside of class on coursework. Projects will be evaluated on following instructions, appropriateness of solution, creativity, craftsmanship, and presentation.
The document discusses different types of stock photography licensing: licensed imagery which allows contracted use for a set period of time and usages; royalty-free which requires a single fee for unlimited usage; copyright-free which has different levels of copyright available under Creative Commons; and public domain which includes works published before 1923 or missed copyright renewal. It also lists select sources for each type of licensed photography.
The document summarizes the history of color photography, beginning with the first permanent color photograph taken in 1861 using three black and white photos with red, green, and blue filters. It discusses early pioneers in color photography techniques in the late 1800s. The document also notes the first 3D color stereoscopic photos taken after the 1906 San Francisco earthquake and the first commercially successful color photography process introduced in 1907. The rest of the document focuses on color models and terms used in digital design, including RGB, CMYK, hue, saturation, temperature, and value.
The document is a request for PSA posters on the topic of photo communications dated February 7. It provides the item number, 22-3530 - 01, and specifies that the posters should promote photo communications but provides no other details.
Rodchenko found the natural setting of his country house to be unorganized and without subjects to photograph. However, when he looked up he saw the trees towering above him "like telephone poles" and took a raking shot from below to propose a dynamic alternative to traditional landscape views.
In the late 1920s, Bayer began using photography in relation to his design work at the Bauhaus. In 1928 he traveled to Marseille and photographed boats docked in the harbor from overhead, exploiting the camera's ability to transform everyday reality into patterned abstractions.
White balance is the adjustment of the colors in an image to compensate for the color of the light source, with a color temperature of around 5000
The document discusses key design elements including line, shape, texture, space, size, and value (and color). It provides definitions and examples for each element. Line can organize or divide elements using rules. Shape refers to external outlines like circles, squares, and triangles. Texture adds richness through visual or pattern texture. Space includes white space or negative space between elements. Size relates to scale and relationships between objects. Value adds dimension through lightness and darkness, and color can further enhance mood.
Check your camera's format and file quality settings, setting dial position, and balance of aperture, shutter speed, and ISO settings before shooting. Use a fast shutter speed of at least 1/30 sec, a large aperture with the lowest f-number, and increase the ISO setting as needed to properly expose photos in different lighting conditions.
This document provides information about a beginning typography course offered at an unnamed institution. The course will be taught on Monday evenings from 6:00-9:50pm in room 907 by instructor Shawn Calvert in the fall of 2007. The course will introduce students to the basic aspects of letterforms and typography through projects. Students will investigate the historical, technical, and communicative aspects of typography. The course objectives, goals, details, schedule and expectations are provided.
Principles of Roods Approach!!!!!!!.pptxibtesaam huma
Principles of Rood’s Approach
Treatment technique used in physiotherapy for neurological patients which aids them to recover and improve quality of life
Facilitatory techniques
Inhibitory techniques
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfJackieSparrow3
we may assume that God created the cosmos to be his great temple, in which he rested after his creative work. Nevertheless, his special revelatory presence did not fill the entire earth yet, since it was his intention that his human vice-regent, whom he installed in the garden sanctuary, would extend worldwide the boundaries of that sanctuary and of God’s presence. Adam, of course, disobeyed this mandate, so that humanity no longer enjoyed God’s presence in the little localized garden. Consequently, the entire earth became infected with sin and idolatry in a way it had not been previously before the fall, while yet in its still imperfect newly created state. Therefore, the various expressions about God being unable to inhabit earthly structures are best understood, at least in part, by realizing that the old order and sanctuary have been tainted with sin and must be cleansed and recreated before God’s Shekinah presence, formerly limited to heaven and the holy of holies, can dwell universally throughout creation
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Neny Isharyanti
Presented as a plenary session in iTELL 2024 in Salatiga on 4 July 2024.
The plenary focuses on understanding and intepreting relevant TPACK competence for teachers to be adept in teaching multimodality in the digital age. It juxtaposes the results of research on multimodality with its contextual implementation in the teaching of English subject in the Indonesian Emancipated Curriculum.
(T.L.E.) Agriculture: Essentials of GardeningMJDuyan
(𝐓𝐋𝐄 𝟏𝟎𝟎) (𝐋𝐞𝐬𝐬𝐨𝐧 𝟏.𝟎)-𝐅𝐢𝐧𝐚𝐥𝐬
Lesson Outcome:
-Students will understand the basics of gardening, including the importance of soil, water, and sunlight for plant growth. They will learn to identify and use essential gardening tools, plant seeds, and seedlings properly, and manage common garden pests using eco-friendly methods.
Integrated Marketing Communications (IMC)- Concept, Features, Elements, Role of advertising in IMC
Advertising: Concept, Features, Evolution of Advertising, Active Participants, Benefits of advertising to Business firms and consumers.
Classification of advertising: Geographic, Media, Target audience and Functions.
Delegation Inheritance in Odoo 17 and Its Use CasesCeline George
There are 3 types of inheritance in odoo Classical, Extension, and Delegation. Delegation inheritance is used to sink other models to our custom model. And there is no change in the views. This slide will discuss delegation inheritance and its use cases in odoo 17.
Split Shifts From Gantt View in the Odoo 17Celine George
Odoo allows users to split long shifts into multiple segments directly from the Gantt view.Each segment retains details of the original shift, such as employee assignment, start time, end time, and specific tasks or descriptions.
Views in Odoo - Advanced Views - Pivot View in Odoo 17Celine George
In Odoo, the pivot view is a graphical representation of data that allows users to analyze and summarize large datasets quickly. It's a powerful tool for generating insights from your business data.
The pivot view in Odoo is a valuable tool for analyzing and summarizing large datasets, helping you gain insights into your business operations.
2. For Starters
!
!
Post assignment and blog post
Review student blog posts
Instructor review of Assign 3
HTML refresher exercise
!
!
3. Skills learned so far
how to create a web directory and link between files
Code a basic webpage from scratch
how to mark up different types of content with appropriate HTML tags
how to use basic HTML attributes to create links and web images
how to set up a site domain, server host and install a wordpress site
19. Stylesheet
A stylesheet is a set of rules defining
how an html element will be “presented”
in the browser.
These rules are targeted to specific
elements in the html document.
20. The concept is very similar to how you create stylesheets in InDesign.
21. Cascading
Most pages will have multiple stylesheets
that define different styles to the same
elements.
The cascade defines an ordered sequence
of style sheets where rules in later sheets
have greater precedence than earlier
ones.
26. There are 2 basic ways to add styles to your html page:
External (linked)
<head>
Internal
27. External
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
Except in special circumstances, best practice is
to keep all your styles in a separate css document.
Linked stylesheets can be applied across multiple
documents and sites.
28. Internal (embedded)
<head>
<style> p {color: red} </style>
</head>
You can add styles directly into your html page
using the “style” element in the <head> of
your document.
Embedded styles apply ONLY to that
html document.
29. Internal (inline)
<p style=”color: red”>Red Text</tag>
You can add styles directly into your html
markup using the “style” attribute on opening
tag of your element. This is called an “inline”
style.
Inline styles apply ONLY to that specific
instance of the element.
31. Best Practice
In most cases you should use the external method of adding
styles to your html page.
Writing the css in the <head> of your document is acceptable
if you definitely only want to apply the styles to a single page.
However, adding your styles “inline” — inside a html starting
tag, e.g. <p style=”font-size: 14px”> — should be avoided.
33. Three terms for describing your styles:
CSS rule
CSS selector
CSS declaration
34. CSS Rule
selector {property: value;}
declaration
Every style is defined by a selector and
a declaration. The declaration contains at least
one property/value pair.Together they are
called a CSS Rule.
36. CSS Selector
p {
color: red
}
The selector is typed in front of the declaration,
with a space separating it and the opening
curly-bracket (aka curly-brace).
Typically, extra spaces and returns are added as
shown for the sake of readability.
38. CSS Declaration
p {
property: value
}
The declaration is always defined in a property/
value pair. The two are separated by a colon.
How you define the properties will affect how
HTML elements are displayed.
39. CSS Declaration
p {
font-family: Arial, sans-serif;
font-size: 14px;
color: #666666;
}
You can apply multiple declarations to a
selector(s) by separating the delcarations with
semi-colons.
43. Type (element) Selectors
body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}
The simplest selector is the type selector, which
targets an html element by name.
44. The essential selector types (elements)
Primary
Structure
Body
Elements
Formatting
Elements
html
p
em
body
br
i
h1 – h6
strong
ul
b
ol
q
a
blockquote
img
span
div
45. Type selectors vs ID & Class selectors
Type selectors use the tag names that are
built into HTML.
ID and class selectors use names that you
define, and are added to html elements
to make them more specific.
47. ID Selectors
#logo {declaration}"
CSS
<img id=”logo” src=”” alt=””>
HTML
An ID is an html attribute that is added to your
html markup. You reference that ID in your css
with a hash.
48. IDs vs Classes
The most important difference between IDs
and classes is that there can be only one ID
on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and
multiple classes.
49. IDs vs Classes
ID: #344-34-4344
Class: Male
Class: Student
ID: #123-54-9877
Class: Female
Class: Student
50. Multiple classes
CSS
.ingredients.time {declaration}"
HTML
<div class=”ingredients time”>
<h1></h1>
</div>
Elements can have multiple classes, giving you
more control. The are written in the CSS in the
exact order they appear in the html, with no
spaces.
51. Combining IDs and classes
CSS
#wrapper.ingredients.time {declaration}"
HTML
<div id=”wrapper” class=”ingredients time”>
<h1></h1>
</div>
Elements can have both ids and classes. While
an element can have only one id, it can have
multiple classes.
52. Descendant Selectors
.ingredients p {declaration}"
CSS
<div class=”ingredients”>"
HTML
<p></p>"
</div>
A descendant selector is a selector that
combines the selectors of different elements to
target a specific element(s).
56. The Cascade
The “cascade” part of CSS is a set of rules
for resolving conflicts with multiple CSS
rules applied to the same elements.
For example, if there are two rules defining
the color or your h1 elements, the rule that
comes last in the cascade order will
“trump” the other.
58. Inheritance & Specificity
As a designer, your goal is to set an overall
global consistent style, then add in more
specific styles as needed.
You can control how and where your styles are
applied to your HTML by managing their
inheritance and specificity.
59. Inheritance
Most elements will inherit many style properties
from their parent elements by default. A parent
is a containing element of a child.
HTML
"
<body>
<div>
<ul>
<li></li>
</ul>
</div>
</body>
relationship
"
parent of site"
parent of ul and li, child of body"
parent of li, child of div and body"
child of ul, div, and body"
!
63. Specificity
Shortly after styling your first html elements,
you will find yourself wanting more control over
where your styles are applied.
This is where specificity comes in.
Specificity refers to how specific your selector is
in naming an element.
64. Specificity
If you have multiple styles applied to the same
element, the browser goes with whichever
selector is more specific.
Male
Male
Student
Male
Student
George
66. Where specificity gets tricky
The basic concept of specificity is fairly simple:
you target specific elements in your HTML by
listing out more of their identifiers.
For example, if you want to apply a special
style to a paragraph, you need a “hook” in the
html to make it different from every other
paragraph.
67. Where specificity gets tricky
This can get tricky in your css, because
the more specific you make your selectors, the
harder it is to manage global styles
(inheritances).
68.
Where specificity gets tricky
Make all text pink.
body {color: pink}
Make all text in the element with the id
“recipe” blue.
#recipe {color: blue}
Make all text in the element with the class
“ingredients” blue.
.ingredients {color: green}
Make all text in the paragraph element
with the class “ingredients” purple.
p.ingredients {color: purple}
Make all text in the paragraph element
with the class “ingredients”, contained in
the element with the id “recipe”, grey.
#recipe p.ingredients {color: grey}"
69. Where specificity gets tricky
HTML
<div id=”recipe”>
<p class=”ingredients”>
<div>"
CSS
body {color: pink}
#recipe {color: blue}
.ingredients {color: green}
p.ingredients {color: purple}
#recipe p.ingredients {color: grey}"
!
72. Property Values
color: #444444;
font-family: "Times New Roman", Georgia, serif;
font-size: 16px; (define in px, em, or %)
Style declarations are made of a property and
a value. The type of value you can use
depends on the property.
73. There are 5 basic ways of identifying fonts:
Web Safe Fonts
(called font-family in your text)
Font-Face
Service-Based Font-Face
Images
sIFR/Cufon
74. Web-safe
Web-safe fonts are fonts likely to be present on a wide
range of computer systems, and used by Web content
authors to increase the likelihood that content will be
displayed in their chosen font.
If a visitor to a Web site does not have the specified
font, their browser will attempt to select a similar
alternative, based on the author-specified fallback
fonts and generic families or it will use font
substitution defined in the visitor's operating system.
77. Font Stack
The font-family property can hold several font names as a
"fallback" system. If the browser does not support the first
font, it tries the next font.
Start with the font you want, and end with a generic family,
to let the browser pick a similar font in the generic family,
if no other fonts are available.
!
EXAMPLES
body {
font-family: Helvetica, Arial, sans-serif}"
h1 {
“Lato”, Arial, sans-serif}
"
78. Units of Type Size
There are three different ways to define type sizes in css.
ems
Ems are a relative unit: 1em is equal to the current font size.
The default text size in browsers is 16px. So, the default size
of 1em is 16px.
px
Pixels are a an absolute unit, it sets the text to a specific size
instead of a size relative to the browser’s default. Except in
special cases, you should define pixels in your css with the
number and “px” together, no spaces: “16px”.
%
Like ems, percentages are also a relative unit. It is very useful
for layout, not usually a good idea for type sizes.
79. Specifying Color
There are three different ways to define color in css.
Hex Codes
This is the most common way to identify colors in CSS. The
code gives two characters to correspond to RGB values. The
number always has 6 characters (#44de42), unless all four
characters are the same, and you can shorten it (#444).
RGB
You can use a color’s RGB values with this syntax:
p {color: rgb(34,123,125);}
Color Names
There are built-in color names that you can use, that will
provide generic hues:
p {color: rgb(34,123,125);}
88. List styling
Links can be styled just like any text, but have
special properties. The most often used is “liststyle-type”, which allows you to control whether
bullets are used, and how they are styled.
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
!
!
!
89. List styling
By default, <li> elements are block-level elements
(they stack on top of each other). You can force
them to line up in a row by changing the display
property to “inline.”
li {
display: inline;
}
!
!
!
92. Link states
Links can be styled just like any text, but have
special pseudo-classes that allow you to define
their behavior.
a {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there
are some order rules:
— a:hover MUST come after a:link and a:visited
— a:active MUST come after a:hover
!
93. Links
By default, links are underlined. You can turn this off by
changing the “text-decoration” property.
In the example below, the link will only have an underline
when the cursor is hovering over the element.
a {
color:#FF0000;
text-decoration: none;
}
a:hover {
color:#00FF00;
text-decoration: underline;
}
!