How CSS works Dr. Reda Salama 1

What is CSS Cascading Style Sheets Contains the rules for the presentation of HTML. + = HTMLCSSWeb Page CSS was introduced to keep the presentation information separate from HTML markup (content). CSS validator jigsaw.w3.org/css-validator/ 2

Sources of Styles-Who do it? 1- Author (developer) Styles A- Inline Styles - As inline attribute “style” inside HTML tags I am bold Inline styles do not truly separate presentation from content. To apply similar styles to multiple elements, use embedded styles sheets or external style sheets. ExampleExample1: Using Inline Style Sheet B- Embedded Styles - As embedded style tag with in HTML document. Welcome to Vendio!.footer { width:90%; } ExampleExample2: Embedded Style Sheet 3

Sources of Styles-Who do it? C- Linked Styles - Inside separate files with.css extension –separate pages can all use the same styles. –External style sheets separate content from presentation ExampleExample3: Linked Styles with InheritanceLinked Styles 2- User Style sheets This file contains the user created styles. [firefox profile folder]/ chrome/userContent-example.css is the current user’s style sheet file for the firefox. 3- Browser default style sheet This file contains default styles for all users of a browser [firefox folder]/res/html.css is the default style sheet file for the firefox. 4

Cascade The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. Order of preference for various styles: –Default browser style sheet (weakest) –User style sheet –Author style sheet –Author embedded styles –Author inline styles (strongest) Most styles are inherited from parent elements. Styles defined for children have higher specificity and take precedence over the parent’s styles Absolute font size measurements override user style sheets, while relative font sizes will yield to a user-defined style –Example 4: Author (absolute)Example 4: –Example 5: User (relative)Example 5: 5 /*userstyles.css */ body { font-size: 20pt; color: yellow;}

CSS Rule Syntax A CSS rule has two main parts: a selector, and one or more declarations. Each rule begins and ends with a curly brace ( { and } ). The selector is normally the HTML element you want to style or id or class …. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Each CSS property is followed by a colon and the value of the attribute –Multiple property declarations are separated by a semicolon h1 { color: blue; font-size:13px;} p {color:red; text-align:center;} | || | 6

Tag based selectors Tag (Tag name) HTMLCSS Test h1 { color: blue; } Hello World! p { color: red; } DIV { Textwidth: 200px; } SPAN { some text font-size:130%; } some other text 7

CSS ID Selectors ID based ( #) HTMLCSS #content { Textwidth: 200px; font-weight:bold; } ID selectors should be used with single elements. font-weight property specifies the “boldness” of text. Possible values are: –bold –normal (the default) –bolder (bolder than bold text) –lighter (lighter than normal text) 8

Class based selector Class (.) HTMLCSS.big { Textbackground-color: red; font-family: helvitica; font-size:14px;} some text Class based styles can be used by multiple HTML elements. background-color attribute specifies the background color of the element font-family attribute names a specific font that should be displayed –Generic font families allow authors to specify a type of font instead of a specific font, in case a browser does not support a specific font font-size property specifies the size used to render the font 9

Grouping Multiple selectors can be grouped in a single style declaration by using,. H1, P,.main { font-weight:bold; text-decoration:overline; } –To apply rules to multiple elements, separate the elements with commas in the style sheet text-decoration property applies decorations to text in an element underline overline line-through blink 10

Descendant selectors - Descendant selectors are used to select elements that are descendants (not necessarily children) of another element in the document tree. - Selects all elements inside elements HTMLCSS DIV.abc P { font-weight:bold; Hello there! } I am Reda Hello there! To apply rules to only a certain type of element that is a child of another type, separate the element names with spaces 11

Child selectors To apply rules to only a certain type of element that is a child of another type, separate the element names with spaces A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children. Selects all elements where the parent is a div.abc >element HTMLCSS div.abc > P { font-weight:bold; Hello there! } Hello there! 12

Universal selectors Universal selectors are used to select any element. * { color: blue; } color property sets text color –Color names and hexadecimal codes may be used as the value 13

Adjacent sibling selectors - Adjacent sibling selectors will select the sibling immediately following an element. - To Selects all elements that are placed immediately after elements div+P { font-weight: bold; } will work for Message Hello there! 14

Attribute selectors Attribute selectors selects elements based upon the attributes present in the HTML Tags and their value. IMG[src="small.gif"] { border: 1px solid #000; } will work for 15 // all elements with title="W3Schools": [title=W3Schools] { border:5px solid green; } //styles all elements with a title attribute: [title] { color:blue; }

CSS Pseudo-classes CSS pseudo-classes are used to add special effects to some selectors and give the author access to content not specifically declared in the document Syntax: –selector:pseudo-class { property: value } –selector.class:pseudo-class {property:value;} :link :visited :hover :active :after :before :first-child :focus :first-letter :first-line :lang 16 //styles all child elements of type P p:first-child { color:blue; } will work for I am a strong man. I am a strong man. // styles first element in all p > i:first-child { font-weight:bold; } will work for I am a strong man. I am a strong man. I am a strong man. I am a strong man.

CSS Pseudo-classes 17 // Styles all elements in all first child elements p :first-child i { font-weight:bold; } will work for I am a strong man. I am a strong man. I am a strong man. I am a strong man.

CSS Values Words: text-align:center;. Numerical values: Numerical values are usually followed by a unit type. font-size:12px; 12 is the numerical value and px is the unit type pixels. –Absolute Values – in, cm, mm, pt, pc –Relative Values – px, em, ex, % Color values: color:# or color:#369. Relative length measurements: –px (pixels – size varies depending on screen resolution) –em (usually the height of a font’s uppercase M) –ex (usually the height of a font’s lowercase x) –Percentages (of the font’s default size) Absolute-length measurements (units that do not vary in size): –in (inches)- pt (points; 1 pt = 1/72 in) –cm (centimeters)- pc (picas; 1 pc = 12 pt) –mm (millimeters) 18

The Display Property –The z-index property allows a developer to layer overlapping elements –Elements that have higher z-index values are displayed in front of elements with lower z-index value s Box model Z-index 19

Box Model and Text Flow –Padding : The padding property determines the distance between the content inside an element and the edge of the element Padding is set for each side of the box by using padding-top, padding-right, padding-left and padding-bottom –Margin : Determines the distance between the element’s edge and any outside text Margins for individual sides of an element can be specified by using margin-top, margin-right, margin-left and margin- bottom –Border : The border is controlled using the properties: border-width : May be set to any of the CSS lengths or to the predefined value of thin, medium or thick border-color : Sets the color used for the border border-style : Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset –Example 6: Box elementsExample 6 –Example 7: Borders of block-level elementsExample 7 The Display Property (Contd.) 20

The Display Property (Contd.) Positioning Elements –Normally, elements are positioned on the page in the order that they appear in the XHTML document (static) position:static; (Default option) the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations) – Valid positions values are: position:absolute, position:relative, or position:fixed). –Absolute positioning provides greater control over where on a page elements reside. positions element according to distance from the top, left, right or bottom margin of its parent element Offset is relative to the first parent element that has a position other than static (if none is found, relative to document’s BODY). use bottom, right, top and left property to place element Example 8: Absolute Positioning of 3 elementsExample 8: Absolute Position 21

The Display Property (Contd.) –Relative positioning (position:relative;) Generates a relatively positioned element, positioned relative to its normal position. keeps elements in the general flow on the page but use bottom, right, top and left property to place element. Default flow of other elements don’t change. Example 9: Relative positioning of elementsRelative positioning - Fixed positioning (position:fixed;) Generates an absolutely positioned element, positioned relative to the browser window and don’t change even after page scroll. use bottom, right, top and left property to place elemen t 22

The Display Property (Contd.) Block Level elements, such as DIVs, paragraphs, headings, and lists, sit one above another when displayed in the browser. –Displayed on their own line –Have virtual boxes around them based on the box model –When the browser renders using the box model, each element is surrounded by: Padding, Margin, Boarder HTML CSS #div1 { width:300px;background:yellow;} #div1 { width:300px;background:blue;} #div1 { width:300px;background:orange;} 23

The Display Property (Contd.) Inline elements such as img, a, em, strong, and span. They do not change the flow of the document and sit side by side when they are displayed in the browser and only appear on a new line if there is insufficient room on the previous one. This is small text and this is big I am Italic.norm { color:red; }.big { color:blue; font-weight:bold; }.italicText { color:green; font-style:italic; } #row1 { padding:10px; border:solid 1px #000; } 24

The Display Property (Contd.) – allows a programmer to decide if an element is displayed as a block element, inline element, or is not rendered at all ( none ) –Example 10: CSS drop-down menuExample 10: Home Products Services Contact Us After applying LI { display:inline; } 25

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". Display:none –Hide but doesn’t keep space for the hidden element Visibility –Visible : The element is visible (default). –Hidden : The element is invisible (but still takes up space). big { visibility:hidden; } The Display Property (Contd.) 26

Elements can be removed from the normal flow of text. Floating allows you to move an element to one side of the screen; other content in the document will then flow around the floated element float:left, right, none; A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Example 11: Floating elementsExample IMG { float:left; } The Display Property (Contd.) 27

The Display Property (Contd.) Inheritance –Styles that relate to text and appearance are inherited by the descendant elements. –Styles that relate to the appearance of boxes created by styling DIVs, paragraphs, and other elements, such as borders, padding, margins are not inherited. 28

Categories of CSS properties Positioning and layout handling related. Background related properties. Font and text related Links related. Lists related. Table related. 29

Backgrounds CSS can control the backgrounds of block-level elements by adding: –Background- color-- background- image Property background-image –Specifies the URL of the image, in the format url (fileLocation) Property background-position –Places the image on the page using the values top, bottom, center, left and right individually or in combination for vertical and horizontal positioning. You can also position by using lengths –You can also position by specifying horizontal then vertical distances from the top-left corner of the screen Property background-repeat –controls the tiling of the background image –Setting the tiling to no-repeat displays one copy of the background image on screen –Setting to repeat (the default) tiles the image vertically and horizontally –Setting to repeat-x tiles the image only horizontally –Setting to repeat-y tile the image only vertically 30

Backgrounds (Cont.) Property setting background-attachment: fixed –fixes the image in the position specified by background-position. Scrolling the browser window will not move the image from its set position. The default value, scroll, moves the image as the user scrolls the window Property text-indent –indents the first line of text in the element by the specified amount Property font-style –allows you to set text to none, italic or oblique –Example 12: Adding background images and indentationExample 12: 31

Element Dimensions Dimensions of elements on a page can be set with CSS by using properties height and width –Their values can be relative or absolute Text in an element can be centered using text-align: center ; other values for the text-align property are left and right Problem with setting both vertical and horizontal dimensions of an element –Content might sometimes exceed the set boundaries, in which case the element must be made large enough for all the content to fit –Can set the overflow property to scroll, which adds scroll bars if the text overflows the boundaries set for it –Example 13: Element dimensions and text alignmentExample 13: 32

Media Types CSS media types : screen, handheld, braille, aural,and print –allow a programmer to decide what a page should look like depending on the kind of media being used to display the page –Screen: standard computer screen –Handheld: Designed for mobile Internet devices –Braille : For machines that can read or print web pages in Braille –Aural : Allow the programmer to give a speech-synthesizing web browser more information about the content of the web page –Print : Affects a web page’s appearance when it is printed A block of styles that applies to all media types is declared all and enclosed in curly braces To create a block of styles that apply to a single media type such as print, print and enclose the style rules in curly braces. Example 14: CSS media typesExample 14 33

Refrences World wide web 34