1 / 17

CSS

CSS. Precise Aesthetic Control. Cascading Style Sheets. Though they can be put in HTML header, usually a separate page that the HTML links to Contains style commands for elements and tags on the HTML page HTML page marks up content/CSS defines how content will look

gizi
Download Presentation

CSS

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. CSS Precise Aesthetic Control

  2. Cascading Style Sheets • Though they can be put in HTML header, usually a separate page that the HTML links to • Contains style commands for elements and tags on the HTML page • HTML page marks up content/CSS defines how content will look • Will define colors, positions, white space, behaviors, and much more

  3. Inside the Box • Imagine every HTML element has an invisible box around it • With CSS we can define colors, borders, positions, arrangements, margins, etc. of what these boxes will do. <h1>This is an H1 heading</h1> This is an H1 heading

  4. Block vs Inline • The majority of elements are “Block.” This means they will start on a new line on the screen • H1-H9, <p>, <a>, <img>, <ul>, <div> • Many of these come with automatic margins on top and bottom (lists automatically push out to the right) • A Firefox extension like Firebug or “Inspect Element” in Chrome will help show you these so you can alter them with CSS.

  5. Inline • Inline elements do not start on a new line, rather they flow within the text. • This word is bold. • <p>This word is <b>bold</b> • <p>Follow me<ahref=“http://twitter.com”> Here</a></p>

  6. IDs vs Classes • So far we have written simple tag elements and added some basic attributes • <p>This is a paragraph.</p> • <imgsrc=“picture.jpg.” alt=“description of picture” /> • The only problem here is that CSS descriptions of how paragraphs and images look will affect ALL of then site wise in the same manner. • Sometimes we want a certain element to behave differently than the majority of that element

  7. Classes • Classes allow us to make an element behave differently if we apply a specific class attribute to it. <p class=“stylized”>This paragraph will have it’s own unique paragraph styling.</p> • Class names can be anything, but they should be descriptive of what you make them do. • Classes can be reused all over a page, even on different elements, as long as you want the styling of that class on something

  8. IDs • IDs are similar to classes but they cannot be reused. When you give an element an ID, you make it uniquely special. <ul id=“navigation”> <li>Home</li> <li>Contact</li> </ul>

  9. IDs • An element can have only one ID • Good • <div id=“leftcolumn”> • Bad • <div id=“leftcolumn” id=“stylized”> • Each page can have only one element with that ID • This is different from classes which can be used all over the page on different elements.

  10. Linking to Style Sheet • Create a new document in text editor and “Save As” a .css file • Type this into your header: <link href="stylesheet.css" rel="stylesheet" type="text/css" /> • The bolded part above should correspond with whatever you named the style sheet file • Note this is a self-closing tag even though normal links are not

  11. Format: Selector and Declarations h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } • Element being defined • Open moustache bracket • Property followed by colon • Value followed by semi-colon • Close moustache bracket

  12. Selectors & Declarations h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } • Properties cannot be made up. There are officially named properties and must be spelled exactly. • You can put as many declarations as you need on a selector. • Order of declarations does not matter

  13. Hooking into Selectors h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } • Note that tags are selected/hooked (the part before the brackets) merely by writing the tag name. body { background-color: black; }

  14. ID Hooking HTML: <div id=“container”> CSS: #container { width: 800px; height: auto; } • IDs are hooked to from the CSS with a hashtag in front of the ID name

  15. Class Hooking HTML: <p class=“stylized> CSS: .stylized { color: green; font-size: 20px; } • Classes are hooked to from the CSS with a period in front of the class name

  16. Multiple Selectors doing the Same Thing a:link, a:visited { text-decoration: none; color: blue; } • When stylizing multiple selectors the same way, just put a comma between them in the selection section of your CSS command.

  17. Inheritance • When elements are nested inside other ones, they become “children” to the “parent” element they are inside of. <body> <h1>Hey</h1> <p>Some paragraph</p> </body> Because of this, we can define a font on the body (which is everything) and that same font will cascade to everything in the document. So you don’t need to define a font for the paragraphs, lists, etc. (unless you want them to be different from what you define on the body).

More Related