CSS



important distinction between HTML and CSS. HTML markup should provide semantic information about your content—not presentational information. In other words, HTML should define the structure of your document, leaving its appearance to CSS.
The pseudo-obsolete <b> and <i> elements are classic examples of this. They used to stand for “bold” and “italic”, respectively, but HTML5 attempted to create a clear separation between a document’s structure and its presentation. Thus, <i> was replaced with <em>, since emphasized text can be displayed in all sorts of ways aside from being italicized (e.g., in a different font, a different color, or a bigger size). Same for <b> and <strong>.



As we’ll discuss further in Responsive Images, pixel-based image formats need to be twice as big as you want them to appear on retina displays. To get our pixel-based images down to the intended size (75×75), we can use the <img/> element’s width attribute. In images.html, update all of our pixel-based images to match the following:


<meta charset='UTF-8'/>


body {
  color: #414141;               /* Dark gray */
  background-color: #EEEEEE;    /* Light gray */
}

Why did we pick shades of grays instead of black and white? Using a #000000 background with a #FFFFFF text color is too high of a contrast. It makes it look like the page is vibrating, which can be very distracting for readers.

px vs em

px (pixel) and em (pronounced like the letter m). The former is what you would intuitively call a pixel, regardless of whether the user has a retina display or not, and the latter is the current font size of the element in question.
On retina displays hte # of pixels should be double to maintain size

The em unit is very useful for defining sizes relative to some base font. In the above diagram, you can see em units scaling to match a base font size of 12px, 16px, and 20px.

body {
  color: #414141;               /* Dark gray */
  background-color: #EEEEEE;    /* Light gray */
  font-size: 18px;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

This sets our base font size for the document to 18px, then says that our <h1> elements should be twice that size and our <h2>’s should be 1.6 times bigger. If we (or the user) ever wanted to make the base font bigger or smaller, em units would allow our entire page to scale accordingly. 


font-family
accepts multiple values because not all users will have the same fonts installed. 

font-family: "Helvetica", "Arial", sans-serif;

the browser tries to load the left-most one first (Helvetica), falls back to Arial if the user doesn’t have it, and finally chooses the system’s default sans serif font.


ul {
  list-style-type: circle;    
}

ol {
  list-style-type: lower-roman;
}

 none value allows the menu’s list items to be styled more like buttons. In the Advanced Positioning chapter, we’ll actually use this technique to create the navigation menu shown below.

This is good example of the separation of content from presentation. A navigation menu is an unordered list, but it also makes sense to display them as buttons instead of a typical bulleted list. Intelligently designed HTML allows search engines to infer the structure of our content, while CSS lets us display it to humans in beautiful ways.

custom bullets for <li> elements with the list-style-image property



The other common value for text-decoration is line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins> and <del> elements instead of adding a line-through style to, say, an ordinary <p> element.

CSS Box Model

Headings Are Block Elements.Paragraphs are blocks, too. However, <em> and <strong> elements are not. They are inline elements.

  • Block boxes always appear below the previous block element. This is the “natural” or “static” flow of an HTML document when it gets rendered by a web browser.

  • The width of block boxes is set automatically based on the width of its parent container. In this case, our blocks are always the width of the browser window.

  • The default height of block boxes is based on the content it contains. When you narrow the browser window, the <h1> gets split over two lines, and its height adjusts accordingly.

  • Inline boxes don’t affect vertical spacing. They’re not for determining layout—they’re for styling stuff inside of a block.

  • The width of inline boxes is based on the content it contains, not the width of the parent element.


We can override the default box type of HTML elements with the CSS display property. For example, if we wanted to make our <em> and <strong> elements blocks instead of inline elements
display: block;

This comes in handy when you’re trying to turn <a> elements into buttons or format <img/> elements (both of these are inline boxes by default).

it’s almost never a good idea to turn <em> and <strong> into block elements, so let’s turn them back into inline boxes by changing their display property to inline

CSS box model
  • Content – The text, image, or other media content in the element.
  • Padding – The space between the box’s content and its border
padding: 50px;
OR
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
OR
padding: 20px 10px; /* Vertical Horizontal */
OR
padding: 20px 0 20px 10px; /* Top Right Bottom Left */


You can use any unit for the padding of an element, not just pixels. Again, em units are particularly useful for making your margins scale with the base font size.

  • Border – The line between the box’s padding and margin.
    • border: 1px solid #5D6063;     

    • they’re also invaluable for debugging. When you’re not sure how a box is being rendered, add a border: 1px solid red; declaration to it
  • Margin – The space between the box and surrounding boxes.
    • vertical margin collapse When you have two boxes with vertical margins sitting right next to each other, they will collapse. Instead of adding the margins together like you might expect, only the biggest one is displayed.
to prevent the margins from collapsing. 
1) put another invisible element in between them:

<p>Paragraphs are blocks, too. <em>However</em>, &lt;em&gt; and &lt;strong&gt;
elements are not. They are <strong>inline</strong> elements.</p>

<div style='padding-top: 1px'></div>  <!-- Add this -->

<p>Block elements define the flow of the HTML document, while inline elements do not.</p>
2) Use padding. this only works if you’re not using the padding for anything else
3) Stick to a bottom-only or top-only margin convention.

Padding or Margin?
  • The padding of a box has a background, while margins are always transparent.
  • Padding is included in the click area of an element, while margins aren’t.
  • Margins collapse vertically, while padding doesn’t (we’ll discuss this more in the next section).
Inline boxes completely ignore the top and bottom margins, but respond to padding, however, it won’t affect the vertical layout of the surrounding boxes.
The rationale behind this goes back to the fact that inline boxes format runs of text inside of a block, and thus have limited impact on the overall layout of a page. If you want to play with the vertical space of a page, you must be working with block-level elements

So, before you start banging your head against the wall trying to figure out why your top or bottom margin isn’t working, remember to check your display property. Trust us, this will happen to you eventually.



a generic box purely for the sake of styling a web page. This is what <div> and <span> are for.
The only real difference between a <div> and a <span> is that the former is for block-level content while the latter is meant for inline content.

for an explicit dimension, like a sidebar that’s exactly 250 pixels wide. For this, CSS provides the width and height properties.

The button doesn't get smaller if you make the browser smaller

Also notice that if you make the button’s title longer, it will automatically wrap to the next line, and the element will expand vertically to accommodate the new content. You can change this default behavior with the white-space and overflow properties.


box-sizing: content box / border box

content box:
The width and height properties only define the size of a box’s content, Its padding and border are both added on top of whatever explicit dimensions you set. 

This explains why you’ll get an image that’s 244 pixels wide when you take a screenshot of our button, despite the fact that it has a width: 200px declaration attached to it.


Imagine trying to fill a 600px container with three boxes that are all width: 200px, but they don’t fit because they all have a 1px border (making their actual width 202px).


box-sizing: border-box;
This forces the actual width of the box to be 200px—including padding and borders. Of course, this means that the content width is now determined automatically

This is much more intuitive, and as a result, using border-box for all your boxes is considered a best practice among modern web developers.



Horizontally aligning block-level elements
“auto-margins” for center alignment, 

When you set the left and right margin of a block-level element to auto, it will center the block in its parent element.

  width: 200px;
  box-sizing: border-box;  /* Add this */

  margin: 20px auto; /* Vertical  Horizontal */

Note that this only works on blocks that have an explicit width defined on them. Remove that width: 200px line, and our button will be the full width of the browser, making “center alignment” meaningless.

“floats” for left/right alignment

 “flexbox” for complete control over alignment.


resetting styles
Notice that white band around our page? That’s a default margin/padding added by your browser. Different browsers have different default styles for all of their HTML elements, making it difficult to create consistent stylesheets.


It’s usually a good idea to override default styles to a predictable value using the “universal” CSS selector (*) to the top of our css file

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This selector matches every HTML element, effectively resetting the margin and padding properties for our web page. We also converted all our boxes to border-box, which, again, is a best practice.

You’ll find a similar reset at the top of almost every global CSS stylesheet on the web. They can get a whole lot more complicated, but the three simple declarations shown above allow us to confidently tweak the CSS box model for our own purposes without worrying about unforeseen interactions with default browser styles.



let’s try to create a fixed-width layout using the auto-margin technique that we learned in the previous chapter. First, wrap our entire document in a generic <div class='page'>
.page {
  width: 600px;
  margin: 0 auto;
}

Multiple classes    <div class='button call-to-action'>Button Two</div>
Styles shared by both buttons can live in the .button class (as they already do), and styles specific to the second button reside in the .call-to-action class (be sure to add this after the .button rule)

Order
- The order of the class attribute in our HTML element has no effect on override behavior. 
- Multiple classes on a single element are applied “equally” (for lack of a better term), 
- so the precedence is determined solely by the order of the rules in styles.css. 


descendant selectors
.classname tag

pseudo-classes for links
a:link – A link the user has never visited.
a:visited – A link the user has visited before.
a:hover – A link with the user’s mouse over it.
a:active – A link that’s being pressed down by a mouse (or finger).

OR combine them together a:visited:hover

To convert an a to botton:

 <a class='button' href='nowhere.html'>Button One</a>
<a class='button call-to-action' href='nowhere.html'>Button Two</a>

.button:link,                
.button:visited {             
  display: block;             
  text-decoration: none; 

  color: #FFF;                
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;

  width: 200px;
  margin: 20px auto;
}

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

The great part about this is that all the styles we just defined are entirely reusable. Stick a .button class on any HTML element, and you’ll turn it into an interactive button.

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Yellow */
}

.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Light yellow */
}

.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Yellow */
}

:last-of-type     selects the final element of a particular type in its parent element.
p:last-of-type {       // add some space after the last paragraph
  margin-bottom: 50px;
}


ID selectors have higher specificity than class selectors,


This can get very confusing. It’s such a big problem that an entire methodology called “BEM” has evolved. BEM attempts to make CSS rules more reusable by making everything a class selector. This completely eliminates the potential for specificity issues.

BEM is outside the scope of this tutorial. The takeaway here is that CSS rules are not necessarily applied in sequential order, but you should try to make the browser do so by writing CSS that uses the same specificity.



Floats

control over the horizontal position of an element

<div class='page'>
  <div class='menu'>Menu</div>
  <div class='sidebar'>Sidebar</div>
  <div class='content'>Content</div>
  <div class='footer'>Footer</div>
</div>

float: right; // left ; none; // revert to default float

By “floating” the sidebar to the left:
- we’re telling the browser to align it to the left side of the page.
- also tells surrounding elements that they can flow around the sidebar instead of beginning underneath it. (ignore it)

It’s as if the sidebar is inside the .content block, so any HTML markup in .content would wrap around the sidebar’s box.



We now have all the tools necessary to align block-level elements: floats for left/right alignment and auto-margins for center alignment. 
Remember that this only applies to block boxes. Inline boxes are aligned with the text-align property
Floated boxes always align to the left or right of their parent element.

we started with .page to center everything, then we left-aligned a sidebar inside that centered page.


Float adds a third dimensionality to blocks. each float block rizes in the Z dimension and floats either left or right exactly in the position it was before. Other subsequent floats of other elements brings them to the same Z

floated boxes are removed from the normal flow of the page. The height of our floated elements don’t contribute to the vertical position of the footer, so it simply sticks itself below the last element that wasn’t floated.


We can see this more clearly by adding a red border around our .page element:

.page {
  width: 900px;
  margin: 0 auto;
  border: 1px solid red;  /* Add this */
}
Notice how the border is only around the .menu and .footer elements. It’s as if the floated elements weren’t even there. There are two ways to fix this: clearing a float and hiding overflow.


Clear Float

“Clearing” a float is when we tell a block to ignore any floats that appear before it.
 Instead of flowing around the floated box, a cleared element always appears after any floats. It’s like forcing a box back into the default vertical flow of the page.
clear: both;   // or left or right

Note that the red border now wraps all the way around the footer, indicating that the floated elements indeed count towards the height of the .page container


By adding an overflow: hidden declaration to a container div, we’re telling it to recognize the height of any floated elements it contains.
Clearing floats only fixes the height issue when there’s an element inside the container element that we can add a clear property to. 
Now that our footer is outside .page, we need a new way to make floated elements contribute to the height of their container.


The underlying idea for both options is that you need a way to tell the browser to incorporate floats into the height of their container element in order for their backgrounds to show up.









































Object should look the same no matter wher you put it

rather than side bar bottons orange main area blue: make a button style thats blue and make a button modifier that's orange. these orange buttons can be used anywhere they are not contextual to side bar. that's just one of your button styles

Abstract teh structure fo the object from teh skin that's being applied

use classes to name your objects as opposed to using ids

You dont want your markup to define your css: if I change 

Don;t use ids! Components are meant to be reusable. Ids are by nature unique.

BEM: Block element modifier
Key concept: blocks (objects) are made up of smaller elements and can be modified.

BEM is a way to modularize the development of web pages. By breaking your web interface into components, you can have your interface divided independent parts,  each one with its own development cycle. 

Nestable!

Repeatable!

You have a module for menue. but you have a child item for menuitem. menuitems without menu doesn't make sense.

Modifier:

block-name__element-name--mod-name


block-name__elem-name_mod-name_mod-val

NO NESTED CSS!

card  (block)
card__image (element that belongs to the block)
card--dark (modifier of block)




Cascading Style Sheets
: Separate styles from the actual document structure (HTML).
Syntax:
Selector {property_1: val1; property_1: val2; ...; property_n : valn;}              /*selector selelcts HTMLElements*/

Example: h1{color:blue;font-size:12px;}      /*This is a comment - Changes the color and font size of all h1 content to the provided values*/

Selector

  1. p (e.g. h1)  -  h1{color:blue;font-size:12px;}
  2. #id: HTML element tag with id equal to id (e.g. #paragraphid1)  -  #paragraphid1{text-align:center; color:red}
  3. .class-name: HTML element tag with class property equal to class (e.g. .centerclass)  -  .centerclass {text-align:center}
  4. [attribute=""] Attribute Selector: Selects HTML elements that have specific attributes (and values) like here and here 
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }
                 /*selects input tags with a type attribute valued "text"*/
input[type="button"] { width:120px; margin-left:35px; display:block; }
                 /*selects input tags with a type attribute valued "button"*/
5. p.class-name Extended Selector - Specify which HTML elements with class equal to .class should be affected - p.center {text-align:center;}

<html>
    <head>
        <style type="text/css">
            p.center {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <h1 class="center">This heading will not be affected</h1>
        <p class="center">This paragraph will be center-aligned.</p>
    </body>
</html>

Grouping

if several slectors have same css style you can separate the selectors by comma
h1,h2,p
{
color:green;
}

Nested Selector

RUN SELECTOR FROM LEFT TO RIGHT AND FINALLY APPLY CSS TO THE ULTIMATE SELECTED ELEMENTS.
<html>
    <head>
        <style type="text/css">
            p {color:blue; text-align:center; }
            .marked {background-color:blue}
            .marked p { color:white;}
        </style>
    </head>

    <body>
        <p>This is a blue, center-aligned paragraph.</p>
        <div class="marked">
            <p>This p element should not be blue.</p>
        </div>
        <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
    </body>
</html>

Where to Put Style Sheets

1. Separate style sheets in a .css file - when it is used in a lot of pages. Provide a link to the .css file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Example content of .css file
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
2. Internal as in the example above, provided in the head of the page.
3. Inline
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Inherit Styles or Not

The one with more specific values will be chosen.
 Style sheet in external file
Style sheet internal
 Final style sheet
 h3
{
color:red;
text-align:left;
font-size:8pt
}
 h3
{
text-align:right;
font-size:20pt
}
color:red;
text-align:right;
font-size:20pt

The result will be the inheritance of all the style sheets with the value priority of the more specific style sheet.
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand2


.
.






Comments