1 / 15

Styling Your Webpage

Styling Your Webpage. Make It Look Good. Get Your Steeze Goin’. HTML is really made for structure . F or real style, we use Cascading Style Sheets (CSS) Use style as an an attribute for your block-level elements 3 levels in the CSS hierarchy 1 st – Inline= Within an element

nalani
Download Presentation

Styling Your 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. Styling Your Webpage Make It Look Good

  2. Get Your Steeze Goin’ • HTML is really made for structure.For real style, we use Cascading Style Sheets (CSS) • Use style as an an attribute for your block-level elements • 3 levels in the CSS hierarchy • 1st – Inline= Within an element • 2nd –Internal= Add style rules inside the <head>, to apply to the whole page • 3rd– External= Make a whole file of nothing but style rules that you link to your pages • Inline trumps internal and internal trumps external

  3. Try It Out • The Syntax is like this: • style=“property:value; property:value;” • You can add multiple properties if you separate them with a semicolon Add this to a paragraph block: <p style=“color:blue;”> Now make a new paragraph, but don’t style it Save and refresh. What have you got?

  4. This Could Take Forever You don’t want to have to style every single paragraph do you? There’s a better way, and that’s the Internal Method. So add the following to the head. <head> <style type=“text/css”> p {color:purple; font-size:24px} </style> <head>

  5. What Happened Here? • Why did some text change and some not? • What else do you notice about this?

  6. CSS Selectors The ‘p’ when we wrote p { color: purple; font-size: 24px; } Is what we call a “Selector”, because it selects the element we want to style So let’s try and change the style and alignment of the heading…

  7. id and class attributes • There are 2 selector attributes we use extensively in CSS called “id” and “class” • They function the same way, but we generally use an id only once, and a class multiple times • Say you want to style 3 paragraphs a particular way. You would add a “class” attribute to each paragraph • Make this and copy/paste it twice • <p class=“fuzzy”>Fuzzy Paragraph</p> • Style it like this • .fuzzy { font-family: courier;}

  8. Continued • See how it styled only the paragraphs with the class “fuzzy”? • Now add the attribute id=“fishy” to one of the paragraphs • Style code looks like this: • #fishy {font-family: helvetica;}

  9. Selectors • See how id trumps class? • The selectors are “#” for id and “.” for class • You might not see the use yet, but they are the only way to do things practically

  10. This is Still Too Much Work • Create a new file and name it “style.css” • Cut the <style> section from your webpage and paste it into the style sheet • (not the <style> tags, just the rules) • Add the following line of code within the <head> area • <link rel="stylesheet" type="text/css" href="style.css" /> • Close the webpage and reopen it

  11. The Box Model

  12. Border • Make a new paragraph with id=“slappy” • On your style sheet make a new rule in your style sheet based on that id • #slappy { border: solid 5px blue; }

  13. Margin • Margin is the invisible space outside the border • Let’s use the margin to center the box we made • #slappy { border: solid 5px blue; margin-left: 25%; margin-right: 25%; }

  14. Padding • Padding is the area between the content and the border • Let’s move the content away from right next to the border • #slappy { border: solid 5px blue; margin-left: 25%; margin-right: 25%; padding: 10px; }

  15. Experimenting Easily with Firebug • Working in code, saving, and refreshing the webpage in the browser works, but you can experiment in real time using developer tools built into your browser • Right click on a web page and select “Inspect Element” • You can add or alter style rules and see the result in real time

More Related