Cascading Style Sheets
Overview of Cascading Style Sheets (CSS) See what is possible with CSS: ◦ Visit http://www.csszengarden.com 2
Types of Cascading Style Sheets Inline Styles Embedded Styles External Styles Imported Styles 3
Cascading Style Sheets Inline Styles ◦ body section ◦ HTML style attribute ◦ apply only to the specific element Embedded Styles ◦ head section ◦ HTML style element ◦ apply to the entire web page document External Styles ◦ Separate text file with .css file extension ◦ Associate with a HTML link element in the head section of a web page 4
CSS Syntax Style sheets are composed of "Rules" that describe the styling to be applied. Each Rule contains a Selector and a Declaration The Selector is the HTML element to which the formatting will be applied 5
Common Formatting CSS Properties Common CSS Properties: ◦ background-color ◦ color ◦ font-family ◦ font-size ◦ font-style ◦ font-weight ◦ line-height ◦ margin ◦ text-align ◦ text-decoration ◦ width 6
Using Color on Web Pages Computer monitors display color as intensities of red, green, and blue light RGB Color The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values. 7
Hexadecimal Color Values # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color #000000 black #FFFFFF white #FF0000 red #00FF00 green #0000FF blue #CCCCCC grey 8
Web Color Palette A collection of 216 colors Display the most similar on the Mac and PC platforms Hex values: 00, 33, 66, 99, CC, FF 9
Color Names Many colors have names recognized by most browsers 10
A Third Way to express color rgb(R, G, B) Decimal values 0-255 are used to represent the saturation of red, green, and blue 11
External Style Sheets CSS style rules are contained in a text file separate from the HTML documents. The External Style Sheet text file: ◦ extension ".css" ◦ contains only style rules ◦ does not contain any HTML tags 12
External Style Sheets ◦ Multiple web pages can associate with the same external style sheet file. site.css index.html body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; clients.html font-size:90%; } h2 {color: #003366; font-size: 16px; about.html font-weight: bold; } Etc… 13
link Element A stand-alone tag placed in the header section Purpose: associates the external style sheet file with the web page. Example: <link rel="stylesheet" type= "text/css" href="color.css"> 14
Multiple Style Sheets <head> <title>Town Hall</title> <link rel="stylesheet" type="text/css" href="../styles/reset.css" media="screen"> <link rel="stylesheet" type="text/css" href="../styles/main.css" media="screen"> <link rel="stylesheet" type="text/css" href="../styles/print.css" media="print"> </head>
CSS Embedded Styles Configured in the header section of a web page. Use the HTML <style> element Apply to the entire web page document Style declarations are contained between the opening and closing <style> tags Example: Configure a web page with white text on a black background <style> body { background-color: #000000; color: #FFFFFF; } </style> 16
Configuring Text with CSS CSS properties for configuring text: ◦ font-weight: bold ◦ Configures the boldness of text ◦ font-style: italic ◦ Configures text to an italic style ◦ font-size ◦ Configures the size of the text ◦ font-family ◦ Configures the font typeface of the text 17
The font-size Property Accessibility Recommendation: Use em or percentage font sizes – these can be easily enlarged in all browsers by users 18
The font-family Property Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name p {font-family: Arial, Verdana, sans-serif;} 19
span Element Purpose: ◦ configure a specially formatted area displayed in-line with other elements, such as within a paragraph. It is similar to the div element because it is a generic way to configure a section on a page ◦ span is an inline element: there is no additional empty space above or below a span ◦ div is a block element: there is empty space above and below 20
span Element Example CSS: .companyname { font-weight: bold; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; } HTML: <p>Your needs are important to us at <span class ="companyname ">Acme Web Design</span>. We will work with you to build your Web site.</p> 21
Centering Page Content with CSS #container { margin-left: auto; margin-right: auto; width:80%; } 22
Comments Comments are used in all programming languages to provide information to anyone reading the code HTML comments don’t show in the Browser but can provide details about the code. HTML comments look like: <!-- --> CSS comments look like: /* */ All HTML and CSS pages should have a comment explaining the purpose of the page, the author, and any other helpful comments. 23
The “Cascade” 24
The Box Model Content ◦ Text & web page elements in the container Padding ◦ Area between the content and the border Border ◦ Between the padding and the margin Margin ◦ Determines the empty space between the element and adjacent elements 25
Configure Margin with CSS ◦ The margin property ◦ Related properties: ◦ margin-top, margin-right, margin-left, margin-bottom ◦ Configures empty space between the element and adjacent elements ◦ Examples h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }
Configure Padding with CSS ◦ The padding property ◦ Related properties: ◦ padding-top, padding-right, padding-left, padding-bottom ◦ Configures empty space between the content of the HTML element (such as text) and the border ◦ Syntax example h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }
Box model in Action 28
Normal Flow Browser displays elements in the order they are coded in the Web page document <div class="div1" > This is the first box. </div> <div class="div2" > This is the second box. </div> . div1 { width: 2 00px; height: 2 00px; background-color: #D1ECFF; border: 3px dashed #000000; padding: 5px; } . div2 { width: 100px; height: 100px; background-color: #ffffff; border: 3px ridge #000000; margin: 10px; padding: 5px; }
Normal Flow If elements are nested: <div class=" div1" > This is the outer box. <div class=" div2" > This is the inner box. </div> </div> With the same styles applied: . div2 { width: 100px; height: . div1 { width: 2 00px; height: 200px; background-color: #ffffff; background-color: #D1ECFF; border: 3px ridge #000000; border: 3px dashed #000000; margin: 10px; padding: 5px; padding: 5px; } }
float Property h1 { background-color:#cccccc; Elements that seem to “float" padding:5px; on the right or left side of color: #000000; } either the browser window or p { font-family:Arial,sans-serif; another element are often } configured using the float #yls {float:right; property. margin: 0 0 5px 5px; Use float: left; or border: solid; float: right; } 31
clear Property The h2 text Useful to “clear” or is displayed in normal terminate a float flow. Values are: ◦ clear: left; ◦ clear: right; ◦ clear: both clear: left; was applied to the h2 . Now the h2 text displays AFTER the floated image.
overflow Property Intended to configure the display The of elements on a Web page. background does not However, it is useful to “clear” or extend as far terminate a float before the end as you’d of a container element expect. Values are auto, hidden, and scroll overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image .
W3C CSS Validation http://jigsaw.w3.org/css-validator/ 34
Recommend
More recommend
