Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.
Advertisements

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Today CSS HTML A project.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
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:
Tutorial 4: Creating page layout with css
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.
Working with Cascading Style Sheets
CSS to Know And this is just the beginning. What to What?  Tags = regular HTML  Ids = #id, only one hashtag per page  Class =.class, many as you want.
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.
CSS Dvijesh Bhatt.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
Doman’s Sections Information in this presentation includes text and images from
Website Development & Management Working with Style Rules Instructor: John Seydel, Ph.D. CIT Fall
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
CSS Border.
MySQL and PHP Review CSS. Cascading Style Sheet (CSS) Style sheets are files or forms that describe the layout and appearance of a document. Cascading.
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.
INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.
>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.
 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.
CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
Web Development & Design Foundations with HTML5 7th Edition
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.
CONTROLLING Page layout
Tutorial 4 Creating Page Layouts with CSS
Advanced CSS. Display  Hiding an element can be done in two ways  display:none  Element is hidden and will no longer take up space on the page  Can.
CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.
Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,
WebD Introduction to CSS By Manik Rastogi.
CSS.
Chapter 6 - Cascading Style Sheets™ (CSS)
UNIT-II CSS.
Cascading Style Sheet List Properties Box Properties Pseudoclass
>> The “Box” Model
Advanced CSS BIS1523 – Lecture 20.
Cascading Style Sheets (Layout)
Web Systems & Technologies
Web Development & Design Foundations with HTML5 7th Edition
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Cascading Style Sheet List Properties Box Properties Pseudoclass
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
Objectives Create a reset style sheet Explore page layout designs
The Internet 10/13/11 The Box Model
CSS Borders and Margins.
Second CSS Lecture Applications to XML
Cascading Style Sheets
List Properties Box Properties Pseudoclass
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5
How to use the CSS box model for spacing, borders, and backgrounds
Web Development & Design Foundations with HTML5
Web Client Side Technologies Raneem Qaddoura
Presentation transcript:

Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training

Copyright © Osmosys Introduction - Full form - Role of CSS - Presentation - Adding a CSS file to your HTML - Inline CSS is bad. Check Zen Garden. - Adding comments to CSS Important Note - Refer to MDN for reference and doubts clearing - Read documentation properly and completely.

Copyright © Osmosys CSS Syntax

Copyright © Osmosys Selectors header.class #id.class #id.class#id.header p Important Note - Avoid using global styles.

Copyright © Osmosys Block and Inline Elements - What are they? - Differences - inline-block - The display property Controlling dimensions of CSS elements - Empty elements have no height. - Inline elements cant be given height or width - Inline Block can have height and width

Copyright © Osmosys CSS Units - Percentage - % - Pixels - px - Em - em Margins - Margin does not affect the width of the element Overriding CSS and Inheritance - The point system - Using multiple classes for the same element

Copyright © Osmosys Padding - Adding padding increases the width of the element - Same units as margins apply. CSS Reseter What and Why? - Using CSS Reseter. - Always use hexcode for color in CSS (#929292)

Copyright © Osmosys Working with Text - color - letter-spacing - line-spacing - text-align - text-decoration - word-spacing Working with fonts - family - size - style - weight - What are web safe fonts? - How to add more fonts?

Copyright © Osmosys Anchor Pseudo classes Elements Pseudo selectors - a:link {color: #009900;} // Normal - a:visited {color: #999999;} // Already Visited - a:hover {color: #333333;} // Hovered - a:focus {color: #333333;} // Focused - a:active {color: #009900;} // Active - :hover - :focus - :active

Copyright © Osmosys Working with backgrounds Working with borders - color - image - position - repeat - color - style > dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid - width - top, bottom, right, left

Copyright © Osmosys Styling lists Floats Media Queries - list-style - list-style-image - list-style-type - Working with floats - left and right - Using clear

Copyright © Osmosys Positioning CSS elements - static - relative - absolute - fixed - z-index Other CSS properties - cursor - opacity - overflow - box shadow

Copyright © Osmosys Designing Forms - Two column form with label on top and control below - One column form with label on side and control next to it. - Two column layout with labels on side and controls next to it. - Errors below controls and on top of the form. Designing Tables - Add classes to table to design them. - Alternate row colors. - Designing headers and footers seperately.