• Like
Webpage style with CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Webpage style with CSS

  • 212 views
Published

A try to help the newcomers on CSS.. …

A try to help the newcomers on CSS..
read it and rate it... :)

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
212
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Year 2014 Speciman Editionc [Design Web on your think…] [Hemant patidar] [Maulana Azad National Institute of Technology, Bhopal] [year 2012-16] 1
  • 2. 2 CSS (Cascading Style Sheets) Table of Content: 0. CSS 1. Advantage of CSS 2. CSS History 3. CSS Syntax 4. Types of CSS files 5. Selector In CSS 6. Inheritance In CSS & HTML Inheritance Tree 7. CSS units 8. CSS Background 9. Font & text 10. Styling Link 11. Styling List 12. Styling Table 13. Div & Span 14. Positioning 15. Display
  • 3. 3 CSS CSS handles the look and feel part of a web page. Using CSS, We can control..  The color of the text  The style of fonts  The spacing b/w paragraph  Column are sized and laid out  Background Image and color  Variety of other effects
  • 4. 4 Advantage Of CSS  CSS saves time  Pages load faster  Easy maintenance  Superior styles to HTML  Multiple device compatibility
  • 5. 5 CSS History CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS working Group creates documents called Specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a Recommendation. These specifications are called recommendations because the W3C has no control over the actual implementation of the language. It depends on the browser  Cascading Style Sheets, level 1 in December 1996.  CSS2 in May 1998.
  • 6. 6 CSS Syntax The Syntax for CSS is different than that of HTML markup but is case insensitive. Selector {property: value}  Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.  Property: A property is a type of attribute of HTML tag. All HTML attributes are converted into CSS properties. They could be color or border etc.  Value: Value are assigned to properties. For example color property can have value either red or #F1F1F1 etc.
  • 7. 7 Types of CSS Files  Internal CSS: In this we place CSS code within the <head></head> tags. <head> <title> </title> <style type=”text/css”> CSS content goes here </style> </head> <body>  External CSS: In this we place CSS code within a separate file and save it with .css extension. <head> <title> </title> <link rel=”stylesheet” type=”text/css” href=”path to css file”/> </head> <body>  Inline CSS: Inline styles are CSS styles that are applied to one element using the “style” attribute. <body> <tag style=”css property”> some text </tag> </body>
  • 8. 8 Selector In CSS Selector is used to select or point a specific element within the page.  Universal Selector  Type Selector  ID Selector  Class Selector Universal Selector: The universal selector is indicated by * and applies to all the element of a page. * { font-family: Arial; } Type Selector: The type selector allows us to create styles that apply to a specific type of HTML element. h1 { color: green; } ID Selector: Allows us to refer to a single element in a page. #intro { font-style: italic; }
  • 9. 9 Class Selector: The class selector enables us to style multiple HTML elements through the class attribute. .highlight { font-weight: bold; } >> Each element can have only one ID. >> Each page can have only one element with that ID. >> We can use the same class on multiple elements. Grouping Selector: Apply same style to different element. h1,h2,h3,h4,h5,h6 { color: red; } Combination Selector: We can hierarchically point to aspecific element within the page. p.main { font-size: 26px; } The above rule applies to only those "paragraphs" which have a class "main". Descendant Selector: Descendant means an element that is a child, grand child, great grand child and so on of another element. Apply style based on whether one element contains another. pa {
  • 10. 10 font-weight: bold } The above rule applies to all the anchors which are placed within the <p> tag.
  • 11. 11 Inheritance In CSS & HTML Inheitance tree Inheritance is a process of receiving values of properties by a child element from its parent element. -------------------------------------------------------------------------------------------------------------------
  • 12. 12 Background in CSS Background Shorthand: background: color image repeat attachment position.
  • 13. 13 Text and Font There Are 3 ways to apply font:  Single font name  Font Family keywords  Multiple Font Names Font Weight  Using Numbers: Range from 100 to 900. (100 lighter and 900 is darkest)  Using keyword: Normal, bold, bolder and lighter. Font Style Normal, italic and oblique Aligning Text
  • 14. 14 Left, center, right and justify Text Decoration Underline, Overline, None, Line-through and blink Line Height Normal, Inherit, %, px and em Text transform None, Capitalize, Lowercase, Uppercase and Inherit
  • 15. 15 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background etc.) This will style all aspects of the link (hover, visited and active). To style each part separately, we use pseudoclasses.  :link – This is the default style for the link.  :visited – After a link has been clicked.  :hover – as a mouse is paused over a link (pre-click).  :active – Right as the link is being clicked.
  • 16. 16 Styling Lists Styling List List-style-type List-style-position - None - inside - Disc List-style-image - outside - Circle - Square (Shorthand) List style: type position image. - url - path to image
  • 17. 17 Styling Tables Styling table Border-style Border-width Border-color Individual sides - None - Thin - Name -Border-top-style - Dotted - Medium - rgb - Dashed - Thick - hex -Border-rightstyle - Solid - - Double - Groove - Ridge - Inset - Outset “Border-style” shorthandBorder-style: dotted dashed solid double; It means- top border is dotted -right border is dashed -bottom border is solid -left border is dashed “Border” shorthandBorder: width style color; Border-collapse: collapse; transparent -Border-bottomstyle -Border-left-style
  • 18. 18 Other attribute Width & height Aligning table text padding Colors in table Aligning table text: Horizontal (left, right, center) Vertical (top, middle, bottom) Colors in table: border color… background color… color… tr:hover { /*css rules*/} – change the appearance of mouse of row when the user hovers the mouse over it.
  • 19. 19 Div and Span The <div> tag is used to specify a section within an HTML document. Anything from text to images to video can be placed within a div. <span> Same as div, but it doesn’t has any style of it’s own. <span> is an inline element and <div> is a block level element.
  • 20. 20
  • 21. 21 CSS Postioning Positioning means placing the elements at precise location in the browser. 3 important terms:  Box model  Padding  Margin Every element in a doc is considered to be a Rectangular box which has a content area surrounded by padding , border & margins. Box Types There are two basic types of boxes, block & inline. Block boxes are generated by elements such as p, div or table. Inline boxes are generated by tags such as B, I or span. And content like text & images. Margins Space b/w the frame and the next item. 3 choices for margin values: Length  Percentage  Auto Syntax:- margin-(top/left/right/bootom): value; Padding Padding manages the space b/w element and it’s border. Both length & percentage values are same but no auto value.
  • 22. 22 Positioning types Static Always positioned according to the normal flow of the page. Fixed Fixed positioning allows us to fix the position of an element to a particular spot on the page. Relative Absolute Relative positioning changes the position of the HTML element relative to where it normally appears. Absolute position element is positioned relative to the first parent element that has a position other than static.
  • 23. 23 Display CSS Visibility: The property can control if an element is visible or not. Possible values:- visible, hidden or collapse… Display Property: The property can perform 2 task. a. remove an element. b. change it’s rendering from inline to block and vice versa. Possible values:- none, inline, block or list-item.