Movatterモバイル変換

Intro to CSS WorkshopShabab ShihanShabab Shihan

Skype : shabab.shihan1Twitter : http://bit.ly/1HkfemTFacebook : http://on.fb.me/1N3DhbNLinkedin : http://bit.ly/1RGnZNFPortfolio site : www.shababshihan.comFor hire me create your website : http://bit.ly/1GTFk5b

WelcomeThis slideshow presentation is designed tointroduce you to Cascading Style Sheets(CSS). It is the first of two CSS workshopsavailable. In addition to the two CSSworkshops, there are also workshops onHTML, PHP, and MySQL.These slides are based on source material found at the w3schools.com website.You are encouraged to visit the site – it is a great resource.

Cascading Style SheetsCascading Style Sheets are a means toseparate the presentation from the structuralmarkup (xhtml) of a web site. By applying aCSS style you have the ability to keep thestructure of your document lean and fast,while controlling the appearance of content.

Look Ma, no formatting...<body><div id="wrapper"><div id="header"><div id="site-meta"><h1><a href="http://www.fineminddesign.com/sandbox/wordpress/"title="Fine Mind Design Sandbox">Fine Mind Design Sandbox</a></h1><span class="description">Just another WordPress weblog</span></div><div id="topsearch"><form method="get" id="searchform"action="http://www.fineminddesign.com/sandbox/wordpress/"><input type="text" value=""name="s" id="s" /><button type="submit">Search</button></form></div><ul id="navigation"><li class="current_page_item"><ahref="http://www.fineminddesign.com/sandbox/wordpress">Home</a></li><li class="page_item page-item-2"><ahref="http://www.fineminddesign.com/sandbox/wordpress/?page_id=2" title="About">About</a></li>...Notice that there is no markup that sets color, size,borders, decoration, etc. This markup is format-free.

Look Ma, no markup...body {margin: 6px 0 0; font: normal 80%/160% tahoma,arial, verdana, san-serif; background: #fffurl(images/bg.png) repeat-x;}li {list-style: none;}hr {clear: both; height: 1px; line-height: 1px; font-size: 1px; visibility: hidden;margin: 0; padding: 0;}/* HEADINGS - - - - - - - - - - - - - - - - - - - - - - - - - - - - */h1, h2, h3, h4, h5 {font-family: georgia, 'times new roman', times, serif; font-weight: normal;}h1 {font-size: 2.2em;}This CSS documentcontains all the formattingthat was missing from theHTML document in thelast slide.

ContentAs we mentioned, content (in the HTMLdocument) is separated from the formatting(in the CSS document).Content is the collective term for all the text,images, videos, sounds, animations, and files(such as PDF documents) that you want todeliver to your audience.

StructureXHTML enables you to define what eachelement of your content is (heading,paragraph, list of items, hyperlink, image)This is done with tags (enclosed in anglebrackets <>) that identify each element ofyour content.

ProcessStart with a blank page of content. Includeyour headers, navigation, a sample of thecontent and your footer.Next start adding your markup.Then start adding your CSS.Use HTML tables semantically – for tabulardata, not layout.

The Style Sheet - WhatA style sheet is a set of stylistic CSS rulesthat tell a browser how the different parts of aXHTML document are presented.A style sheet is simply a text file with the filename extension .css

The Style Sheet - How Linked / External<link href=“styles.css" rel="stylesheet" type="text/css" media=“screen" /> Embedded / Internal<head><style type=“text/css”>/* styles go here */</style></head> Inline<p style=“/* styles go here */”>Text</p>The three ways to useCSS are external(stored in a separatedocument and linkedto from an HTMLdocument, embeddedwithin the <head> tagsat the top of an HTMLdocument, and inlinein an HTML document.

Anatomy...Oops! Wrong slide... move along.

Anatomy of a CSS RuleA CSS rule is made up of the selector, whichstates which tag the rule selects (or targets),and the declaration, which states whathappens when the rule is applied.The declaration itself is made up of aproperty, which states what is to be affected,and a value, which states what the propertyis set to.

h1 { color: #333; font-size: x-large; }Anatomy of a CSS Rule

 3 types of selectors Tag selectors ID selectors Class selectors Selectors should never start witha number, nor should they havespaces in themSelectors

 Can be any type of HTML element body p divp {background-color: red;}Tag Selectors

 ID's vs. Classes... an epic battle. >> See here << for the differences. You can not have two elements onone page with the same ID#sidebar {background-color: blue;}ID Selectors

 Can give multiple elements a classto style them differentlyp.semispecial {background-color: green;}Class Selectors

 You can chain selectors together!Just put a space between them:body #container p.warning a {color: red;}What will be affected by this style?Descendant Selectors

 You can group selectors togetheras well with commasp.warning, p.special {color: red;}Now both classes, warning andspecial, will have red text.Grouping Selectors

 This basic structure of the selectorand the declaration can beextended in three ways: Multiple declarations within a rule.p { color:red; font-size:12px;line-height:15px;} Note that each declaration endswith a semicolon.Writing CSS Rules

 Multiple selectors can be grouped.h1 {color:blue; font-weight:bold;}h2 {color:blue; font-weight:bold;}h3 {color:blue; font-weight:bold;} Better to use shorthand:h1, h2, h3 {color:blue; font-weight:bold;} Just be sure to put a comma aftereach selector except the last.Writing CSS Rules

 Multiple rules can be applied to thesame selector. If you decide that youalso want just the h3 tag to beitalicized, you can write a second rulefor h3, like this:h1, h2, h3 {color:blue; font-weight:bold;}h3 {font-style: italic;}Writing CSS Rules

 Since different browsers have their ownstyling defaults, you may choose to beginyour CSS document by overriding all thebrowser styles. Because of browser differences, it’s agood idea to “zero out” the formatting forcommonly used tags. Set up some basicstyles at the beginning of your style sheetthat remove the “offensive” formatting.Reset the Styling

/* Normalizes margin, padding */body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, dt, dl, dd,form, blockquote, fieldset, input { padding: 0;margin: 0; }/* Normalizes font-size for headers */h1, h2, h3, h4, h5, h6 { font-size: 1em; }/* Removes list-style from lists */ol, ul { list-style: none; }/* Removes text-decoration from links */a { text-decoration: none; }/* Removes border from img */a img { border: none; }Reset the Styling

 Style for Links Four pseudo-classes let you formatlinks in four different states basedon how a visitor has interactedwith that link. They identifywhen a link is in one ofthe following fourstates:Anchor Link Pseudo-Classes

 a:link denotes any link that your guesthasn’t visited yet while the mouse isn’thovering over or clicking it. Your regular,unused Web link. a:visited is a link that your visitor hasclicked before, according to the webbrowser’s history. You can style this typeof link differently than a regular link to tellyour visitor, “Hey, you’ve been therealready!”Anchor Link Pseudo-Classes

 a:hover lets you change the look of alink as your visitor passes the mouseover it. The rollover effects you cancreate aren’t just for fun—they canprovide useful visual feedback forbuttons on a navigation bar. a:active lets you determine how a linklooks as your visitor clicks. It coversthe brief moment when the mousebutton is pressed.Anchor Link Pseudo-Classes

 In most cases, you’ll include atleast :link, :visited, and :hoverstyles in your style sheets formaximum design control. But inorder for that to work, you mustspecify the links in a particular order:link, visited, hover, and active.Anchor Link Pseudo-Classes

 Use this easy mnemonic:LOVE/HATE. So here’s the properway to add all four link styles:a:link { color: #f60; }a:visited { color: #900; }a:hover { color: #f33; }a:active { color: #b2f511; }Anchor Link Pseudo-Classes

 The styles in the previous sectionare basic a tag styles. They targetcertain link states, but they style alllinks on a page. What if you wantto style some links one way andsome links another way? A simplesolution is to apply a class toparticular link tags.Targeting Particular Links

 <a href=“http://www.site.com/”class=“footer”>Site Link</a> To style this link in it’s own way, you’dcreate styles like this:a.footer:link { color: #990000; }a.footer:visited { color: #000066; }a.footer:hover { color: #3F5876; }a.footer:active { color:#990000; }Targeting Particular Links

 Every site needs good navigationfeatures to guide visitors to theinformation they’re after—and helpthem find their way back. CSSmakes it easy to create a greatlooking navigation bar, rollovereffects and all.Building Navigation Bars

 At heart, a navigation bar is nothingmore than a bunch of links. Morespecifically, it’s actually a list of thedifferent sections of a site. Listsprovide us with a way of groupingrelated elements and, by doing so,we give them meaning andstructure.Building Navigation Bars

 A navigation menu is based on asimple list inside a div, like this:<div id=“NavBar"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Events<a/></li><li><a href="#">Forum</a></li></ul></div>Building Navigation Bars

 Divs help add structure to a page. Divstands for division and marks alogical group of elements on a page. Divs divide the page into rectangular,box-like areas. Invisible unless youturn on borders or color background. Include <div> tags for all majorregions of your page, such asheader, main content, sidebar, etc.<div class=”header”>Title</div>

 Once your <div> tags are in place, addeither a class or ID for styling each<div> separately. For parts of the page that appear onlyonce and form the basic building blocksof the page, web designers usually usean ID. ID selectors are identified using a hashcharacter (#); class selectors areidentified with a period(.).Divs <div>

Easy way to remember...Class PeriodID number

 Nearly every page design you seefalls into one of three types oflayouts: fixed width liquid elasticType of Web Page Layouts

 Fixed width offers consistency. Insome cases, the design clings to theleft edge of the browser window, ormore commonly, it is centered. Many fixed width designs are about760px wide—a good size for 800 x600 screens (leaves room for scrollbars). However, more and more sites areabout 950 pixels wide, on theassumption that visitors have at least1024 x 768 monitors.Web Page Layouts: Fixed

 A liquid design adjusts to fit thebrowser’s width. Your page getswider or narrower as your visitorresizes the window. Makes the bestuse of the available browser windowreal estate, but it’s more work tomake sure your design looks goodat different window sizes. On very large monitors, these typesof designs can look really wide.Web Page Layouts: Liquid

 An elastic design is a fixed-widthdesign with a twist—type size flex-ibility. You define the page’s widthusing em values or percentages.>> More info here << Elastic designs keep everything onyour page in the same relativeproportions.Web Page Layouts: Elastic

 Very common layout; it contains anarrow left column for navigationand a right column that houses therest of the page’s content. In thisexample, the navigation column is afixed width, but the content area isfluid—that is, it changes widthdepending on the width of thebrowser window.Two-Column Fixed Layout

<html><head><title>A Simple Two Column Layout Without CSS Applied</title></head><body><div id="nav"><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul></div><div id="content"><h1>A Simple Two column Layout</h1><p><strong>Step X - bold text here... </strong>More text here...</p><p>More text here</p></div></body></html>Two-Column Fixed Layout

 CSS Applied:body {margin: 0px;padding: 0px;}div#nav {position:absolute;width:150px;left:0px;top:0px;border-right:2pxsolid red;}Two-Column Fixed Layout

Two-Column Fixed LayoutNow that we have our two-column layout, we need tothink about making it lookmore presentable.Let's take a look atadding padding,margins, and borders...

Margin, Padding, Border> Margin - Clears an area around the border. Themargin does not have a background color, it iscompletely transparent> Border - A border that goes around the padding andcontent. The border is affected by the background colorof the box> Padding - Clears an area around the content. Thepadding is affected by the background color of the box> Content - The content of the box, where text andimages appear

Margin, Padding, BorderThis is commonly called the Box Model. Inorder to set the width and height of anelement correctly in all browsers, you need toknow how the box model works.Here is a way to visualize it...

Margin, Padding, Border Box Model

 Clean Separation of Code/Content Clean Menu Systems Provide 'hooks' for the designersWhat's Important for Coders?

 Provide 'hooks' for the designers Class and ID on each body element ID each major 'section' of the page Header Footer Leftside RightsideWhat's Important for Coders?

Going ModularIf you are working on a large site with severalmajor sections requiring detailed styling, youmay wish to consider using several sub-CSSsheets. This is also known as the modularapproach.Here's what the process looks like...

Step 1Build your HTMLHTML file

Step 2Build your CSSHTML file MasterCSS file

/* container styles */#container { }/* header styles */#header { }#header h1 { }/* content styles */#content { }#content h2 { }/* footer styles */#footer { }#footer p { }Master CSS file

Step 3Separate your CSSHTML filecontainer.cssheader.csscontent.css

#container { }#header { }#header h1 { }#content { }#content h2 { }#footer { }#footer p { }New CSS filescontainer stylesheader stylescontent stylesfooter styles

QuestionWhy separate CSS files?• Easier to find rules• More than one developer at a timecanwork on the CSS files• Files can be turned on/off as needed

Step 4Add bridging CSS fileHTML file BridgingCSS file

QuestionWhy add a bridging file?• One link to all CSS files in HTML• Change CSS without changing HTML• Add or remove files as needed

Step 5Link to bridging fileHTML file BridgingCSS file

HTML file<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Modular CSS</title><link rel="stylesheet" href="bridging.css"type="text/css” media="screen, projection"></head><body>…

Step 6Import CSSHTML file BridgingCSS file

@import "container.css";@import "header.css";@import "content.css";@import "footer.css";Bridging CSS file

QuestionHow do @imports work?• Imports all rules from one file into other• Exactly as if written in other file• Order and placement are important• Note:cannot be read by older browsers

Skype: shabab.shihan1Twitter: http://bit.ly/1HkfemTFacebook: http://on.fb.me/1N3DhbNLinkedin: http://bit.ly/1RGnZNFPortfolio site: www.shababshihan.comFor hire me create your website: http://bit.ly/1GTFk5b

Movatterモバイル変換

Change Language

Make Css easy(part:2) : easy tips for css(part:2)

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Make Css easy(part:2) : easy tips for css(part:2)

Recently uploaded

Make Css easy(part:2) : easy tips for css(part:2)