Class 2 handout (1) adding a css stylesheet
0 likes596 views
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.
1 of 3
Downloaded 33 times
Ad
Recommended
Styling of css
Styling of cssJayjZens CSS (Cascading Style Sheets) is used to style and lay out HTML elements. CSS can control the presentation of multiple web pages at once. There are three ways to add CSS - inline using the style attribute, internally using the <style> element, and externally using a separate CSS file. The most common method is to define styles in an external CSS file and link it to HTML pages. Inline CSS is used to style a single element, internal CSS styles an individual page, and external CSS styles entire websites. CSS can style elements with properties for borders, padding, margins, and IDs or classes.
Dreamweaver Template
Dreamweaver TemplateEvan Hughes This document provides instructions for creating HTML page templates. It describes how to:
1. Download a template folder from Google Docs using provided credentials.
2. Create new pages by saving the main.html page as index.html and blog.html. Add links to these pages in the main.html navigation.
3. Save the main.html content as an editable region template that can then be applied to other pages to maintain a consistent layout. Instructions are provided for converting the template to a one-column or two-column layout.
Libguides at UCT Libraries 2014 adding content to boxes
Libguides at UCT Libraries 2014 adding content to boxesUCT This document provides instructions for adding content to boxes in Libguides. It describes how to add new boxes, select the box type, add text or embedded media, create links and lists, reorder and resize boxes and columns on the page. Key steps include clicking "Add New Box" to create a box, selecting the box type, adding content via the rich text editor, and embedding media or widgets by copying and pasting code.
Introduction of css
Introduction of cssDinesh Kumar CSS (Cascading Style Sheets) allows you to control the style and layout of HTML documents. There are three ways to apply CSS - inline styles within HTML tags, internal styles within <style> tags in the head section, or external styles in a separate .css file linked via <link> tags. CSS rules contain selectors that specify elements to style and declarations that define properties like color, font, size and layout. For example, the rule h1 {color: navy;} would make all <h1> text navy blue. External stylesheets are best for applying styles across many pages by changing one .css file.
Share google documents with others
Share google documents with othersPaul Enrique Casas This is an illustrated version of the 'how to share google documents' instruction set.
This set assumes that you have already created a google docs account and spreadsheet.
Hope it helps.
Using Google Docs with Blogger
Using Google Docs with BloggerLisa Huff This document provides instructions for uploading documents to Google Docs and publishing them online. It explains how to upload an existing file or create a new document in Google Docs. Users can then publish the document to the web by selecting "View as web page" in the Share tab and copying the URL. The final steps show how to create a blog post, highlight text to add a link to the published Google Doc, and paste the Docs URL into the post.
How to use evernote to work smarter shelyn lim
How to use evernote to work smarter shelyn limShelyn Lim The document discusses how to use Evernote to work smarter. It provides step-by-step instructions on how to sign up for an Evernote account, create and format notes, insert links, files and images, create notebooks and tags, set reminders and share notes. The formatting options covered include font style/size/color, bold/italic/underline, lists, tables, alignment and indentation. Meeting notes can also be created and connected to a Google calendar.
Html Layout Explained
Html Layout Explained21 Lessons The document discusses the basic HTML layout structure including the <head> and <body> tags. The <head> contains meta information like the title and links to CSS and JavaScript files. The <body> contains the visible webpage content such as headings, images, paragraphs, lists, and other elements. It also provides examples of code for a basic TODO list application to demonstrate the HTML layout.
Html intro for IML 295, week 11
Html intro for IML 295, week 11Evan Hughes This PowerPoint provides instructions for what we did in class. Make sure you can complete everything on this PowerPoint and bring it to class next week. We will use this to start from.
CSS
CSSAhmed Saihood CSS (Cascading Style Sheets) is a language that defines the style and layout of web pages. There are three ways to insert CSS into an HTML page: external style sheets, internal style sheets, and inline styles. External style sheets define the styles for an entire website in a .css file, internal style sheets use the <style> element within the <head> of a single page, and inline styles use the style attribute on individual elements. CSS selectors like element, id, and class selectors are used to target specific elements for styling.
HTML and CSS.pptx
HTML and CSS.pptxTripleRainbow 1. The document provides an introduction to HTML, CSS, and Git for setting up a development environment and submitting assignments. It includes explanations of common HTML tags, exercises to practice using HTML tags, and introductions to CSS box model properties and flexbox layout.
2. The second section focuses on CSS, explaining how to link CSS to HTML, add IDs and classes, and basic CSS syntax. It includes exercises to select elements using IDs and classes and use box model properties to layout elements.
3. The third section covers the CSS box model in more detail and introduces flexbox for layout. It includes exercises to use padding, borders, and flexbox properties to layout elements on a page. Additional flexbox resources are
Css types internal, external and inline (1)
Css types internal, external and inline (1)Webtech Learning The document discusses the three types of CSS - internal, external, and inline. Internal CSS is defined within the HTML document using <style> tags. External CSS is defined in a separate .css file and linked using <link> tags. Inline CSS is defined directly in HTML elements using the style attribute. IDs and classes are also discussed as ways to target elements with CSS selectors.
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptx
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptxfeles73967 This document discusses CSS (Cascading Style Sheets), including the need for CSS, CSS syntax and structure, and the different types of CSS. It notes that CSS is used to style and organize content on web pages and make websites responsive across devices. The three main types of CSS are inline, internal, and external. Inline CSS is used to style a single element, internal CSS is used to style elements within a single HTML page, and external CSS allows styling an entire website from one external .css file referenced by HTML pages.
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxchristiandean12115 ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 1 of 11
Lab Week 1
HTML & CSS Introduction
Overview
This week’s lab exercises:
Refresh your memory developing a webpage using HTML & CSS; •
Employ <div> tags to structure a webpage; •
Begin using HTML5 semantic structural tags; •
Begin Assignment 1 by starting on the Needs Analysis. •
NOTE: If you copy and paste code from any source, make sure the quotations marks paste correctly, sometimes you may
get the wrong shaped quotation marks such as angled ones “ instead of straight ones "and the browser cannot read
them. Also note, most of this code is images and cannot be copied and pasted!
Exercise 1: Refresher
Remember in “ITECH1004/5004: Introduction to Multimedia”, you had
to create a basic website for your final assignment? Well, let’s recreate
a webpage similar to the sample provided of the homepage (shown to
the right).
ITECH1004 students were allowed to develop their website using
HTML tables, so this is where this exercise will start. In this exercise,
you will hand-code everything directly via the markup code using a text
editor, rather than use a visual editor like Adobe Dreamweaver. This
way you can be sure the code is exactly what you want, and you will
are more likely to learn the code by typing it.
Open NotePad++ and start a New file •
Start with the basic HTML tags to format a page (as shown below), •
and then open the save as file menu. Click the drop-down menu and select an .html file type. Name your file
wk1ex1.html
Sample Home Page
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 2 of 11
After saving as an html file type, you will notice notepad++ has colour coded the text for you to distinguish tags from •
content (and also attributes and values as you will see soon). Now to add some content.
Place a heading in the body: •
<h1>Home page</h1>
After the heading you need to create a table <table>. The sample had one table row <tr> and two columns of •
table data <td>.
For now just enter it as below, keeping the indentations as it makes it easier to see where tags open and close. •
Save your HTML file. •
Now for a small trick that will make it easy to track your progress when building webpages. •
Open your wk1ex1.html in Google Chrome. •
o This browser is going to be your go-to browser this semester to view your HTML files.
o Why this browser? It has the best support for the latest HTML5 and CSS3 features. In comparison,
Microsoft Internet Explorer is so far behind, even Microsoft have abandoned it in Windows 10.
Now the simple trick: •
o Place your NotePad++ window on the left of your screen using the hotkey combination “WIN key + Left
Arrow key”.
o Place Google Chrome on the right half of the screen using “WIN key + Right Arrow key”.
o Now.
Dreamweaver template
Dreamweaver templateEvan Hughes The document provides instructions for creating a second template in Evans Design and applying it to an existing page. It involves deleting a div from the main template HTML, widening another div to span the full page width, saving as a new template, then detaching and replacing the template on an existing page to modify its layout.
Introduction to css
Introduction to cssJoseph Gabriel This document provides an introduction to CSS (Cascading Style Sheets) including:
- CSS allows separation of document content from design and formatting through stylesheets.
- Stylesheets define how HTML elements are displayed and can be internal, external, or inline.
- Multiple stylesheets and style definitions will cascade together based on specificity.
- The CSS syntax uses selectors to target elements and properties to define styles like colors, fonts, spacing.
- Comments, classes, IDs, and other selectors provide control over styling different elements.
HTML & CSS Masterclass
HTML & CSS MasterclassBernardo Raposo 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.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
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.
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello worldhemi46h This document contains instructions and information about creating basic HTML pages and adding CSS styling. It includes assignments to create folders and HTML files with headings, paragraphs and images. It also provides information on HTML elements, CSS selectors, internal and external style sheets, and validating code. Links to online resources for learning HTML, CSS and web development are included.
Css introduction
Css introductionvishnu murthy 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.
Bootstrap notes on developing basic website by Likith.pdf
Bootstrap notes on developing basic website by Likith.pdfLikithHanumaiah Bootstrap notes on developing basic website by Likith
here i cover the topics on how you can create a basic website using a tool called bootstrap. in this unit you can even identify the best way to understand the layout of the bootstrap and how you can build your website.
Create content template
Create content templatevokeron To create a content template:
1. Choose a design and click the plus icon in the content area to create a template. Alternatively, paste HTML and CSS code.
2. The template can then be edited using different views and a wizard. Sections can be added as in main templates.
3. Clients will see available templates when creating new pages and can select one to populate the editor. Changes to templates only affect new pages.
4. Areas editable by clients can be controlled by removing editability in the template editing view.
Magento 2 theming - knowledge sharing session by suman kc
Magento 2 theming - knowledge sharing session by suman kcSuman KC Theming in magento 2.
Knowledge sharing session on Magento 2 theming by Suman KC at Ebpearls Pty Ltd. Presentation includes theming in magento2.
Wiki to HTML Conversion
Wiki to HTML ConversionDave Derrick This document provides instructions for converting a Wiki page to HTML using Microsoft Expressions. The steps include:
1. Opening the Wiki page and Expressions and copying the Wiki content into a new HTML page.
2. Reformatting the HTML page by adding CSS styles and footer code.
3. Demoting header levels, creating bookmarks for headers and the title, and linking the table of contents.
4. Inserting "return to top" links below section headers.
Tutorial1
Tutorial1hstryk This document provides steps to create an HTML page with an external stylesheet using Komodo Edit. It instructs the user to create index.html and styles.css files, link the stylesheet to the HTML, and add basic styling like setting font family and adding a background image. Key elements are divided into divs to structure the page. The tutorial then provides the code to add more styling to elements and build out the example website design.
Week 2.pptx
Week 2.pptxWillSephton This document introduces CSS and how it is used to style websites. It explains that CSS is linked to HTML pages using link tags, and that CSS rules can target elements by id, class, or tag name. Styles are defined using a syntax of selector and declaration block. The document concludes by instructing the reader to add some styles to their website using CSS.
Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6Krista Lawrence This document provides instructions on using CSS and tables to position content in web pages using Adobe Dreamweaver. It covers understanding CSS layouts, creating pages with CSS layouts, adding and editing content in CSS layout blocks, understanding table modes, inserting and formatting tables, and other tips for using visual aids and browser compatibility checks when working with CSS and tables. The overall goal is to teach how to create and style web pages that incorporate both CSS layouts and HTML tables.
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleErin M. Kidwell 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 design
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.
More Related Content
Similar to Class 2 handout (1) adding a css stylesheet (20)
Html intro for IML 295, week 11
Html intro for IML 295, week 11Evan Hughes This PowerPoint provides instructions for what we did in class. Make sure you can complete everything on this PowerPoint and bring it to class next week. We will use this to start from.
CSS
CSSAhmed Saihood CSS (Cascading Style Sheets) is a language that defines the style and layout of web pages. There are three ways to insert CSS into an HTML page: external style sheets, internal style sheets, and inline styles. External style sheets define the styles for an entire website in a .css file, internal style sheets use the <style> element within the <head> of a single page, and inline styles use the style attribute on individual elements. CSS selectors like element, id, and class selectors are used to target specific elements for styling.
HTML and CSS.pptx
HTML and CSS.pptxTripleRainbow 1. The document provides an introduction to HTML, CSS, and Git for setting up a development environment and submitting assignments. It includes explanations of common HTML tags, exercises to practice using HTML tags, and introductions to CSS box model properties and flexbox layout.
2. The second section focuses on CSS, explaining how to link CSS to HTML, add IDs and classes, and basic CSS syntax. It includes exercises to select elements using IDs and classes and use box model properties to layout elements.
3. The third section covers the CSS box model in more detail and introduces flexbox for layout. It includes exercises to use padding, borders, and flexbox properties to layout elements on a page. Additional flexbox resources are
Css types internal, external and inline (1)
Css types internal, external and inline (1)Webtech Learning The document discusses the three types of CSS - internal, external, and inline. Internal CSS is defined within the HTML document using <style> tags. External CSS is defined in a separate .css file and linked using <link> tags. Inline CSS is defined directly in HTML elements using the style attribute. IDs and classes are also discussed as ways to target elements with CSS selectors.
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptx
INFOGRAPHIC_PRESENTATION_OF_CSS_AND_TYPES .pptxfeles73967 This document discusses CSS (Cascading Style Sheets), including the need for CSS, CSS syntax and structure, and the different types of CSS. It notes that CSS is used to style and organize content on web pages and make websites responsive across devices. The three main types of CSS are inline, internal, and external. Inline CSS is used to style a single element, internal CSS is used to style elements within a single HTML page, and external CSS allows styling an entire website from one external .css file referenced by HTML pages.
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docx
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxchristiandean12115 ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 1 of 11
Lab Week 1
HTML & CSS Introduction
Overview
This week’s lab exercises:
Refresh your memory developing a webpage using HTML & CSS; •
Employ <div> tags to structure a webpage; •
Begin using HTML5 semantic structural tags; •
Begin Assignment 1 by starting on the Needs Analysis. •
NOTE: If you copy and paste code from any source, make sure the quotations marks paste correctly, sometimes you may
get the wrong shaped quotation marks such as angled ones “ instead of straight ones "and the browser cannot read
them. Also note, most of this code is images and cannot be copied and pasted!
Exercise 1: Refresher
Remember in “ITECH1004/5004: Introduction to Multimedia”, you had
to create a basic website for your final assignment? Well, let’s recreate
a webpage similar to the sample provided of the homepage (shown to
the right).
ITECH1004 students were allowed to develop their website using
HTML tables, so this is where this exercise will start. In this exercise,
you will hand-code everything directly via the markup code using a text
editor, rather than use a visual editor like Adobe Dreamweaver. This
way you can be sure the code is exactly what you want, and you will
are more likely to learn the code by typing it.
Open NotePad++ and start a New file •
Start with the basic HTML tags to format a page (as shown below), •
and then open the save as file menu. Click the drop-down menu and select an .html file type. Name your file
wk1ex1.html
Sample Home Page
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 2 of 11
After saving as an html file type, you will notice notepad++ has colour coded the text for you to distinguish tags from •
content (and also attributes and values as you will see soon). Now to add some content.
Place a heading in the body: •
<h1>Home page</h1>
After the heading you need to create a table <table>. The sample had one table row <tr> and two columns of •
table data <td>.
For now just enter it as below, keeping the indentations as it makes it easier to see where tags open and close. •
Save your HTML file. •
Now for a small trick that will make it easy to track your progress when building webpages. •
Open your wk1ex1.html in Google Chrome. •
o This browser is going to be your go-to browser this semester to view your HTML files.
o Why this browser? It has the best support for the latest HTML5 and CSS3 features. In comparison,
Microsoft Internet Explorer is so far behind, even Microsoft have abandoned it in Windows 10.
Now the simple trick: •
o Place your NotePad++ window on the left of your screen using the hotkey combination “WIN key + Left
Arrow key”.
o Place Google Chrome on the right half of the screen using “WIN key + Right Arrow key”.
o Now.
Dreamweaver template
Dreamweaver templateEvan Hughes The document provides instructions for creating a second template in Evans Design and applying it to an existing page. It involves deleting a div from the main template HTML, widening another div to span the full page width, saving as a new template, then detaching and replacing the template on an existing page to modify its layout.
Introduction to css
Introduction to cssJoseph Gabriel This document provides an introduction to CSS (Cascading Style Sheets) including:
- CSS allows separation of document content from design and formatting through stylesheets.
- Stylesheets define how HTML elements are displayed and can be internal, external, or inline.
- Multiple stylesheets and style definitions will cascade together based on specificity.
- The CSS syntax uses selectors to target elements and properties to define styles like colors, fonts, spacing.
- Comments, classes, IDs, and other selectors provide control over styling different elements.
HTML & CSS Masterclass
HTML & CSS MasterclassBernardo Raposo 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.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
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.
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello worldhemi46h This document contains instructions and information about creating basic HTML pages and adding CSS styling. It includes assignments to create folders and HTML files with headings, paragraphs and images. It also provides information on HTML elements, CSS selectors, internal and external style sheets, and validating code. Links to online resources for learning HTML, CSS and web development are included.
Css introduction
Css introductionvishnu murthy 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.
Bootstrap notes on developing basic website by Likith.pdf
Bootstrap notes on developing basic website by Likith.pdfLikithHanumaiah Bootstrap notes on developing basic website by Likith
here i cover the topics on how you can create a basic website using a tool called bootstrap. in this unit you can even identify the best way to understand the layout of the bootstrap and how you can build your website.
Create content template
Create content templatevokeron To create a content template:
1. Choose a design and click the plus icon in the content area to create a template. Alternatively, paste HTML and CSS code.
2. The template can then be edited using different views and a wizard. Sections can be added as in main templates.
3. Clients will see available templates when creating new pages and can select one to populate the editor. Changes to templates only affect new pages.
4. Areas editable by clients can be controlled by removing editability in the template editing view.
Magento 2 theming - knowledge sharing session by suman kc
Magento 2 theming - knowledge sharing session by suman kcSuman KC Theming in magento 2.
Knowledge sharing session on Magento 2 theming by Suman KC at Ebpearls Pty Ltd. Presentation includes theming in magento2.
Wiki to HTML Conversion
Wiki to HTML ConversionDave Derrick This document provides instructions for converting a Wiki page to HTML using Microsoft Expressions. The steps include:
1. Opening the Wiki page and Expressions and copying the Wiki content into a new HTML page.
2. Reformatting the HTML page by adding CSS styles and footer code.
3. Demoting header levels, creating bookmarks for headers and the title, and linking the table of contents.
4. Inserting "return to top" links below section headers.
Tutorial1
Tutorial1hstryk This document provides steps to create an HTML page with an external stylesheet using Komodo Edit. It instructs the user to create index.html and styles.css files, link the stylesheet to the HTML, and add basic styling like setting font family and adding a background image. Key elements are divided into divs to structure the page. The tutorial then provides the code to add more styling to elements and build out the example website design.
Week 2.pptx
Week 2.pptxWillSephton This document introduces CSS and how it is used to style websites. It explains that CSS is linked to HTML pages using link tags, and that CSS rules can target elements by id, class, or tag name. Styles are defined using a syntax of selector and declaration block. The document concludes by instructing the reader to add some styles to their website using CSS.
Unit g adobe dreamweaver cs6
Unit g adobe dreamweaver cs6Krista Lawrence This document provides instructions on using CSS and tables to position content in web pages using Adobe Dreamweaver. It covers understanding CSS layouts, creating pages with CSS layouts, adding and editing content in CSS layout blocks, understanding table modes, inserting and formatting tables, and other tips for using visual aids and browser compatibility checks when working with CSS and tables. The overall goal is to teach how to create and style web pages that incorporate both CSS layouts and HTML tables.
More from Erin M. Kidwell (9)
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleErin M. Kidwell 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 design
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)
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 (...
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.
Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Erin M. Kidwell 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.
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesErin M. Kidwell 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 stylesheet
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 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell 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.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
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>
Ad
Recently uploaded (20)
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfällepanagenda Webinar Recording: https://www.panagenda.com/webinars/domino-iq-was-sie-erwartet-erste-schritte-und-anwendungsfalle/
HCL Domino iQ Server – Vom Ideenportal zur implementierten Funktion. Entdecken Sie, was es ist, was es nicht ist, und erkunden Sie die Chancen und Herausforderungen, die es bietet.
Wichtige Erkenntnisse
- Was sind Large Language Models (LLMs) und wie stehen sie im Zusammenhang mit Domino iQ
- Wesentliche Voraussetzungen für die Bereitstellung des Domino iQ Servers
- Schritt-für-Schritt-Anleitung zur Einrichtung Ihres Domino iQ Servers
- Teilen und diskutieren Sie Gedanken und Ideen, um das Potenzial von Domino iQ zu maximieren
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdfOnBoard OnBoard recently partnered with Microsoft Tech for Social Impact on the AI in the Nonprofit Boardroom Survey, an initiative designed to uncover the current and future role of artificial intelligence in nonprofit governance.
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/state-space-models-vs-transformers-for-ultra-low-power-edge-ai-a-presentation-from-brainchip/
Tony Lewis, Chief Technology Officer at BrainChip, presents the “State-space Models vs. Transformers for Ultra-low-power Edge AI” tutorial at the May 2025 Embedded Vision Summit.
At the embedded edge, choices of language model architectures have profound implications on the ability to meet demanding performance, latency and energy efficiency requirements. In this presentation, Lewis contrasts state-space models (SSMs) with transformers for use in this constrained regime. While transformers rely on a read-write key-value cache, SSMs can be constructed as read-only architectures, enabling the use of novel memory types and reducing power consumption. Furthermore, SSMs require significantly fewer multiply-accumulate units—drastically reducing compute energy and chip area.
New techniques enable distillation-based migration from transformer models such as Llama to SSMs without major performance loss. In latency-sensitive applications, techniques such as precomputing input sequences allow SSMs to achieve sub-100 ms time-to-first-token, enabling real-time interactivity. Lewis presents a detailed side-by-side comparison of these architectures, outlining their trade-offs and opportunities at the extreme edge.
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfAlkin Tezuysal As the demand for vector databases and Generative AI continues to rise, integrating vector storage and search capabilities into traditional databases has become increasingly important. This session introduces the *MyVector Plugin*, a project that brings native vector storage and similarity search to MySQL. Unlike PostgreSQL, which offers interfaces for adding new data types and index methods, MySQL lacks such extensibility. However, by utilizing MySQL's server component plugin and UDF, the *MyVector Plugin* successfully adds a fully functional vector search feature within the existing MySQL + InnoDB infrastructure, eliminating the need for a separate vector database. The session explains the technical aspects of integrating vector support into MySQL, the challenges posed by its architecture, and real-world use cases that showcase the advantages of combining vector search with MySQL's robust features. Attendees will leave with practical insights on how to add vector search capabilities to their MySQL systems.
Cisco ISE Performance, Scalability and Best Practices.pdf
Cisco ISE Performance, Scalability and Best Practices.pdfsuperdpz Cisco ISE Performance, Scalability and Best Practices
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME FlowSafe Software This presentation will showcase an adapter for FME Flow that provides REST endpoints for FME Workspaces following the OGC API Processes specification. The implementation delivers robust, user-friendly API endpoints, including standardized methods for parameter provision. Additionally, it enhances security and user management by supporting OAuth2 authentication. Join us to discover how these advancements can elevate your enterprise integration workflows and ensure seamless, secure interactions with FME Flow.
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMESafe Software Jacobs has successfully utilized FME to tackle the complexities of integrating diverse data sources in a confidential $1 billion campus improvement project. The project aimed to create a comprehensive digital twin by merging Building Information Modeling (BIM) data, Construction Operations Building Information Exchange (COBie) data, and various other data sources into a unified Geographic Information System (GIS) platform. The challenge lay in the disparate nature of these data sources, which were siloed and incompatible with each other, hindering efficient data management and decision-making processes.
To address this, Jacobs leveraged FME to automate the extraction, transformation, and loading (ETL) of data between ArcGIS Indoors and IBM Maximo. This process ensured accurate transfer of maintainable asset and work order data, creating a comprehensive 2D and 3D representation of the campus for Facility Management. FME's server capabilities enabled real-time updates and synchronization between ArcGIS Indoors and Maximo, facilitating automatic updates of asset information and work orders. Additionally, Survey123 forms allowed field personnel to capture and submit data directly from their mobile devices, triggering FME workflows via webhooks for real-time data updates. This seamless integration has significantly enhanced data management, improved decision-making processes, and ensured data consistency across the project lifecycle.
June Patch Tuesday
June Patch TuesdayIvanti Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Anish Kumar Presented by: Anish Kumar
LinkedIn: https://www.linkedin.com/in/anishkumar/
This lightning talk dives into real-world GenAI projects that scaled from prototype to production using Databricks’ fully managed tools. Facing cost and time constraints, we leveraged four key Databricks features—Workflows, Model Serving, Serverless Compute, and Notebooks—to build an AI inference pipeline processing millions of documents (text and audiobooks).
This approach enables rapid experimentation, easy tuning of GenAI prompts and compute settings, seamless data iteration and efficient quality testing—allowing Data Scientists and Engineers to collaborate effectively. Learn how to design modular, parameterized notebooks that run concurrently, manage dependencies and accelerate AI-driven insights.
Whether you're optimizing AI inference, automating complex data workflows or architecting next-gen serverless AI systems, this session delivers actionable strategies to maximize performance while keeping costs low.
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Impelsys Inc. Web accessibility is a fundamental principle that strives to make the internet inclusive for all. According to the World Health Organization, over a billion people worldwide live with some form of disability. These individuals face significant challenges when navigating the digital landscape, making the quest for accessible web content more critical than ever.
Enter Artificial Intelligence (AI), a technological marvel with the potential to reshape the way we approach web accessibility. AI offers innovative solutions that can automate processes, enhance user experiences, and ultimately revolutionize web accessibility. In this blog post, we’ll explore how AI is making waves in the world of web accessibility.
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdfStephen Perrenod This OrionX's 14th semi-annual report on the state of the cryptocurrency mining market. The report focuses on Proof-of-Work cryptocurrencies since those use substantial supercomputer power to mint new coins and encode transactions on their blockchains. Only two make the cut this time, Bitcoin with $18 billion of annual economic value produced and Dogecoin with $1 billion. Bitcoin has now reached the Zettascale with typical hash rates of 0.9 Zettahashes per second. Bitcoin is powered by the world's largest decentralized supercomputer in a continuous winner take all lottery incentive network.
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramVICTOR MAESTRE RAMIREZ Oracle Cloud and AI Specialization Program
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectoryVICTOR MAESTRE RAMIREZ Secure Access with Azure Active Directory
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...NTT DATA Technology & Innovation Can We Use Rust to Develop Extensions for PostgreSQL?
(POSETTE: An Event for Postgres 2025)
June 11, 2025
Shinya Kato
NTT DATA Japan Corporation
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfRejig Digital Unlock the future of oil & gas safety with advanced environmental detection technologies that transform hazard monitoring and risk management. This presentation explores cutting-edge innovations that enhance workplace safety, protect critical assets, and ensure regulatory compliance in high-risk environments.
🔍 What You’ll Learn:
✅ How advanced sensors detect environmental threats in real-time for proactive hazard prevention
🔧 Integration of IoT and AI to enable rapid response and minimize incident impact
📡 Enhancing workforce protection through continuous monitoring and data-driven safety protocols
💡 Case studies highlighting successful deployment of environmental detection systems in oil & gas operations
Ideal for safety managers, operations leaders, and technology innovators in the oil & gas industry, this presentation offers practical insights and strategies to revolutionize safety standards and boost operational resilience.
👉 Learn more: https://www.rejigdigital.com/blog/continuous-monitoring-prevent-blowouts-well-control-issues/
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Safe Software Jacobs has developed a 3D utility solids modelling workflow to improve the integration of utility data into 3D Building Information Modeling (BIM) environments. This workflow, a collaborative effort between the New Zealand Geospatial Team and the Australian Data Capture Team, employs FME to convert 2D utility data into detailed 3D representations, supporting enhanced spatial analysis and clash detection.
To enable the automation of this process, Jacobs has also developed a survey data standard that standardizes the capture of existing utilities. This standard ensures consistency in data collection, forming the foundation for the subsequent automated validation and modelling steps. The workflow begins with the acquisition of utility survey data, including attributes such as location, depth, diameter, and material of utility assets like pipes and manholes. This data is validated through a custom-built tool that ensures completeness and logical consistency, including checks for proper connectivity between network components. Following validation, the data is processed using an automated modelling tool to generate 3D solids from 2D geometric representations. These solids are then integrated into BIM models to facilitate compatibility with 3D workflows and enable detailed spatial analyses.
The workflow contributes to improved spatial understanding by visualizing the relationships between utilities and other infrastructure elements. The automation of validation and modeling processes ensures consistent and accurate outputs, minimizing errors and increasing workflow efficiency.
This methodology highlights the application of FME in addressing challenges associated with geospatial data transformation and demonstrates its utility in enhancing data integration within BIM frameworks. By enabling accurate 3D representation of utility networks, the workflow supports improved design collaboration and decision-making in complex infrastructure projects
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalVICTOR MAESTRE RAMIREZ Oracle Cloud Infrastructure Generative AI Professional
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry ReportLiveplex Web3 is poised for mainstream integration by 2030, with decentralized applications potentially reaching billions of users through improved scalability, user-friendly wallets, and regulatory clarity. Many forecasts project trillions of dollars in tokenized assets by 2030 , integration of AI, IoT, and Web3 (e.g. autonomous agents and decentralized physical infrastructure), and the possible emergence of global interoperability standards. Key challenges going forward include ensuring security at scale, preserving decentralization principles under regulatory oversight, and demonstrating tangible consumer value to sustain adoption beyond speculative cycles.
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...Edge AI and Vision Alliance
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...NTT DATA Technology & Innovation
Ad
Class 2 handout (1) adding a css stylesheet
- 1. Intro to HTML/CSS Class 2 Handout: Adding a CSS Page ● Now that we have our HTML page, we need to add a CSS page. ○ Click File->New from Template->CSS->Blank File ● Click File->Save As and save the file in a Project 1
- 2. ● Choose the project that you just created, and save the file as “style.css” and click Ok. ● You should now have two files open in Aptana: index.html and style.css. ● In the <head> of index.html, add a link element ○ <link rel="stylesheet" href="style.css"> 2
- 3. ● We are going to add a body element selector to our style.css page, and change the background color. ● Now we can make sure that both index.html and style.css are saved, and we can click the “Preview” icon to make sure our CSS and HTML page are linked correctly. 3