13
CSS Precise Aesthetic Control
| Date post: | 22-Dec-2015 |
| Category: |
Documents |
| Upload: | eugene-norby |
| View: | 218 times |
| Download: | 1 times |
CSSPrecise 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 pageo HTML page marks up content/CSS defines how content will look
• Will define colors, positions, white space, behaviors, and much more
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
Block vs Inline• The majority of elements are “Block.” This means
they will start on a new line on the screeno 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.
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<a href=“http://twitter.com”>
Here</a></p>
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
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
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 properties as you need on a
selector.• Order of declarations (usually) does not matter
Hooking into Selectorsh1 {
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;
}
ID HookingHTML:
<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
Class HookingHTML:
<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
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.
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).
