Webpage style with CSS

50 %
50 %
Information about Webpage style with CSS

Published on March 3, 2014

Author: hsp27

Source: slideshare.net


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

Year 2014 Speciman Editionc [Design Web on your think…] [Hemant patidar] [Maulana Azad National Institute of Technology, Bhopal] [year 2012-16] 1

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 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 Advantage Of CSS  CSS saves time  Pages load faster  Easy maintenance  Superior styles to HTML  Multiple device compatibility

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 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 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 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 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 font-weight: bold } The above rule applies to all the anchors which are placed within the <p> tag.

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 Background in CSS Background Shorthand: background: color image repeat attachment position.

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 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 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 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 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 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 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.


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 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 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.

#f1f1f1 presentations

Add a comment

Related presentations

Related pages

HTML CSS - W3Schools-CSS

Styling HTML with CSS. CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
Read more

CSS Tutorial - W3 Schools – CSS

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from ...
Read more

Cascading Style Sheets – Wikipedia

Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet ...
Read more

Cascading Style Sheets - Wikipedia

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often ...
Read more

How to style a web page in Dreamweaver with CSS Designer ...

How to style a web page with CSS Designer. ... CSS Designer is an indispensable tool in Dreamweaver CC, available only in Adobe Creative Cloud.
Read more

Building Your First Web Page - Learn to Code HTML & CSS

Before learning HTML and CSS it is important to understand the differences between the two languages (content vs. style), their syntax, and some common ...
Read more

CSS MenuMaker | HTML, CSS, & jQuery Menus

Make Awesome Menus. ... CSS Menu Maker. We provide the average webmaster with tools to create custom, cross browser compatible CSS menus. Menu Generators.
Read more

CSS Tutorial - Inhaltsverzeichnisgertutorial - HTML.net

CSS Tutorial - Inhaltsverzeichnis - HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite
Read more

Style Sheets. - World Wide Web Consortium

W3C's authoritative overview of style sheets for the web.
Read more