More HTML and CSS Basic Layout with Styles

Slides:



Advertisements
Similar presentations
Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Cascading Style Sheets
Today CSS HTML A project.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
4.01 Cascading Style Sheets
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
JMD2144 – Lesson 5 Web Design & New Media. ‘Div’ide and conquer One of the most versatile structure tags available is the.. tag Short for ision, it allows.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
The Characteristics of CSS
INFSCI  Last time we built a doggie web page in class following the instructions in the slide deck: Build Web Page with HTML – see week 3 The topics.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
Essentials of HTML Class 4 Instructor: Jeanne Hart
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
HTML Tables The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
CSS FOUNDATIONS IN-DEPTH The nitty-gritty of css...
- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Mimi Opkins.  One of the major benefits of using CSS is that you’re not forced to lay your sites out in tables.  The layout possibilities of CSS give.
Cascading Style Sheets for layout
Cascading Style Sheets (CSS) Internal Style Sheets Classes
Working with Cascading Style Sheets
4.01 Cascading Style Sheets
CSS Layouts: Grouping Elements
IS 360 Declaring CSS Styles
Web Developer & Design Foundations with XHTML
Breaking the mold with CSS
Advanced CSS BIS1523 – Lecture 20.
Cascading Style Sheets contd: Embedded Styles
HTML cont’d Keywords and Tables
Cascading Style Sheets for layout
Cascading Style Sheets (Layout)
Programming the Web using XHTML and JavaScript
Creating a Baseline Grid
Cascading Style Sheets
CSS Applications to XML 19-Sep-18.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Styles and the Box Model
Second CSS Lecture Applications to XML
MORE Cascading Style Sheets (The Positioning Model)
Web Programming Language
Web Development & Design Foundations with H T M L 5
More CSS 22-Feb-19.
Training & Development
Floating and Positioning
Web Programming Language
Web Design & Development
4.01 Cascading Style Sheets
CSS Applications to XML 20-May-19.
CSS Applications to XML 3-Jul-19.
Presentation transcript:

More HTML and CSS Basic Layout with Styles HTML & CSS Part 2 More HTML and CSS Basic Layout with Styles

Stylesheets Where can we put CSS? Inline (embedded within the text we want to format) Internal (in the head of the document, with a single list of rules) External (in a separate file from the HTML document)

What does an external style sheet look like? It is a plain text document that contains no information except properly formed style rules. It does not contain any HTML tags. The image here is from my RIT page. Not done perfectly, I know, but it’s a complete CSS file, good as an example to say, “This is literally all there is to the CSS file. There are no special headers or anything.” -Sean

External CSS: How to Do It <link rel=“stylesheet” type=“text/css” href=“stylesheet.css” />

Why Use External CSS? For a site consisting of more than one page, defining your presentation in only one place saves you a lot of time! All the pages in the site look the same. If you need to change something, you only need to do it once!

Three Ways to Lay Out Your HTML Pages A “Flow-like” or static layout, where HTML elements are placed on the page based on their order in your HTML document An HTML table-based layout using the <table>, <tr> and <td> tags. (Don’t do this!) A CSS-based layout

CSS Layout What are some of the advantages of using CSS based layouts? Smaller file size Adhering to standards means “forward compatibility” with future devices CSS supports fluid layouts Easier to update an entire site What is the major disadvantage? Disad: extra work, additional files, different browsers implement it differently.

Page Layout Using CSS A semi-new tag and two new properties: <div> tag Margins CSS float property CSS clear property

The <div> Tag <div> means “division” Is a block-level tag. Useful for dividing up major sections of your page logically. Examples: <div id=“main”>…</div> <div id=“subsection”>…</div>

Remember “id” and “class”? Used to identify a unique element on a page. A single html page can only have one element with id=“footer” In a whole web site, each unique page could have its own id=“footer” Starts with a “#” class Identifies elements that are reused and share common traits. Classes can be reused as many times as you want start with “.” Mention both CLASS and ID here.

The Box Model CSS treats your web page as if every element (<p>, <div>, <span> …) is enclosed in an invisible box. CSS allows you to change a large number of the properties of this box, such as its border, color, position, flow, etc. to achieve the look and feel you are striving for. Introduced last time. This is refresher stuff.

Properties of the “Box” we can set background-color background-image border Width height margin padding position and related properties top: right: bottom: left: Image from Ron Vullo’s Molly slides (http://molly.rit.edu/modules/aux/slides/showslides.maml?t_HeaderText=Introduction%20to%20Multimedia&t_LectureID=72#)

Margin vs. Padding Margin adds space “outside of the box” Padding adds space “inside of the box”

Positions with Margins Can specify the space around a box on any side margin-top moves the element down Ex.: margin-top:40px; margin-left moves the element right Ex.: margin-left:100px; Centering a box margin:auto; Centers the styled box within its containing element (but only if it has a set width) Some Web designers do all their positioning and layout using margins. Is it the best choice? Maybe, maybe not…

Making Elements Float The float attribute makes an element like an island; other content flows around it, and the selected element “floats” wherever you tell it to stay. Primarily used to make text flow around an image. For example: img{ float:left; margin-right:5px; } Will cause the image to slide over to the left and any text to flow around it Today, we will also use float to create a two-column layout of an HTML page.

The float and clear Properties float:left will push the element to the left side of its containing element. Elements that follow a floated element will try to sit on the same line if there is room. The clear property tells an element to stop sitting next to a floated element and instead move to the next line. Any side you flag as “clear” will not be allowed to have any floating elements. Possible values include left, right, and both. Emphasis that float works within a containing element. Important!

More Formatting… Let’s talk a bit about some more specific ways of formatting text, and making it look a bit more presentable.

CSS and the <a> Tag Ever wonder how websites change the color of links? That default blue underlined text is really boring (and I don’t ever want to see you use it on your websites)! Using CSS, we can format anchors just like everything else.

How to Format <a> a This is all instances of any <a> tag in the page. a: link This is the normal, untouched <a> tag (the default appearance is blue and underlined). a: visited This is the anchor if it has ever been clicked (the default appearance is purple and underlined). a: active This is the anchor when the mouse button is down while over the anchor text (the default appearance is red and underlined). a: hover This is the coolest one: how the anchor looks when the mouse hovers, or rolls over, it. There is no preset appearance for this, and you can use it to great effect. Later, we’ll discuss how to do image rollovers with CSS! On project and whatnot, I INSIST they change these. There is no reason not to; it’s really easy, and the default colors NEVER match their chosen color scheme or design. Also mention not to change the size of text in any way between states, as this causes all text after the link to shift.

Side Note: The * Selector The wildcard selector (*) selects every element on the page. How is this different than using body as a selector? When and why would we want to select all of the page elements? Body and * are not the same thing; * cuts around inheritance, body “respects” inheritance. Some people use it to “clear” margins and padding, to zero it out and set it manually to be more consistent.

Media-Specific Stylesheets So far, our CSS affects what we see on-screen. We can also write CSS for other media types. For example: <link rel=“stylesheet” type=“text/css” media=“print” href=“printstyle.css” /> With a separate print stylesheet, we can format a page for print rather than screen. Why? Because print and screen are two very different media types! Remember to use points (pt) instead of pixels (px) for print measurements. Otherwise, it’s the same as always! We cover this specifically later on, so don’t spend too much time here. This print CSS tutorial seems pretty nice… http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/

Some Other Cool Stuff… <img src=“mugshot.jpg” alt=“My smiling face” height=“200” width=“300” title=“Look at me! I’z on teh interwebz!” /> Used primarily on images, this brings up rollover “tool tips” for images. A good implementation of this is: http://drmcninja.com/ Not really CSS, but it’s a cool way to add a little more interactivity and “informative-ness” to your page. Yes, informative-ness is intentional. ^_^ -Sean

Some Other Cool Stuff… You might have noticed that HTML doesn’t let you type certain characters, like quotes, ©, &, and others. This is because of how HTML is parsed, and how certain characters are reserved for HTML code itself. Instead, you can use these: Quotes = " © = © & = & Extra space (non-breaking space) =   There are plenty of other “special characters” you can put in with HTML code too. Check your books and online resources!

Some Other Cool Stuff… Anchors We already know the <a> tag is an anchor for a link. We can also create anchors within a document. <a id=“pagetop” /> Then we can jump to that point with a link: <a href=“#pagetop”>Back to top</a> This works to link to any ID, actually! <a href=“#”> can also be used to go to nowhere, as a “null link” (useful as a placeholder when building a page) NOTE: with href=“#pagetop” it will look for an id of pagetop regardless of what tag it is in.

Targets… <a href=“#” target=“_blank” /> Opens the link in a new window/tab This is actually a holdover from frames

Some Other Cool Stuff… The <pre> tag Normally, HTML ignores whitespace. Anything inside a <pre> tag doesn’t! While limited in its ability, this gives HTML a little control over how things look, but it only works well with mono- space fonts like Courier. Try it! But don’t rely on it too much… Note, it is handy in development when working with languages such as PHP. Using <pre> maintains the formatting and tabs when dumping data arrays for debugging.

In-Class Exercise Making your page pretty!