1 / 8

Cascading Style Sheet Basics

Cascading Style Sheet Basics. Pepper. Looking at the HTML. See the <> surrounding tags See head, body, paragraph, header See the ending tags</…> See the list <ul> </ul> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>A page with no Styles</title> </head>

erasmus-hawkins
Download Presentation

Cascading Style Sheet Basics

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. Cascading Style Sheet Basics Pepper

  2. Looking at the HTML See the <> surrounding tags See head, body, paragraph, header See the ending tags</…> See the list <ul> </ul> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>A page with no Styles</title> </head> <body> <!-- Main content --> <h1>A page with no styles</h1> <p>Welcome to my page with no Styles, only HTML coding. <p>I know the links go nowhere, but I will soon put those links into a nice table. They would go somewhere if they pointed to pages that existed. <p>This page is just a normal page. <!-- Sign and date the page, it's only polite! --> <address>Made <br> 6/2007</address> <!-- Site navigation menu --> <ul > <li><a href="index.html">Home page</a> <li><a href="links.html">Links</a> </ul> </body> </html> http://home.adelphi.edu/~pe16132/csc170/web/step/css/css.html

  3. Simple Style inside an HTML tag • Inside the <>, put a style = “something” Change from: <h1>A page with no styles</h1> TO: <h1 style="color:blue;text-align:center">A page with no styles</h1> • Pairs of Property name: choice • List of properties: http://www.w3schools.com/cssref/default.asp

  4. Navigation Bar Styling Goal: set the physical location (em’s over from the left) of the body of the page, and set the physical location (em’s over from the left) of the navigation words. To set the list of navigation links to always start in the upper left: <ul style = " position: absolute; top: 2em; left: 1em; width: 9em"> To pad 11 ems over from the left, set your body to: padding-left: 11em; <body style = “padding-left: 11 em”>

  5. Move your style up to the header • Same style can move up to the header as an internal style sheet • For UL, we will want some lists on our page not to be in the upper left, so make it a type of UL with ul.navbar <head> <style type="text/css"> body {padding-left: 11em; } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } </style> </head> For UL, to get the .navbar class : <ul class="navbar"> http://home.adelphi.edu/~pe16132/csc170/web/step/css/css3.html

  6. Move Out to External Style Sheet • Inside the <head> </head> : <link rel="stylesheet" href="mystyle.css"> The external stylesheet would contain exactly what was in the internal style sheet: body {padding-left: 11em;} ul.navbar{ list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

  7. CSS Guides • Examples of each level of styling http://home.adelphi.edu/~pe16132/csc170/web/step/csslinks.htm • Tutorials: • good tutorial • tutorial 2 - with • command reference from w3schools • more on ids • more on classes • positioning navigation bars

  8. Priority of Style Levels HTML pages can have the same style repeated in four forms in one page. It has to know which takes priority. Here is the order, with the highest number being the one that will be used. • Browser default • External style sheet • Internal style sheet (inside the <head> tag) • Inline style (inside an HTML element) called inline

More Related