Download to read offline
![Year
2014
Speciman
Editionc
[Design Web on your think…]
[Hemant patidar]
[Maulana Azad National Institute of Technology, Bhopal]
[year 2012-16]
1](https://image.slidesharecdn.com/css-140303052947-phpapp02/85/Webpage-style-with-CSS-1-320.jpg)
Uploaded byHemant Patidar
Webpage style with CSS
This document provides an overview of CSS (Cascading Style Sheets). It discusses advantages of CSS including saving time and improving page load speeds. The history and syntax of CSS are covered. Different types of CSS files like internal, external, and inline CSS are described. Key CSS concepts like selectors, inheritance, background properties, fonts, text formatting, styling links and lists, positioning elements, and the display property are summarized.
More Related Content
Similar to Webpage style with CSS
Webpage style with CSS
- 1. Year 2014 Speciman Editionc [Design Web onyour think…] [Hemant patidar] [Maulana Azad National Institute of Technology, Bhopal] [year 2012-16] 1
- 2. 2 CSS (Cascading StyleSheets) 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 thelook 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 iscreated 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 Syntaxfor 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 CSSFiles 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 Selectoris 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: Theclass 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 aboverule 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 BackgroundShorthand: background: color image repeat attachment position.
- 13. 13 Text and Font ThereAre 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, rightand 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 canbe 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 Individualsides - 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.
- 21. 21 CSS Postioning Positioning meansplacing 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 accordingto 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: Theproperty 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.