1 / 36

Lecture # 33 Cascade Style Sheets (CSS)

Lecture # 33 Cascade Style Sheets (CSS). Cascade Style Sheets (CSS): Preserving a consistent “ look and feel ” of a website across multiple pages. Content vs Style. Before version 4.0 of HTML, style information was intermixed with content. Version 4.0 and above separate HTML into

athena-alexander
Download Presentation

Lecture # 33 Cascade Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture # 33 Cascade Style Sheets (CSS)

  2. Cascade Style Sheets (CSS):Preserving a consistent “look and feel” of a website across multiple pages

  3. Content vs Style • Before version 4.0 of HTML, style information was intermixed with content. • Version 4.0 and above separate HTML into • Content – what is in an html page • Described in the “HTML” presentation • Style – how does that information look • Some tags were deprecated: <bold>, <center>, <font> • Additional capabilities were added • Style is specified by “css” or cascade style sheets • For a tutorial on CSS see *http://www.w3schools.com/css/demo_default.htm * http://pagetutor.com/css_tutor/index.html For free access to many books on CSS go Here and search for “css”

  4. CSS Properties Properties: what “look and feel” features do you want to define? • Background properties – what does the background look like • Border and outline properties – what do borders look like • Dimension properties – how tall and wide are html elements • Font properties – what is the font of the text • List properties – what do lists look like • Margin properties – what do margins look like • Padding properties – what does the padding around elements look like • Positioning properties – where does an element appear on the page • Table properties – what does a table look like • Text properties – everything about the text except the font • Others: Generated content properties, print properties, pseudo-classes/elements properties

  5. CSS Saves a Lot of Work! • CSS defines HOW HTML elements are to be displayed. • Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

  6. Understanding Style Rules A Style Ruleis composed of two parts: a selector and a declaration. TH {color: red;}. The Selectorindicates the element to which the rule is applied. The Declarationdetermines the property values of a selector. Declaration Selector

  7. Understanding Style Rules The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

  8. Declaration Syntax • CSS declarations end with ; • Groups are surrounded by { … }: • p {color:red;text-align:center;} • To improve readability: • p{color:red;text-align:center;} CSS Comments begin with "/*", and end with "*/": • /*This is a comment*/

  9. The id and class Selectors • In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". • The id Selector • The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a "#". • The style rule below will be applied to the element with id="para1": • Example • #para1{text-align:center;color:red;}

  10. The class Selector • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. • This allows you to set a particular style for any HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a "." • In the example below, all HTML elements with class="center" will be center-aligned: • Example • Below, all p elements with class="center" will be center-aligned: p.center {text-align:center;}

  11. Three Ways to Insert CSS • Internal style sheet - part of the current html file • Inline style - imbedded in the html • External style sheet - stored in a separate .css file

  12. Internal Style Sheet Use when a single document has a unique style: <head><style type="text/css">hr {color:red;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

  13. Inline Styles Can be used for local override of styles set for the same Selector externally: For example, an external style sheet has these properties for the h3 selector: h3{color:red;text-align:left;font-size:8pt;} And an internal style sheet has these properties for the h3 selector: h3{text-align:right;font-size:20pt;} The properties for h3 will be: color:red;text-align:right; Color is inherited from external style sheet font-size:20pt; Text-alignment, font-size from internal style sheet

  14. Demos of CSS Internal & Inline Styles Go to http://www.w3schools.com/css/demo_default.htm

  15. External Style Sheet • Ideal for applying style to many pages. • Change the look of an entire Web site by changing the .css file. • Each page must link to the style sheet using the <link> tag: <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> • Example of a .css style sheet file: hr {color:red;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

  16. Demos of CSS External Style Sheets

  17. Font Family • The font family of a text is set with the font-family property. • The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. • p{font-family:"Times New Roman", Times, serif;}

  18. Color Values • Several properties take a color value. • There are several ways to specify colors. Here are 2 (For more information go here.) • Use standard names: body {background-color:yellow} • Makes entire web page background yellow body {background-color:#FFFF00}

  19. Measurement Values • Width, height, and length properties require integer values representing “amounts”. • Specify using units such as pixels, points, percentages, ems, inches, millimeters, and centimeters. For more information see http://www.w3schools.com/css/css_units.asp. • Examples: img {width: 100px; height:100px} Specifies width and height in terms of pixels img {width: 50%; height:50%} Specifies width and height as a percent of its enclosing block

  20. <div> tags • <div> tag: a paired tag • used primarily to group elements so they can be formatted using CSS style properties

  21. Layout Model • All HTML elements are considered boxes • In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. • The box model illustrates how the CSS properties: margin, border, and padding, affects the width and height of an element.

  22. Layout ModelContinued • When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.

  23. Layout ModelContinued • If an element had the following properties: width:250px; padding:10px; border:5px solid gray; margin:10px; • It would be 300px wide

  24. What does Cascade Mean? • Properties of one style sheet or style definition override another • Internal overrides External • Inline overrides Internal

  25. Some Useful Properties • Don’t expect you to memorize them. • Do expect you to be able to look them up • Here • Or, for books on CSS go Here; search for “css” • Google is your friend • We will introduce several CSS properties • Inherited properties • Inherited from parent or containing element

  26. Background Properties PropertyDescription background Sets background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated

  27. Margin Properties PropertyDescription margin Sets all the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element

  28. Border and Outline Properties PropertyDescription border Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one declaration border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders outline Sets all the outline properties in one declaration outline-color Sets the color of an outline outline-style Sets the style of an outline outline-width Sets the width of an outline

  29. Padding Properties PropertyDescription padding Sets all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element

  30. Dimension Properties PropertyDescription height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element

  31. Font Properties PropertyDescription font Sets all the font properties in one declaration font-family Specifies the font family for text font-size Specifies the font size of text font-style Specifies the font style for text font-variant Specifies whether or not a text should be displayed in a small-caps font font-weight Specifies the weight of a font

  32. Text Properties PropertyDescription color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies indentation of first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text vertical-align Sets the vertical alignment of an element white-space Specifies handling of white-space inside element word-spacing Increases/decreases space between words in a text

  33. List Properties PropertyDescription list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies where to place the list-item marker list-style-type Specifies the type of list-item marker

  34. Positioning Properties PropertyDescription bottom Sets the bottom margin edge for a positioned box clear Specifies sides where other float elements not allowed clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed display Specifies the type of box an element should generate float Specifies whether or not a box should float left Sets the left margin edge for a positioned box overflow Specifies what happens if content overflows box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box visibility Specifies whether or not an element is visible z-index Sets the stack order of an element

  35. Table Properties PropertyDescription border-collapse Specifies whether or not table borders should be collapsed border-spacing Specifies distance between borders of adjacent cells caption-side Specifies the placement of a table caption empty-cells Specifies whether or not to display borders and background on empty cells in a table table-layout Sets the layout algorithm to be used for a table

  36. Examples • Many more examples can be found at http://www.w3schools.com/css/

More Related