1 / 19

I'm the CSS to your HTML

I'm the CSS to your HTML. A quick introduction to Cascading Style Sheets. Some Simple HTML. <html> <head> </head> <body> <h1>Title Text</h1> <p>A paragraph of text for you to read....</ p> </body> </html>. Text file containing HTML. Behind the Scenes of the Browser.

darcie
Download Presentation

I'm the CSS to your HTML

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. I'm the CSS to your HTML A quick introduction to Cascading Style Sheets

  2. Some Simple HTML <html> <head> </head> <body> <h1>Title Text</h1> <p>A paragraph of text for you to read....</p> </body> </html> Text file containing HTML

  3. Behind the Scenes of the Browser Empty Browser Window

  4. Behind the Scenes of the Browser Find first thing to display, Create a box for it at top, extending full width

  5. Behind the Scenes of the Browser It is a h1 element, place within box and give it some simple styling Title Text

  6. Behind the Scenes of the Browser Find next element, create a box for it, below existing Title Text

  7. Behind the Scenes of the Browser It’s a p element, fill to width of window Title Text A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read.

  8. HTML Summary • HTML allows us to provide document CONTENT • The browser displays this content with some basic LAYOUT and STYLING • BUT: CSS allows us complete CONTROL over both layout and styling

  9. Linking HTML to CSS • Several ways to do this • Simplest is tolink the HTML file to a CSS file • In the <head> element of the HTML file: <link href=“style.css” rel=“stylesheet” /> Index.html Style.css

  10. Styling HTML Elements Name of the element h1 { font: arial; color: blue; } Visual style to apply Title Text A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read.

  11. MovingHTML Elements Instead of the “normal” position, place 30px to the right p{ position: relative; right: 30px; } Title Text A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read.

  12. Sizing HTML Elements We can specify exact sizes, or use percentages p{ position: relative; right: 30px; width: 500px; } Title Text A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read. A paragraph of text for you to read.

  13. CSS Summary • We can link an HTML file to a CSS file • With CSS, for each element we can control: • Its visual appearance (font, colour, etc.) • How much space it takes up (size, borders, etc.) • Where it is placed • Relative to its “normal” position • Fixed within the browser window • “Floating” around until there is space for it

  14. <h1> and <p> Are Not Enough! • There is more to a page than headings and paragraphs… • Web pages have logical "areas" Title, links, etc How can we create these “areas”? News, Ads, links, etc. text, text, text,

  15. The <div> Element • Allows us to "group" other bits of HTML • We can give these groups names • Names can be “id” – only one item on the page with that name • Or “class” – any number of items with the same name <div id="heading"> <imgsrc="me.jpg" .... /> <h1>Title Text</h1> </div> <div class=“links"> <a href=“http:: .... /a> • <a href=“http:: .... /a> • <a href=“http:: .... /a> </div>

  16. Styling Divs • We style divs just like elements • But identify them by their names #heading { font-size: 32px; background-color: gray; } Name of div (note the #) Styles to apply Title Text

  17. Styling Smaller Areas • Divs group things together into a single unit • How can we style smaller areas? • The span element groups words together HTML <p>Herman Melville, author of <span class=“booktitle”>Moby Dick</span> was…</p> CSS .booktitle { font-style: italic; font-size: 120%; } Herman Melville, author of Moby Dickwas…

  18. Summary • A Browser lays out and styles HTML in a “default” way • By linking the HTML file to a CSS file we can: • Control the appearance of things • Control the size of things • Control the position of things • By using <divs> and <spans> we can group things together • And control layout and style as above

  19. Where Next? • TT284 Block 1 Part 5 • http://www.w3schools.com/css/ • Get a text editor, a browser and experiment! Thank You For Watching!Music: “Eskaton Upwards” by Torleyavailable from archive.org under aCreative Commons Attribution Share-alike 3.0license

More Related