INTRODUCTION TO CSS. Mohammad Jawad Kadhim

Size: px

Start display at page:

Download "INTRODUCTION TO CSS. Mohammad Jawad Kadhim"

Loreen Crystal Perry
5 years ago
Views:

1 INTRODUCTION TO CSS Mohammad Jawad Kadhim

5 WHAT IS CSS Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server s response can include style sheets, which are simply collections of cascading style instructions. The style sheets can be Included in the server s response In three ways: External style sheet files. Internal style sheet embedded directly in the web page Inline style sheets

6 EXTERNAL STYLE SHEET You link external style sheets into web pages by using the HTML <link> tag. <link href="css/main.css rel="stylesheet" /> You can also use the CSS import statement directly in your style sheet to actually link multiple style sheets url("secondary.css");

7 A single web page can contain multiple style sheet references <!DOCTYPE html> <html> <head> <title>html 5 Sample</title> <link href="primary.css" type="text/css" rel="stylesheet" /> <link href="secondary.css" type="text/css" rel="stylesheet" /> </head> <body> <div>lorem Ipsum</div> </body> </html>

8 INTERNAL STYLE SHEETS Internal style sheets are collections of CSS styles that are stored internally in a single web page. The styles are located inside of the HTML <style> tag, which is generally located in the <head> section of the web page. <head> <title></title> <style type="text/css"> body { } </style> </head>

9 <!DOCTYPE html> <html> <head> <title>html 5 Sample</title> <style type="text/css"> body { font-family: Arial; font-size: medium;} </style> </head> <body> <div>lorem Ipsum</div> </body> </html>

10 INLINE STYLE SHEET Inline style are CSS styles that are applied directly to an individual HTML element using the element s style attribute, which is available on most HTML elements. <!DOCTYPE html> <html> <head> </head> <body> <div style= font-family:arial; >Lorem Ipsum</div> </body> </html>

11 Now lets imagine amazon without CSS

13 TWO CONTENT LAYOUT WITH TABLE First bullet point here Second bullet point here Third bullet point here Class Group A Group B Class Class Class

14 Cascading + Style Sheet

15 THE STYLESHEET A stylesheet is a set of rules defining how an html element will be presented in the browser. These rules are targeted to specific elements in the html document.

16 THE CASCADE The cascade part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements. For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will trump the other.

17 high importance low importance Browser stylesheet Linked (external) stylesheet Embedded (internal) stylesheet Inline (internal) Styles

18 INHERITANCE Most elements will inherit many style properties from their parent elements by default. HTML <body> <div> <ul> <li></li> </ul> </div> </body> Relationship parent of site parent of ul and li, child of body parent of li, child of div and body child of ul, div, and body

20 SPECIFICITY Shortly after styling your first html elements, you will find yourself wanting more control over where your styles are applied. This is where specificity comes in. Specificity refers to how specific your selector is in naming an element.

22 Three terms for describing your styles: CSS rule CSS selector

23 CSS RULE selector {property: value;} Declaration Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair. Together they are called a CSS Rule.

24 CSS RULE the browser is responsible for parsing the styles and applying them to the appropriate HTML elements in the web page. if a style is stored in either an external or internal style sheet, the style will be defined as a CSS rule. Rules are what the browser uses to determine what styling to apply to which HTML elements. Note: inline style do not need to be defined as a rule because they are automatically applied to the element they are included with

25 CSS SELECTOR body {font-family: Arial, Helvetica} p {color: #666666} h1 {font-size: 24px} a {color: blue} The selector associates css rules with HTML elements.

26 Universal Selectors Style should apply to any element in the web page * { font-family: Arial; } Type Selector create a style that applies to a specific type of HTML element P { } font-family: Arial; Descendant Selectors create styles that target HTML elements that are descendants of a specific type of element. div span { font-family: Arial; }

27 Child Selectors The Child selector is similar to the Descendant selector except unlike the Descendant selector, which searches the entire descendant hierarchy of an element, the Child selector restricts its element search to only those elements that are direct children of the parent element. div > span { } font-family:arial; Attribute Selectors Attribute selectors enable you to define a style that is applied to elements based on the existence of element attributes rather than the actual element name. *[href] { font-family:arial; }

28 Adjacent selector Select HTML element that are immediately adjacent to another element type li { color: maroon; } li + li { color: silver; }

29 Class Selectors Allow you to apply a style to any element with a specific class name.title { font-size: larger; font-weight: bold } This CSS rule would then be applied to any element whose class attribute value matched the rule name <div class= title > abcd</div>

30 ID Selectors Allow you to create style that target elements with specific ID value #title { font-size: larger; font-weight: bold } This CSS rule would then be applied to any element whose ID attribute value matched the rule name <div id= title > abcd</div>

31 Selector Grouping When creating CSS rules, CSS allows you to group several selectors together into a single rule. h1, h2, h3 { Color: blue; }

COMS 359: Interactive Media

COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading