Download presentation
Presentation is loading. Please wait.
1
CSS
2
(Cascading Style Sheet)
CSS (Cascading Style Sheet) List of rules
3
Each CSS rule has: Selector Property Value
4
<style type="text/css">
body { color: purple; background-color: #d8da3d } </style>
5
Selector <style type="text/css"> body { color: purple;} </style>
6
Property <style type="text/css"> body { color: purple;} </style>
7
Value <style type="text/css"> body { color: purple} </style>
8
Placed in the head “box”
<!DOCTYPE html> <html> <head> <title>My First Code</title> <style type="text/css"> p{ style info for paragraphs} </style> </head> <body> <h1>My First Heading</h1> <p>My First Paragraph</p> </body> </html>
9
<style type="text/css"> p{ style info for paragraph}
<!DOCTYPE html> <html> <head> <title>My First Page</title> <style type="text/css"> p{ style info for paragraph} </style> <head/> <body> <h1>My First Heading</h1> <p>My First Paragraph</p> </body> </html>
10
<style type="text/css"> h1{ font-family: Arial, Times, serif;
<!DOCTYPE html> <html> <head> <title>My First Code</title> <style type="text/css"> h1{ font-family: Arial, Times, serif; background-color: #00FFFF; position: absolute; top: 50 px; left: 100px } </style> <head/> <body> (etc…)
11
Common Style Sheet tags:
- h1, h2, h3, h4…. - p - body - a:link (before visiting the link) - a:visited (after visiting the link) - div
12
Class <head> <style type="text/css"> .something { color: purple; background-color: #00FFFF } </style> </head> <body> <p class=“something”>Your Text Here</p> </body>
13
ID (IDs are only used once)
#somethingelse { width: 100px; background-color: #d63078} .something { color: purple; background-color: #00FFFF } … <div id=“somethingelse”> <p class=“something”>Your Text Here</p> <p class=“something”>Another Sentence</p> </div>
Similar presentations
