Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:



Similar documents
Simply download Beepip from and run the file when it arrives at your computer.

Web Design and Development ACS Chapter 9. Page Structure

CST 150 Web Design I CSS Review - In-Class Lab

Web layout guidelines for daughter sites of Scotland s Environment

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

C:\wamp\www\webdok\07bootstrap\bootstrap dist\css\bootstrap.css 2. juli :18

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc mraymond@luminys.com

Creating a Resume Webpage with

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

JJY s Joomla 1.5 Template Design Tutorial:

CHAPTER 10. When you complete this chapter, you will be able to:

Web Authoring CSS. Module Descriptor

Web Design with CSS and CSS3. Dr. Jan Stelovsky

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

In this chapter, you will learn how to...

Web Design and Databases WD: Class 7: HTML and CSS Part 3

Web Developer Jr - Newbie Course

Style & Layout in the web: CSS and Bootstrap

Help on Icons and Drop-down Options in Document Editor

Outline of CSS: Cascading Style Sheets

{color:blue; font-size: 12px;}

Web Development 1 A4 Project Description Web Architecture

ITNP43: HTML Lecture 4

Positioning Container Elements

ICE: HTML, CSS, and Validation

Web Authoring. Module Descriptor

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Create Your own Company s Design Theme

How To Create A Web Page On A Windows (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (

Contents. Downloading the Data Files Centering Page Elements... 6

Fast track to HTML & CSS 101 (Web Design)

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Further web design: Cascading Style Sheets Practical workbook

HTML5 and CSS3 Design with CSS Page 1

Campaign Guidelines and Best Practices

Responsive Web Design: Media Types/Media Queries/Fluid Images

Chapter 1: Outlook Isn t Going Anywhere Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 &

Introduction to Adobe Dreamweaver CC

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team. Overview

Content Management System

Using Style Sheets for Consistency

The Essential Guide to HTML Design

Coding Standards for Web Development

This document will describe how you can create your own, fully responsive. drag and drop template to use in the creator.

If you want to go back to the normal text just. Editing the code in HTML is a technical feature and it should only be done by advanced users.

Advanced Editor User s Guide

WYSIWYG Editor in Detail

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

Lecture 9 HTML Lists & Tables (Web Development Lecture 3)

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots

Wykład 2_2 TINT. Kaskadowe arkusze stylu Tabele, zastosowanie znaczników div. Zofia Kruczkiewicz

Creative Guidelines for s

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

HTML Tables. IT 3203 Introduction to Web Development

Eloqua What is this and why should I read it?

BLACKBOARD 9.1: Text Editor

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Drupal Training Guide

Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION.

mpdf Example 37. Barcodes <?php

8 STEPS TO CODE KILLER RESPONSIVE S

Creating Web Pages with Dreamweaver CS 6 and CSS

Tips and tricks with Text boxes in Mahara

customer community Getting started Visual Editor Guide!

Dreamweaver. Introduction to Editing Web Pages

FACULTY OF COMMERCE, OSMANIA UNIVERSITY

CSS - Cascading Style Sheets

Fairsail PDF Template Generator: A Complete Guide

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

Responsive Design

Flare Tips and Tricks. Tips and tricks. Importing content Lists. Variables and snippets Condition tags Printed documentation WebHelp.

Mastering the JangoMail EditLive HTML Editor

HTML Lesson 7. Your assignment:

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Tutorial 5. Working with Web Tables

Umbraco v4 Editors Manual

Responsive Web Design Creative License

How to Properly Compose HTML Code : 1

CIS 467/602-01: Data Visualization

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

User Guide for Smart Former Gold (v. 1.0) by IToris Inc. team

GUIDE TO CODE KILLER RESPONSIVE S

CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types

BlueHornet Whitepaper

Introduction to Web Development

Web Development I & II*

CSS for Page Layout. Key Concepts

Creator Coding Guidelines Toolbox

Learnem.com. Web Development Course Series. Learn em. HTML Web Design in 7 days! By: Siamak Sarmady

Creating Web Pages with HTML Simplified. 3rd Edition

CONVERSION GUIDE Financial Statement Files from CSA to Accounting CS

Transcription:

Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename { :9pt; } id e.g. #style { :9pt; } In-line CSS can also be used - useful in substitutions e.g. <p style=":9pt;"> Tag, class and id can share a similar name e.g. p {...}.p {...} and #p {...} are handled uniquely There is limited support for cascaded CSS e.g. div.topic table.type1 td - table, tr, th and td will only be recognised as the last items (as above) - only 'block' elements (not 'in-line') can be included i.e. div.style1 a {...} will not work, nor wil a#class1 {...} Units: px, pc, pt, cm, mm, in, em and % (where appropriate) are supported. Default if no unit given is px. Colours: #rgb or #rrggbb or RGB(255,255,255) or colour names e.g. 'black', 'gray' are supported. HTML Tag Attribute Values allowed BODY px, pc, pt, or small, medium, large, x-small etc., rgb(r,g,b), cmyk(c,m,y,k)works for in-line CSS only - not stylesheets margin-collapse line-height collapse none (custom attribute - collapses top and bottom margins if at top or bottom of page) Line height as a factor of font-height or %. Usual values around 1.2 or 1.3

All Block level tags: P, DIV, H1-H6, BLOCKQUOTE, ADDRESS, DL, OL, UL margin*,, margin-left, margin-right padding*, padding-right, padding-left, padding-top, padding-bottom border, border-top, border-bottom, border-right width page-break-after page-break-inside page-break-before margin-collapse line-height background- Units: px, pc, pt, cm, mm, %, em and in are supported. Default if no unit given is px. Units: px, pc, pt, cm, mm, %, em and in are supported. Default if no unit given is px. Units: px, pc, pt, cm, mm, % and in are supported. Default if no unit given is px. left center right justify auto avoid avoid (avoids a page-break within the block - only works across max. of 2 pages; not compatible with table autosize or table rotate) always left right (this is the only one that actually forces a pagebreak) collapse none (custom attribute - collapses top and bottom margins if at top or bottom of page) Line height as a factor of font-height or %. Usual values around 1.2 or 1.3 background colour only: #rrggbb text-decoration underline line-through normal (line-through = strikethrough) text-transform text-indent uppercase lowercase none (NB disabled for CJK languages) Indents first line of text in the paragraph/block. Units: px, pc, pt, cm, mm, em and in are supported. Default if no unit given is px. (Indent is disabled in tables.) Negative value will give a 'hanging indent'.

All Inline tags: SPAN, A, SUB, SUP, ACRONYM BIG, SMALL INS, S, STRIKE, DEL STRONG, CITE, Q EM, B, I, U, SAMP CODE, KBD, TT, VAR FONT text-decoration underline line-through normal (line-through = strikethrough) text-transform background- outline-width outline- uppercase lowercase none (NB disabled for CJK languages) colour e.g. #rrggbb Width of the outline. Units: px, pc, pt, cm, mm, em and in are supported. Default if no unit given is px. (Outline text is valid CSS, but not supported in browsers) Colour of the inner part of the text e.g. #rrggbb. 'INVERT' is also accepted. (Outline text is valid CSS, but not supported in browsers)

TABLE background- colour e.g. #rrggbb border, border-right, border-top, border-bottom padding*, padding-right, padding-left, padding-top, padding-bottom margin, margin-right, margin-left, vertical-align border-collapse border-spacing empty-cells page-break-inside rotate autosize topntail thead-underline px, pc, or pt only (fixed inheritance in v1.1 - only applies to outside borders of table) medium thin thick accepted for size Table & cell borders accept: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and 'inset' (other block borders do not) if no unit given is px (NB Up to mpdf 1.4 incorrectly set cell-padding for all cells in table.) Sets table padding (only relevant when border-collapse:separate) if no unit given is px. top middle bottom (applies to all cells in table) left right center (applies to all cells in table; to centre a table on the page, you must use the align="center" attribute in the table tag) collapse separate Single or double values: 2px sets horizontal and vertical; 2px 3px sets horizontal=2 and vertical=3 (Same as cellpadding attribute) Default=2px hide show (only relevant when border-collapse:separate) avoid rotates the table 90 degress clockwise (90) or counter-clockwise (-90). Does not work with columns, and bookmarks will not be correctly placed (custom attribute) Shrinks a table to fit if width is too small to allow complete words to fit. The value (must be >1) determines the maximum allowable factor to shrink i.e. autosize="2" will allow the to be reduced to a minimum of 1/2 the original size. (custom attribute) Sets border at top and bottom of table, and below THEAD row if present. (custom attribute) Sets border at bottom of THEAD row if present. (custom attribute added mpdf v1.1) line-height Sets default line-height for table cells as factor or % (value e.g. 1.3) THEAD normal bold vertical-align top middle bottom left center right

TR background- colour e.g. #rrggbb TD, TH background- colour e.g. #rrggbb border, border-right, border-top, border-bottom padding*, padding-right, padding-left, padding-top, padding-bottom white-space vertical-align Will also accept #cccccc 0.1pt solid (which is generated by IE WYSIWYG editor) and (from mpdf 1.4) solid 3mm #000000 medium thin thick accepted for size Table & cell borders accept: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and 'inset' (other block borders do not) if no unit given is px Sets cell-padding for all cells in table. nowrap top middle bottom left right center UL, OL text-indent Indent for each level of list. Units: px, pc, pt, cm, mm, and in are supported. Default if no unit given is px NB The first level can be indented or not: set in configuration files. Margin. Units: px, pc, pt, cm, mm, and in are supported. (NB ONLY above/below the top level of nested lists.) line-height Sets line-height for current list (value e.g. 1.3 or 130%) - inherited by lower level nested lists HR width Units: px, pc, pt, cm, mm, in and % are supported. Default if no unit given is px height left right center e.g. #rrggbb i.e. line-width. Units: px, pc, pt, cm, mm, and in are supported. Default if no unit given is px if no unit given is px

IMG vertical-align top middle bottom baseline text-bottom text-top (only top, middle and bottom are valid in mpdf; the others are coverted to the appropriate nearest type) Sets the text alignment of accompanying text on the same line. Partly supported: if more than one inline image/object is on a line, the last image/object of the line will set the vertical alignment. margin, margin-right, margin-left, border, border-right, border-top, border-bottom (vspace, hspace) width, height if no unit given is px. Will also accept #cccccc 0.1pt solid (which is generated by IE WYSIWYG editor) and (from mpdf 1.4) solid 3mm #000000 medium thin thick accepted for size Attributes - set values for margin-left/right or margin-top/bottom Units: px, pc, pt, cm, mm, em, in and % are supported. NB the inline attributes width="" and height="" are also supported SELECT e.g. #rrggbb TEXTAREA width, height Units: px, pc, pt, cm, mm, em, in and % are supported. NB the inline attributes cols="" and rows="" are also supported e.g. #rrggbb INPUT (IMAGE) width, height Units: px, pc, pt, cm, mm, em, in and % are supported. INPUT (CHECKBOX RADIO) INPUT (PASSWORD TEXT) Notes: width (sets size of glyph). Not inherited. e.g. #rrggbb. Not inherited. Units: px, pc, pt, cm, mm, em, in and % are supported. NB the inline attribute size="" is also supported Text colour e.g. #rrggbb * Margin and padding accept the various shorthand forms e.g.: margin:1pt; will set all top, right, bottom and left values the same margin:1pt 2pt; will set top and bottom to 1pt, left and right to 2pt

margin:1pt 2pt 3pt 4pt; will set all values in order: top>right>bottom>left Generated in 0.57 seconds