Here are the steps to build a basic horizontal navigation menu bar:
1. Create an unordered list <ul> with class="menu"
2. Add list items <li> for each menu item
3. Style the <ul> with display:inline-block and border-bottom
4. Style the <li> with display:inline-block, padding and hover effect
5. Add a class="current" to highlight the active page
6. Use a border-left on .current to create a left arrow
Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.
CSS3 is the latest standard for cascading style sheets (CSS). CSS3 introduces several new modules that expand the capabilities of CSS, including selectors, box model, backgrounds/borders, image values, text effects, transformations, animations, multiple column layout, and user interface. The document provides examples of CSS3 properties and modules, demonstrating borders, selectors, text effects, menus, and creating multiple columns. It concludes by thanking some websites for information on CSS3.
The document discusses various topics in CSS3 including selectors, properties, media queries, and visual effects. It provides examples and explanations of CSS3 concepts like gradients, rounded corners, box shadow, text shadow, opacity, and more. Browser support and cross-browser compatibility of CSS3 features are also covered.
This document provides an overview of CSS (Cascading Style Sheets) including its history, basic syntax and structure, common properties that can be styled, and different methods for applying styles. Key points covered include using CSS to style fonts, colors, links, and page layout with properties like padding, margin, and floats. The document also demonstrates how to select elements with IDs, classes, and other selectors to style them.
jQuery is a JavaScript library that makes it easier to manipulate web pages and add interactivity. It allows developers to select HTML elements, add or modify content, and animate elements using less code than traditional JavaScript. The jQuery library is linked to in the <head> section of an HTML page using a <script> tag. jQuery commands begin with $ and use CSS selectors inside parentheses to target elements. Common commands include fadeOut(), hide(), and slideUp() to animate elements. Parameters can be passed to commands to modify their behavior.
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
The document discusses CSS3 features for quality web development, including vendor prefixes, selectors, backgrounds, borders, gradients, additional features like calc(), font-face, multi-column layouts, box shadows, opacity, text-overflow, and transforms. It provides examples and explanations of how to implement these new CSS3 capabilities.
This document provides an overview of creating simple and responsive CSS3 designs. It discusses:
- Using a flexible grid, flexible images, and media queries to make a design responsive.
- The four steps to get responsive: plan the design, crunch the numbers, determine breaking points, and add media queries.
- New CSS3 properties and selectors that allow for richer web experiences.
- Tips for cross-browser compatibility like leveraging source order, filtering styles, and using tools to handle vendor prefixes.
Marc Grabanski gave a whirlwind tour of Scalable Vector Graphics (SVG), covering the basics of SVG including elements, embedding SVG, features like DOM structure and filters, demos of transformations and animation, and tools like RaphaelJS. The presentation provided an overview of SVG and highlighted its advantages like scalability, accessibility, and use of HTML and CSS. Examples of various SVG elements, embedding methods, and features like filters and transformations were demonstrated.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
CSS in React - The Good, The Bad, and The UglyJoe Seifi
Overview of 5 frameworks to style JavaScript applications written in React including Radium, Aphrodite, CSS Modules, Styletron, and Styled Components with a Cheat Sheet of their features
Basics of Front End Web Dev PowerPointSahil Gandhi
Here are some tips for hands-on part 2:
- Add a class like .paragraph to the <p> tags containing your sentences
- Add an ID like #image to the <img> tag
- In an internal or external CSS file:
.paragraph {
color: blue;
font-size: 20px;
}
#image {
padding: 10px;
display: block;
margin: 0 auto;
}
- For background:
body {
background-color: lightgray;
}
- Play around with other CSS properties like text-align, font-family etc.
This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.
This document provides an introduction to HTML and CSS for frontend development. It begins with an overview of the instructor and goals of the course. Key concepts of HTML like tags, elements, and attributes are explained. CSS topics covered include selectors, properties, values, and layout techniques like positioning. Code examples and exercises are provided to demonstrate and practice the concepts. The document encourages continued learning and offers additional resources through Thinkful.
Are you struggling to create a consistent user interface for your web app? Don't want to bring in too many expensive designers? Take a look at Bootstrap!
This document provides an overview of HTML5 and CSS3 topics. It begins with an agenda for HTML5 that covers basics like tags, attributes and elements. It then discusses HTML5 semantic elements and features like video, audio, and forms. For CSS3, it outlines modules including borders, backgrounds, gradients, text effects, web fonts, transforms, transitions, animations, columns and user interface. The document aims to introduce key concepts and properties for front-end development.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
CSS (Cascading Style Sheets) is a coding language that is used to format and style HTML documents. It allows you to control things like fonts, colors, layout, and formatting on web pages without having to insert HTML tags. The document provides an overview of CSS syntax and properties, and how to use CSS to style elements like text, links, backgrounds, borders, padding and margins. It also discusses tools for working with CSS like inspect element and text editors, and provides examples of CSS tricks for rounded corners, gradients, lists and conditional formatting. Resources for learning more about CSS are included at the end.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables adapting appearance for different devices. The document provides examples of using CSS classes to style template elements and explains how to set up a demo system using the included CSS and templates.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables customization of appearance for different devices. The document provides examples of how to apply CSS classes and rules to Corvid template elements to control fonts, colors, positioning and more.
Vskills certified CSS designer Notes covers the following concepts.
1 CSS Basics
1.1 Introduction
1.2 Why to use CSS
1.3 CSS Editors
1.4 A CSS Example
1.5 Custom CSS
1.6 Cross Browser Testing
1.7 Including CSS
1.8 Validating CSS
Get complete e-book on CSS.
http://www.vskills.in/certification/Web-Development/certified-css-designer
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
This document provides an overview of various front-end frameworks and tools. It discusses HTML templating languages like HAML and templating engines like Handlebars. It also covers CSS preprocessors like SASS and LESS. JavaScript libraries and frameworks covered include jQuery, Backbone, Spine and CoffeeScript. Boilerplates like HTML5 Boilerplate and frameworks like Twitter Bootstrap and Zurb Foundation are also summarized. The document encourages trying new tools but not feeling overwhelmed by the many options and focusing on those most helpful.
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
This document provides an overview of an introductory HTML/CSS crash course. It introduces the instructor and Thinkful, discusses the goals of learning core HTML and CSS concepts through building a basic website. It covers key topics like how the web works, HTML tags and elements, CSS selectors, properties and values, and linking a CSS stylesheet to HTML. The document emphasizes practicing the concepts through building assignments and challenges students to keep learning outside of the course.
The document discusses various new elements in CSS3 including shadow effects, rounded corners, border images, colored borders, opacity transitions, RGBA/HSLA colors, attribute selectors, multi-column layouts, transitions, web fonts, and media queries. It also covers CSS preprocessors like Sass and Less, adding variables, nesting, mixins and other features to make CSS more powerful and modular. Best practices for performance include minimizing HTTP requests, caching, browser support, frameworks and tools.
The document provides an overview of CSS (Cascading Style Sheets), which is the language used to style HTML elements and tell the browser how elements should be rendered. It covers CSS basics like selectors, properties, values, and rules. It also discusses CSS concepts like the cascade, specificity, inheritance, and adding CSS via links, style tags, and inline styles. The history of CSS is summarized, from its origins in the 1990s to modern features like Grid, Flexbox, and custom properties. Key sections are highlighted, including selectors, the cascade, specificity, and adding CSS to HTML.
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.
CSS (Cascading Style Sheets) contains rules for presenting HTML content. It separates presentation from HTML markup. CSS allows for multiple browsers to display web pages similarly and simplifies web page design modifications. CSS rules have weights that determine which take precedence when multiple rules apply. CSS selectors target elements using tags, classes, IDs and other attributes to style them. Common CSS properties control color, font, size, spacing and positioning.
This document provides an introduction to CSS (Cascading Style Sheets) and discusses various ways to implement CSS styles, including internal stylesheets, external stylesheets, inline styles, classes, IDs, and using divisions and spans. It covers CSS syntax, properties like margins, inheritance, and combining selectors. The document is divided into 18 chapters that progressively introduce CSS concepts from the basics to more advanced topics like browser issues.
This document provides an introduction to CSS (Cascading Style Sheets) for web developers. It discusses CSS terminology like selectors using id and class attributes. It also covers how to select and style groups of elements and descendants. The document gives examples of using CSS for colors, backgrounds, typography, layout using the box model, and print styles. It emphasizes clean separation of code and content and providing hooks for designers to easily style pages.
The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.
This document provides an overview of CSS (Cascading Style Sheets), including what CSS is, how it separates presentation from content, the history of CSS, sources of styles, selectors, properties, values, and positioning. CSS allows control over font, color, spacing, size, and positioning of elements to change how HTML content is displayed. CSS properties include display, visibility, float, clear, position, and box model properties that affect layout and appearance.
This document introduces CSS (Cascading Style Sheets) and provides examples of how to use CSS to style HTML elements. CSS allows separation of document structure (HTML) from presentation (CSS). There are three ways to associate CSS with HTML - external CSS files linked via <link>, internal <style> sections, or inline styles via the style attribute. CSS selectors target elements by tag name, class, ID, or context. Classes and IDs allow targeting groups or individual elements. CSS rules define styles using properties and values within curly braces. This allows consistent styling across pages by changing a single CSS file.
This document provides an introduction to using CSS3 properties like rounded corners, drop shadows, transforms, and transitions. It includes code examples for applying rounded corners, unevenly rounded corners, drop shadows, inset shadows, text shadows, color properties like RGB, HSL, and transitions. Transform properties demonstrated include translate, scale, and transform-origin. The final example shows how to create a circle with shadow.
Class 4 handout two column layout w mobile web designErin M. Kidwell
The document discusses building a two-column website layout using HTML and CSS, and making it responsive for mobile devices. It includes code for the HTML page structure with two columns, content, and navigation, as well as CSS code for styling. It then covers adding CSS media queries to modify the layout and styles at smaller screen sizes to optimize the design for mobile.
Class 3 create an absolute layout with css abs position (aptana)Erin M. Kidwell
Creating a 3 column layout using CSS absolute positioning. Div elements are used instead of tables, with classes added for the header, container, footer, and 3 columns. Styles are added in the CSS file to position and style the elements absolutely, add borders, background colors, and link pseudo-classes. The left column contains an unordered list and the right column some example links.
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...Erin M. Kidwell
The document provides instructions for creating a basic HTML table layout with three columns using CSS for styling. The steps include:
1. Creating a table with three rows for the header, columns, and footer.
2. Adding CSS classes and styling to center the content, add borders, and style each column differently with colors, widths and padding.
3. Previewing the styled table layout in Aptana.
The document provides instructions for styling an HTML page with CSS, including:
1) Linking an external CSS stylesheet to the HTML file.
2) Adding CSS styles like font-family, background-color, and color to format text and page elements.
3) Using CSS properties to control things like background images, text formatting, and lists.
4) Adding CSS classes and selectors to further style page sections and elements.
5) Styling HTML tables with CSS border, background-color, and color properties.
This document provides instructions for adding a CSS page to an HTML project in Aptana. It describes creating a new blank CSS file named "style.css", saving it in the same project folder as the HTML file, and linking to it from the HTML <head> using a <link> tag with the href attribute set to "style.css". It then mentions adding a body element selector to style.css to change the background color as a test.
The document provides an overview of basic HTML elements and tags for creating web pages, including:
<1> The <html>, <head>, and <body> tags which form the essential structure of an HTML document.
<2> Common text formatting tags like <p>, <h1>-<h6>, and <br> for paragraphs, headings, and line breaks.
<3> Other common elements like <a> for links, <img> for images, <ol> and <li> for ordered lists, and <table>.
<3> It also demonstrates how to add character entities, embed a Google Form, and other basic HTML features.
Class 1 handout (1) aptana create a new presentation and stylesheetErin M. Kidwell
To create a new project in Aptana, select File > New > Web Project. Name the project and click Next, then check the box to use the Basic Web Template before clicking Finish. This will generate an index.html file to begin building out the project structure.
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.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Erin M. Kidwell
Here is some basic HTML code with <html>, <body>, <h1>, <h2>, and <p> tags:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>This is a Main Heading</h1>
<h2>This is a Subheading</h2>
<p>This is a paragraph of text.</p>
</body>
</html>
Quality Patents: Patents That Stand the Test of TimeAurora Consulting
Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality.
Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality.
Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality.
Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank?
** Episode Overview **
In this first episode of our quality series, Kristen Hansen and the panel discuss:
⦿ What do we mean when we say patent quality?
⦿ Why is patent quality important?
⦿ How to balance quality and budget
⦿ The importance of searching, continuations, and draftsperson domain expertise
⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications
https://www.aurorapatents.com/patently-strategic-podcast.html
MYIR Product Brochure - A Global Provider of Embedded SOMs & SolutionsLinda Zhang
This brochure gives introduction of MYIR Electronics company and MYIR's products and services.
MYIR Electronics Limited (MYIR for short), established in 2011, is a global provider of embedded System-On-Modules (SOMs) and
comprehensive solutions based on various architectures such as ARM, FPGA, RISC-V, and AI. We cater to customers' needs for large-scale production, offering customized design, industry-specific application solutions, and one-stop OEM services.
MYIR, recognized as a national high-tech enterprise, is also listed among the "Specialized
and Special new" Enterprises in Shenzhen, China. Our core belief is that "Our success stems from our customers' success" and embraces the philosophy
of "Make Your Idea Real, then My Idea Realizing!"
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
How to Avoid Learning the Linux-Kernel Memory ModelScyllaDB
The Linux-kernel memory model (LKMM) is a powerful tool for developing highly concurrent Linux-kernel code, but it also has a steep learning curve. Wouldn't it be great to get most of LKMM's benefits without the learning curve?
This talk will describe how to do exactly that by using the standard Linux-kernel APIs (locking, reference counting, RCU) along with a simple rules of thumb, thus gaining most of LKMM's power with less learning. And the full LKMM is always there when you need it!
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/07/intels-approach-to-operationalizing-ai-in-the-manufacturing-sector-a-presentation-from-intel/
Tara Thimmanaik, AI Systems and Solutions Architect at Intel, presents the “Intel’s Approach to Operationalizing AI in the Manufacturing Sector,” tutorial at the May 2024 Embedded Vision Summit.
AI at the edge is powering a revolution in industrial IoT, from real-time processing and analytics that drive greater efficiency and learning to predictive maintenance. Intel is focused on developing tools and assets to help domain experts operationalize AI-based solutions in their fields of expertise.
In this talk, Thimmanaik explains how Intel’s software platforms simplify labor-intensive data upload, labeling, training, model optimization and retraining tasks. She shows how domain experts can quickly build vision models for a wide range of processes—detecting defective parts on a production line, reducing downtime on the factory floor, automating inventory management and other digitization and automation projects. And she introduces Intel-provided edge computing assets that empower faster localized insights and decisions, improving labor productivity through easy-to-use AI tools that democratize AI.
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Chris Swan
Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge.
You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter.
The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
Video traffic on the Internet is constantly growing; networked multimedia applications consume a predominant share of the available Internet bandwidth. A major technical breakthrough and enabler in multimedia systems research and of industrial networked multimedia services certainly was the HTTP Adaptive Streaming (HAS) technique. This resulted in the standardization of MPEG Dynamic Adaptive Streaming over HTTP (MPEG-DASH) which, together with HTTP Live Streaming (HLS), is widely used for multimedia delivery in today’s networks. Existing challenges in multimedia systems research deal with the trade-off between (i) the ever-increasing content complexity, (ii) various requirements with respect to time (most importantly, latency), and (iii) quality of experience (QoE). Optimizing towards one aspect usually negatively impacts at least one of the other two aspects if not both. This situation sets the stage for our research work in the ATHENA Christian Doppler (CD) Laboratory (Adaptive Streaming over HTTP and Emerging Networked Multimedia Services; https://athena.itec.aau.at/), jointly funded by public sources and industry. In this talk, we will present selected novel approaches and research results of the first year of the ATHENA CD Lab’s operation. We will highlight HAS-related research on (i) multimedia content provisioning (machine learning for video encoding); (ii) multimedia content delivery (support of edge processing and virtualized network functions for video networking); (iii) multimedia content consumption and end-to-end aspects (player-triggered segment retransmissions to improve video playout quality); and (iv) novel QoE investigations (adaptive point cloud streaming). We will also put the work into the context of international multimedia systems research.
In this follow-up session on knowledge and prompt engineering, we will explore structured prompting, chain of thought prompting, iterative prompting, prompt optimization, emotional language prompts, and the inclusion of user signals and industry-specific data to enhance LLM performance.
Join EIS Founder & CEO Seth Earley and special guest Nick Usborne, Copywriter, Trainer, and Speaker, as they delve into these methodologies to improve AI-driven knowledge processes for employees and customers alike.
Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data.
The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs.
Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution!
Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
How Social Media Hackers Help You to See Your Wife's Message.pdfHackersList
In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.
How Social Media Hackers Help You to See Your Wife's Message.pdf
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
1. If you have not already done so,
please download Aptana:
http://aptana.com
GDI Cincinnati
Intro to HTML/CSS: Class 4
Erin M. Kidwell / @erinmkidwell/ erin@girldevelopit.com
John David Back / @johndavidback / johndavidback@gmail.com
2. Agenda
1. Review of terms, topics, and styling
2. Print stylesheets
3. Layouts
4. HTML5
5. Detecting browser support
6. CSS3
Rounded corners / unevenly rounded corners
Drop shadows / inset shadows
Text shadows
Color: RGBA / HSL / HSLA
Animations: CSS Transforms / Transitions
7. Bonus exercises
Building a menubar
Building a two column layout
3. Review: Terms
Brief Review of HTML Terms
• Tag
• Elements
• Attributes
Brief Review of CSS Terms
• Element Selector
• Class Selector
• Id Selector
• Pseudoclasses
4. Quiz
<html> A) ID Selector
<head> B) Element Selector
<style> C) Class Selector
.SamplePics
{
border: 2px solid pink
}
</style>
</head>
<body>
<img src=“sample_picture.jpg” alt=“Sample”
Width=“100” height=“200” class=“SamplePics”>
5. Quiz
<html> A) Property
<head> B) Pseudoclass
<style> C) Attribute
.SamplePics
{
border: 2px solid pink
}
</style>
</head>
<body>
<img src=“sample_picture.jpg” alt=“Sample”
Width=“100” height=“200” class=“SamplePics”>
7. Quiz
<html> To position the div in the
<head> middle of the page; we can
<style> add margin: 0 auto; but we
#centerMe also need to specify one more
{ property:
???: ??? ; A) Position
margin: 0px auto; B) Width
} C) Float
</style>
</head>
<body>
<div id=”centerMe”>I should be centered on the page!</div>
8. Review: Styling
CSS Float: an element can be pushed to the left
or right, allowing other elements to wrap around it.
When an element is set to float, text and other
content will flow around the floated element.
The float property specifies whether or not an
element should float. It also specifies which direction it
should float (left, right). Example:
.alignLeft
{
float: left;
}
9. CSS Float
This is most
commonly used with
images, in order to
align them left or
right so text flows
around an image.
It is also useful when
working with layouts.
11. Print Stylesheets
If your webpage contains a variety of background colors it can
be difficult for visitors to print.
We can create a separate stylesheet just to allow visitors to
print by using a new attribute, MEDIA.
It works by adding a second link element to your head
section:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>New Web Project</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="print" href="print.css">
</head>
12. Print Stylesheets
What do we do in the print.css stylesheet?
We can remove ALL background colors with one
simple line in the body selector:
background: white;
Body {
background: white;
}
13. Print Stylesheets
We may also want to remove the menu bar,
which is currently in the footer.
We can do that by leveraging the display
property:
#footer
{
display: none;
}
Good resource for tips and tricks on what to add to your print.css stylesheet:
http://www.alistapart.com/articles/goingtoprint/
14. Liquid vs Fixed Layout
Fixed Layout:
In a Fixed Layout, the columns are set to a specific width: 500
pixels total (by total, I mean if you add up the widths of all the
columns), 750 pixels total, 900 pixels total, etc. If you resize the
browser on a fixed layout page, the columns will stay the same
size.
Liquid Layout:
In a Liquid Layout, instead of using pixels to set a specific width,
the columns change sizes as you adjust the browser size. One
way to do this is with percentages. The left column could be 20%
of the page, the middle column 50% and the right column 30%,
for example.
15. Further reading
Samples of just about every layout you can imagine:
http://layouts.ironmyers.com/
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Web Grids - Column-based Layouts:
http://webdesign.about.com/od/layout/ss/web_grids.htm
Fixed-width Layouts Versus Liquid Layouts:
http://webdesign.about.com/od/layout/i/aa060506.htm
16. Exercise: fixed layout to liquid
Let’s assume we have a three-column layout that uses Absolute
Positioning in CSS, which we reviewed last week.
File: http://livetotry.com/GDI/codeSamples/imitationIsFlattery.html
We’ll use this JSFiddle as our starting point:
http://jsfiddle.net/GzwVb/1/
Finished file: http://jsfiddle.net/GzwVb/5/
18. HTML5?
Formally, HTML5 is the W3C’s specification for
the next version of HTML.
Informally, people use “HTML5” to refer to a
whole set of new web standards:
• HTML5
• CSS3
• JavaScript
19. HTML5: Progress and Implementation
HTML5 is still in "working draft" stage
Some of the tech is making it into browsers now, but it'll
still be a while until the specification is
finalized.
It remains to be seen if all browsers will support
all features, and WHEN they will support them.
Here is a good page summarizing which features are
supported by which browser: http://caniuse.com
20. Detecting browser support
Modernizr: open-source JavaScript library that helps you understand what
your visitor’s browsers do and do not support.
With Modernizr, you can provide different CSS styling for browsers that do not
support new CSS3 features, or use JavaScript to fall back gracefully if the
visitor’s browser does not support the new video element.
Download Modernizr and then include it in your <head> section:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Beautiful Sample Page</title>
<script src="modernizr-1.7.min.js"></script>
</head>
21. Detecting browser support
Next, add the class “no-js” to the <html> element:
<html class="no-js">
When Modernizr runs, if your browser has JavaScript
enabled, it will replace that class with the class “js”.
<html class="js">
Modernizr will then add classes for every feature it
detects, prefixing them with “no-” if the browser
doesn’t support it.
22. Detecting browser support
If you are using Safari 5, which supports almost everything in
HTML5/CSS3 currently, your <html> element will look
something like this:
<html class="js canvas canvastext geolocation rgba hsla multiplebgs
borderimage borderradius boxshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms csstransforms3d csstransitions video
audio localstorage sessionstorage webworkers applicationcache fontface">
If you are using IE 8, which supports almost nothing in HTML5/
CSS3 currently, your <html> element will look something like
this:
<html class="js no-canvas no-canvastext no-geolocation no-rgba no-hsla
nomultiplebgs
no-borderimage ... you get the idea >
23. Modernizer CSS Example
If the browser supports CSS .csscolumns ol {
columns, the .csscolumns style is
applied. -moz-column-count: 2;
-webkit-columns: 2;
If the browser doesn’t support -o-columns: 2;
CSS columns, as determined by columns: 2;
the “nocsscolumns” class added
by Modernizr, the .no- }
csscolumns style is applied. .no-csscolumns ol {
float: left;
Instead of using CSS columns, margin: 0 0 20px;
we float our list items and apply
some margins and widths to get }
a similar result. .no-csscolumns ol li {
float: left;
width: 180px;
}
24. Modernizer
To learn more about how to use Modernizr, see:
http://www.alistapart.com/articles/taking-
advantage-of-html5-and-css3-with-modernizr/
http://www.modernizr.com/docs/
25. CSS3 Effects
CSS3 is the latest standard for CSS.
It is backwards compatible, so you do not have
to change existing designs.
Browsers will always support CSS2; many of the
CSS3 properties have been adopted by modern
browsers as well.
26. Old way:
font-family: Helvetica, Verdana, Arial, sans-serif;
Have fallback fonts in case your visitors did not have your favorite font installed.
Create an image with a specific font, to ensure it looks the way you want.
New Way:
With CSS3, instead of relying on fonts everyone has installed, or using a specific font in an
image, you can instruct the browser to download the font if the person viewing your site is
missing the font:
@font-face
{
font-family: "Bitstream Vera Serif Bold";
src:
url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body
{
font-family: "Bitstream Vera Serif Bold", serif
}
NOTE that this will only make the font available to the browser, not to the rest of the
computer.
27. Browser Prefixes
The CSS3 (and HTML5) specs are still in draft format.
Using the browser prefixes ensures that the functionality will
work, even if the w3c changes the standard.
Chrome/Safari: -webkit prefix
Firefox: -moz prefix
While the names and parameters of the new CSS properties are
not likely to change, there is no guarantee that they won’t.
In cases where the spec has been mostly finalized you can simply
use the property name. Ex: border-radius
28. Exercises: CSS3
Please use: JSFiddle:
Refer to Handout 1 for
Instruction:
Rounded Corners
Unevenly rounded corners
Drop shadows
Inset shadows
Text shadows
Color
RGBA
HSL
HSLA
Transforms
30. Color
Before, we had three ways to define colors on websites:
1. Color Name (color: blue);
2. Hexadecimal Value (color: #CCC);
3. rgb [color: rgb(255, 255, 255) or color:rgb(90%, 80%, 90%)]
CSS3 has introduced two new ways:
1. rgba
The a stands for alpha (the level of transparency).
2. hsl and hsla
HSL = Hue, Saturation and Lightness
rgba = Red, Green, Blue, Alpha
Example: background-color: rgba(255, 255, 255, 0.5);
31. Color: hsl and hsla
HSL = Hue, Saturation and Lightness
HSLA = Hue, Saturation, Lightness and Alpha
Syntax:
hsl( hue--in degrees from 0-359, saturation--
in % from 0-100%, lightness--in % from 0-100%)
hsla( hue--in degrees from 0-359,
saturation--in % from 0-100%, lightness--in
% from 0-100%, alpha--from 0.0-1.0)
32. Animations
CSS Transforms and Transitions
We can create animations by leveraging the new CSS
Transform and Transition properties.
Transforms allow us to manipulate our elements.
Transitions allow us to specify over what time duration
these changes should happen: effectively animating the
changes.
33. CSS Transforms
You can use CSS transforms to rotate or scale elements on
your page.
We used to need JavaScript in order to do this!
• Our options: rotate, scale, skew and translate.
starting file: http://jsfiddle.net/8etSs/1/
finished file: http://jsfiddle.net/fiddlefiddle/8etSs/18/
36. CSS Transforms: Scale
We can also scale only the vertical or the horizontal
by specifying two values
For example, this code will double the width, but
keep the height the same:
-webkit-transform: scale(2.0, 1.0);
-moz-transform: scale(2.0, 1.0);
This code will keep the width the same, but shrink
the height to 1/10th of its original size:
-webkit-transform: scale(1.0, 0.1);
-moz-transform: scale(1.0, 0.1);
37. CSS Transforms: Example
/* make a picture 1.25 times its
normal size*/
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
38. CSS Transforms: the origin
By default, all the transforms occur from the
center of the element.
If you’d like the origin of the element to be
somewhere other than the center, you can use
the transform-origin property.
Example:
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-op-transform-origin: 0 0;
transform-origin: 0 0;
39. CSS Transforms: another example
This JSFiddle example uses two divs to build a circle with a
shadow underneath.
The example uses a combination of CSS3 effects to create the
shadow:
A radial gradient and two transforms, a scale and a translateY.
It also uses two more basic, CSS2 properties to position the
shadow behind the circle along the z-axis: position and z-index
CSS Transforms: another example
Starting file: http://jsfiddle.net/fiddlefiddle/patYu/2/
Ending file: http://jsfiddle.net/fiddlefiddle/patYu/4/
40. CSS Transitions
Right now, all of these Transforms happen instantly.
Usually, we want Transforms to happen over time,
over at least one second, for example.
We can make that happen by combining our
Transforms with Transitions.
41. CSS Transitions: No Javascript
We can also leverage CSS pseudoclasses to use CSS
Transitions.
In the sample page:
http://alexisgo.com/resistor/css3effects/transform.html a
combination of Transitions and Transforms are used to both fade
in and scale up the paintings as you hover your mouse over them.
43. CSS Transitions
Making things animate!
With the combination of HTML, CSS and a little bit of JavaScript, we
can animate our HTML elements.
Here is a no-JavaScript example:
http://w3schools.com/css3/tryit.asp?filename=trycss3_transition1
Current support for CSS3 Transitions:
Chrome
Safari 3.1+ (mobile safari on iPhone if you have iOS 2.0+)
Firefox 4.0
IE 10.0
Opera 10.5x
44. CSS Transitions
More on CSS3 Transitions:
http://css3.bradshawenterprises.com/
http://samuli.hakoniemi.net/css3-transitions-are-wethere-yet/
Final version of transform and transitions JSFiddle:
http://jsfiddle.net/8etSs/
48. Building a menubar
We will practice using the following CSS and HTML concepts to
build a navigation bar:
HTML div element
Using CSS to style an HTML list element
Using tricks with CSS borders to make an arrow pointing to
our current page
Use CSS background-color, margin, and padding to make it
look nice
Leverage CSS pseudo-classes to give our links some
interactivity
Practice CSS nesting to target only the ul and lis inside a
given div
50. Building a fixed menubar
Finished product: http://alexisgo.com/
teaching/codesamples/fixedMenu.html
51. THANK YOU!
Congratulations on completing our Intro to HTML/CSS
course!
We want to know your feedback so we can make the class
better each time.
Watch your email for a link to an anonymous survey
about the class.
You can always reach us via the Meetup group, or via
email at erin@girldevelopit.com