Mastering Cascading Style Sheets (CSS)
"Explore the power of Cascading Style Sheets (CSS) to enhance web content presentation, achieve consistency across web pages, and streamline coding efforts. Learn about CSS properties, examples, fonts, and properties applied to different content types. Discover how CSS is revolutionizing web page design."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Cascading Style Sheets (CSS) Introduction * CSS Objectives * Provide more control over web site content presentation and formatting * Facilitate cross web page consistency * Reduce the amount of coding within a web page to accomplish the desired results * CSS style sheets can be embedded in web page source files or as separate documents * If embedded the CSS definition would be done above the <body> tag * They can facilitate consistent formatting throughout a web site * The CSS statements differ from HTML statements * CSS Properties perform roughly the same function as some HTML tag attributes * There are more many more Properties * A set of Properties can be applied against more than one element in a single CSS statement * CSS is obsoleting HTML in web page source coding (deprecating) * An excellent source for CSS properties is: http://www.w3schools.com/cssref/default.asp
Cascading Style Sheets (CSS) Introduction Font Property Example Change the default format for h1 header element With CSS Without CSS <html> <head> <title> CSS Rules</title> </head> <style type=text/css> h1 { color: white; background-color: blue; font-size: 120%; } </style> <html> <head> <title> CSS Rules</title> </head> <body> <h1> Nice Header?</h1> </body> </html> <body> <h1> Nice Header?</h1> </body> </html>
Properties Apply Against Content Type Examples of the Content Types *Border *Background *Font *List *Marquee *Padding *Table
Font Properties Font Properties include: font font-family Sets all the font properties in one declaration Specifies the font family for text (e.g. comic-sans) font-size Specifies the font size of text (e.g. %, pixels, named (e.g. small)) Specifies the font style for text font-style font-variant Specifies whether or not a text should be displayed in a small-caps font Specifies the weight of a font (e.g. lighter, bold, bolder) font-weight
Font Property Example <html> <head> <title> your name </title> </head> <style type=text/css> P { font-family: gungsuh; font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 150%; color: red; } </style> <body> Business as usual until we hit the p-tag <p>Wow, what a difference a p-tag makes </p> Back to boring </body> </html>
Font Properties Font Properties include: color direction letter-spacing Sets the color of text Specifies the text direction/writing direction Increases or decreases the space between characters in a text Sets the line height Specifies the horizontal alignment of text Specifies the decoration added to text Specifies the indentation of the first line in a text- block Controls the capitalization of text Sets the vertical alignment of an element Specifies how white-space inside an element is handled Increases or decreases the space between words in a text line-height text-align text-decoration text-indent text-transform vertical-align white-space word-spacing
Table Properties Table Properties include: border-collapse Specifies whether or not table borders should be collapsed Specifies the distance between the borders of adjacent cells Specifies the placement of a table caption Specifies whether or not to display borders and background on empty cells in a table border-spacing caption-side empty-cells
CSS Table Example <html> <head> <title> huh </title> </head> <style type=text/css> table { border-collapse: collapse; } table, td, th { border:1px solid blue;} th { background-color: blue; color: white; } td { padding: 10px 20px 10px 20px;} </style> Without CSS <html> <head> <title>Huh</title> </head> <body> <table border="2px"> <tr> <th>Name</th> <th>Address</th> </tr> <tr> <td>Lightning T. Mascot</td> <td>E.Main St, M'boro TN</td> </tr> </body> </html> <body> <table> <tr> <th>Name</th> <th>Address</th> </tr> <tr> <td>Lightning T. Mascot</td> <td>E.Main St, M'boro TN</td> </tr> </body> </html>
Classes *Classes provide a shorthand method of formatting *They are defined in the style section (internal or external) *When defining names they are prefaced by a period symbol *When applied the period is not added to the name Definition Use in Body <style> .blueit { color: blue; font-size: 150%; font-style: italic; font-weight: bold; font-variant: small-caps; } </style> <p> Hello </p> <p class = blueit > I m so blue </p>
Span Element *Span allows for limiting the scope of a format change *Best applied for non-trivial changes *Span can be used with or without a Class *Class allows for multiple Span selections <html> <title> huh </title> <style type=text/css> span { color: blue; font-size: 150%; font-style: italic; font-weight: bold; font-variant: small-caps; } </style> <html> <title> huh </title> <style type=text/css> .blueit {color: blue;} .redit {color: red;} </style> <body> <p> I'm <span class=redit> so </span> <span class=blueit> blue </span> </p> </body> </html> <body> <table> <p> I'm so <span>blue</span> boohoo</p> </body> </html>
Div Element *Div element enables different formatting of logical sections of a page , e.g: *Banners *Navigation tabs *Page footer *Special formatting such as indenting content *Div elements can be nested *The Div element is an XHMTL construct that works within the CSS environment *Multiple Div elements can be defined within a page or style sheet, distinguished via unique names *Div element names must contain # (hash) sign, e.g.: col#tabs #floatleft
Div Element Example Use in Body Definition <div id=offset500> <h2>The influences to the Blues included </h2> <ul> <li>Spirituals</li> <li>Work Songs</li> <li>Field Hollers</li> <li>Shouts</li> <li>Chants</li> <li>Rhymed Simple Narrative Ballads</li> </ul> <style> #offset500 { </style> position: relative; left: 500; } Results
