Very quick intro HTML and CSS. Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> A Web Title.

Slides:

Advertisements

Similar presentations

Ripasso. 2 Proprietà del testo body { font-family: Verdana, Geneva, Arial, sans-serif; } Ciao sans-serifserif.

Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.

Advance CSS (Menu and Layout). CSS Navigation MENU.

CSS Styling CSS Box Model & CS110: Computer Science and the Internet.

Cascading Style Sheets

Cascading Style Sheets

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

CSS Digital Media: Communication and design 2007.

Today CSS HTML A project.

CSS Евгения Ковачева. BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; BACKGROUND: #ffffff; PADDING-BOTTOM:

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

Session 4: CSS Positioning Fall 2006 LIS Web Team.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

Building a Website: Cascading Style Sheets (CSS) Fall 2013.

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.

1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

CSS(Cascading Style Sheets )

1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Diliev.com & pLOVEdiv.com  DIliev.com.

Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.

กระบวนวิชา 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.

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

ADVANCED CSS William Neely CEO, Piecewise.com. CSS FONTS AND TEXT CSS ‣ Line-height allows to indicate the amount of space between lines; allows for equal.

Unit 20 - Client Side Customisation of Web Pages

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

More CSS CS HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.

End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science

Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.

5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations SlideSet #5: Advanced CSS.

Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.

WebD Introduction to CSS By Manik Rastogi.

Semester - Review.

Unit 3 - Review.

Creating Your Own Webpage

Webpage layout using CSS

CSS Box Model <span> & <div>

Creating Page Layouts with CSS

Cascading Style Sheets

Web Authoring Task 1– Create Style Sheet H1 H2 P LI OL UL Table Body

Chapter 7 Page Layout Basics Key Concepts

Cascading Style Sheets

Web Authoring Task 1– Create Style Sheet List – LI { Table Body

Chapter 6 More CSS Basics Key Concepts

Style Sheet Create a new CSS called Cameras.CSS TD Web Authoring

Table CSS Create a new CSS called tablestyle.CSS Green Background

The Internet 10/13/11 The Box Model

How to use the CSS box model for spacing, borders, and backgrounds

Principles of Web Design 5th Edition

Session IV Chapter 15 - How Work with Fonts and Printing

Presentation transcript:

Very quick intro HTML and CSS

Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" " A Web Title Go here No, go here This is a header Bet you want to know why you're here This is important Let me explain why... Sections help us decode the site Here's some info about this section This is another section for our site Here's some info about this section Some more stuff that's important And make sure you don't forget!

Sample CSS body {background: cyan; } /* style the "links" menu" */ /* The div size is 150x700. Position is 30 px from the top */ div#links {position: absolute; top: 30px; left: 0; width: 150px; height: 700px; font: 16px Verdana, sans-serif;} /* Style the actual links */ /* override the ul so it's closer to the left edge */ div#links ul {padding-left: 2px; } /* no underline on the links */ div#links li {list-style-type: none;} /* give it a background and color */ div#links a {background: blue; color: #F7C8D5; display: block; text-align: center; font: bold 1em sans-serif; padding: 2px 4px; margin: 0; margin-bottom: 2px; border- width: 0; text-decoration: none; } /* Special style for when the mouse is hovering */ div#links a:hover {background: #94B3F2; color: #411;} /* Style the content area */ div#content {background: #232334; color: #F7F7ED; } div#content {position: absolute; top: 10px; left: 160px; right: 25px; font: 13px Verdana, sans-serif; padding: 10px; border: solid #cbc8f6;} div#content p {margin: 0 1em 1em; font-size: 12px;} h1 { background: #cbc8f6; color: blue; } /* Style elements within a class of div */ div.important h2 { color: red; } div.important p { font-style: italic; } /* Style specific elements with a class */ h2.notice {color: yellow; } /* One style for images (could use classes, ids for more control */ img {float: right; } Which CSS commands will be important?