Download presentation
Presentation is loading. Please wait.
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 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> <li> <a href = " Slashdot </a> </li> <li> <a href = " St. Edward's </a> </li> </body> </html>
6
Some Units px: pixels em: multiple of current font size pt: points
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 font-size font-weight font-style
Values: arial, Helvetica, serif, verdana font-size Values: %, em, px font-weight Values: bold, normal, light, 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; th {
Similar presentations
