1 / 13

Creating Your Own Webpage

Creating Your Own Webpage. COSC 1301. Cascading Stylesheets. Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your webpage CSS has selectors We focus on HTML selectors – names of HTML tags CSS: For an HTML element, assign a value to a property

rana-gamble
Download Presentation

Creating Your Own Webpage

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. Creating Your Own Webpage COSC 1301

  2. Cascading Stylesheets Think of: • HTML: content of your webpage • HTML has tags • CSS: presentation and appearance of your webpage • CSS has selectors • We focus on HTML selectors – names of HTML tags CSS: For an HTML element, assign a value to a property Format: For each selector, the properties/values are enclosed in curly braces: property : value ;

  3. External CSS File • Ends in .css extension • Add a link to file style.css in header of your HTML file: <head> <link rel = "stylesheet" href = "style.css"> </head>

  4. Example: style.css body { background-color: #CCFFFF; font-size: 2em; } p { color: red; text-align: center; } a { color: blue; } Background color for body is an aqua color, and font-size is 2 times the default. Text in paragraphs will be red, and will be centered. Text in anchors will be blue.

  5. Another Webpage <!DOCTYPE html> <html> <head> <title> This is my title! </title> <link rel = "stylesheet" href="style.css"> </head> <body> <h1> All About Me </h1> <p> Favorite Foods </p> <ol> <li> pesto </li> <li> sushi </li> <li> pancakes </li> </ol> <p> Favorite Websites </p> <ol> <li> <a href = "http://slashdot.org"> Slashdot </a> </li> <li> <a href = "http://stedwards.edu"> St. Edward's </a> </li> </ol> </body> </html>

  6. Some Units • px: pixels • em: multiple of current font size • 2em is 2 times the current font size • pt: points • %: percentages • in: inches

  7. Colors • Predefined includes: aqua, black, blue, fuchsia, gray, green, lime, navy, maroon, orange, olive, purple, teal, silver, white, gold, yellow • Specify as: • rgb(0, 255, 0) • rgb(0%, 100%, 0%) • #00ff00 • Can select a color (for text) and a background color: h1 { color: yellow; background-color: #CCFFFF; }

  8. Text Properties • font-family • Values: arial, Helvetica, serif, verdana • font-size • Values: bold, normal • font-weight • Values: bold, normal, bolder, lighter • font-style • Values: italic, normal • text-transform • Values: capitalize, uppercase, lowercase • capitalize: capitalizes first letter of every word • uppercase: every letter capitalized

  9. Text Alignment • Property: text-align • Values: left, right, center

  10. Margins, Borders, Padding, Oh My • An element is surrounded by a padding box • Which is surrounded by a border box • Which is surrounded by a margin box • Value of margin, padding: describes the width of the space around Example: h2 { font-size: 1.5em; margin: 20px; padding: 40px; }

  11. Border Properties • Property: border-style • Values: none (no border), dotted, dashed, solid, groove, ridge • Property: border-color • Property: border-width • Values: thin, medium, thick • Properties: border-top-width, border-bottom-width, border-left-width, border-right-width

  12. Border Example h1 { border-style: dotted; border-width: 2px; border-left-width: 10px; border-right-width: 10px; border-color: teal; }

  13. Example table {border-style: solid; color: #333333; border-width: 5px; border-color: #FF0000; width: 100%; height: 20%; text-align: center; border-collapse: collapse; } tr { border-style: dashed; border-width: 2px; border-color: #DD0000; } td{ border-style: solid; border-width: 2px; } th { border-style: solid; border-width: 2px; }

More Related