• Save
Basic css
Upcoming SlideShare
Loading in...5
×
 

Basic css

on

  • 4,889 views

 

Statistics

Views

Total Views
4,889
Views on SlideShare
4,337
Embed Views
552

Actions

Likes
8
Downloads
1
Comments
2

8 Embeds 552

http://www.cs.ubbcluj.ro 286
http://www.addcolours.com 166
http://smashingweb.info 43
https://www.cs.ubbcluj.ro 33
http://karim.byethost5.com 10
http://smashingweb.ge6.org 8
http://ranjith.zfs.in 4
http://www.linkedin.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Basic css Basic css Presentation Transcript

  •  
  • Basics By Gopinath Ambothi CSS
    • What is CSS?
    • Why CSS?
    • Reference CSS from HTML
    • CSS Syntax
    • ID and Class
    • Selectors
    • Basic Tags & Properties
    • CSS Box Model
    • Use Firebug/IE developer toolbar
    Index
  • What is CSS?
    • Cascading : Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique element.
    • Style : CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc).
    • Sheet : Normally, CSS is a file separate from the HTML file –linked to the HTML (external, exceptions apply).
    • Allows for much richer document appearances than HTML.
    • Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc.
    • Use same style on multiple pages .
    • Reduce page download size .
    • Use HTML for content; CSS for Presentation.
    Why CSS?
  • <link rel=“stylesheet”type=“text/css”href=“style.css”/> HTML<html><head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“style.css&quot; /> </head>…</html> … … … … style.css … … … … … sample.html Reference CSS from HTML
  • CSS Syntax h1 { color: red; background: yellow; } Selector Style Block Element Properties Style Values • The Selector selects elements on the HTML page. • The associated Style Block applies its Style Values to the selected Element’s Properties
    • The id selector is used to specify a style for a single, unique element.
    • The id selector uses the id attribute of the HTML element, and is defined with a &quot;#&quot;.
    • The style rule below will be applied to the element with id=&quot;para1&quot;:
    • #para1{ text-align:center; color:red;}
    ID and Class The ‘ID’ Selector In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called &quot;id&quot; and &quot;class&quot;.
    • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
    • This allows you to set a particular style for any HTML elements with the same class.
    • The class selector uses the HTML class attribute, and is defined with a &quot;.&quot;
    • In the example below, all HTML elements with class=&quot;center&quot; will be center-aligned:
      • .center {text-align:center;}
    ID and Class The ‘Class’ Selector
  • Selectors Select elements to apply a declared style. • Selector types: – Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>, etc.) – Class Selectors: selects all elements that belong to a given class. – ID Selectors: selects a single element that’s been given a unique id . – Pseudo Selectors: combines a selector with a user activated state (:hover, :link, :visited)
  • Selectors Element Selectors • Finds all HTML elements that have the specified element type . • Example: h1{ color: blue; } Finds all elements of type < h1 > and makes the text color blue.
  • Selectors Class Selectors • Finds all elements of a given class –based on the attribute’s class value . • Syntax: .classname (Remember the dot means class selector) • Example: .legs{ font-weight: bold; background: pink; } Finds all elements whose class = “ legs ” and makes their font bold and their backgrounds pink.
  • Selectors ID Selectors • Finds a single element that’s been given a unique id –based on the attribute’s id value . • Syntax: #idname (Remember the pound-sign means id selector) • Example: #snout{ border: solid red; } Finds a single element whose id = “ snout ” and gives it a solid red border.
  • Selectors Pseudo Selectors Apply styles to a user activated state of an element. • If used, must be declared in a specific order in the style sheet. • General Purpose Pseudo-Selector: – :hover Element with mouse over • Specific to hyperlinks (and/or buttons) – a:active A link or button that is currently being clicked on. – a:link A link that has NOT been visited yet. – a:visited A link that HAS been visited.
  • Grouping Selectors • Lets say you want to apply the same style to several different selectors. Don’t repeat the style – use a comma !! • Syntax: sel1, sel2, sel3 (Remember the comma to group several different selectors) • Example: h1, .legs, #snout{ font-size: 20pt; } Finds all elements of type < h1 >, all elements with class=“ legs ” and the single element whose id = “ snout ” then makes their font-size 20pt.
  • Conflict Resolution • It’s possible to have different styles applied to the same selector ( C ascading SS ), but what if the styles tell the browser to do conflicting things? • Rules: – Which selector is more specific ? – If the selectors are the same, then which style was applied last ?
  • Sharpen your Selector • Order of specificity: (specific) id , class , elementtype (ambiguous) • Combine selectors: Elementype.classname or Elementype#idname e.g. p.legs [ or] h2#snout
  • Sharpen your Selector • Descendant Selectors: Specify the context in the HTML tree from each ancestor down to the desired element –each separated by a space. e.g. body.pigp.pig-head #snout • HTML Tree: <body class=“pig”> <p class=“pig-head”> <h1 id=“snout”> Snout SnoutSnout </h1> </p> </body>
  • Basic CSS Tags & Properties
  • <span> Element Tag • Useful for applying style to text within another HTML element. • Use SPARINGLY –unlike <h1> or <p>, <span> has no semantic meaning. • Remember, HTML is for content and HTML tags are for describing that content to non-human or visually-impaired readers. <span> is just used to make things “pretty.”
  • <div> Element Tag • Useful for dividing parts of the page into sections. • Creates a “box” with the following attributes: – margin – padding – border – height – width – (..and lots more) • Primary element used for CSS Layouts
  • Color Properties color: specifies the text color. background-color: specifies the background color. black; or #000000; red; or #FF0000; lime; or #00FF00; blue; or #0000FF; white; or #000000; … and more
  • Background Image Properties background-image: url(../location/of/image.jpg) background-repeat: tile image in background background-position: vertical(top, center, bottom, or size) horizontal(left, center, right, or size) background-attachment : (scrollor fixed)
  • Font Properties font-family: times, arial, serif, sans-serif, monospace; font-style: italic; font-weight: ( bold , bolder , lighter, or 100 – 900;) font-size: size; … or shorthand font: style weight size family;
  • Text Properties text-indent: indents first line of a paragraph according to size text-align: right;or left;or center;or justify; text-decoration: none; orunderline; text-transform: Capitalize; Line-height: added vertical space to each line of text according to size
  • List Properties list-style-type: none, disc, circle, square,(other types available) list-style-position : inside or outside list-style-image: url(../path/to/image.jpg) … or shorthand list-style: type position image
  • Border Properties border-width: (thin, medium, thick, or size) border-style: (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset) border-color: color … or shorthand border(-top, -right, -left, -bottom): width style color
  • Position Properties Absolute - The box is placed in an absolute location relative to the container block. The element's position is specified with the &quot;left&quot;, &quot;top&quot;, &quot;right&quot;, and &quot;bottom&quot; properties Fixed - Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the &quot;left&quot;, &quot;top&quot;, &quot;right&quot;, and &quot;bottom&quot; properties Relative - Generates a relatively positioned element, positioned relative to its normal position, so &quot;left:20&quot; adds 20 pixels to the element's LEFT position Static - Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations) Inherit - The element should have the same position value as the parent element. Example: http://www.w3schools.com/Css/tryit.asp?filename= trycss_position_relative
  • Float Properties With CSS float, an element can be pushed to the Left or Right allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. How Elements Float? Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected.
  • CSS Box Model The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:
  • Use Firebug / IE developer tool bar
    • Firebug
    • Colorzilla
    • MeasureIt
    • YSlow
  • Thank You!