- Part 1: HTML
- Part 2: CSS
- Part 3: Responsive CSS
CSS
CSS is a set of formatting rules that are applied to the HTML based on selectors and declarations.
Selectors determine which HTML element a style should be applied to, such as:
- tags:
<p> - classes: can be applied to any element, such as
<span class="boldRed">. In the CSS, class names begin with a dot, such as.boldRed. - IDs: specify a style for a single, unique element, such as
<div id="banner">. In the CSS, ID names begin with a #, such as#banner. - pseudo-classes: add custom looks and behaviors to certain selectors, such as a:hover. See MDN Pseudo Classes for more details.
Selectors iny also be grouped or nested within each other. Grouped selectors apply the same rule to a number of different elements. Nested selectors may affect certain classes that are only within other classes.
Example:
body, h1, h2 {
}
Applies to the body element as well as all h1 and h2 tags.
#subnav li a {
}
Only applies to anchor tags within li tags in the #subnav element.
Declarations consist of a property and a value. The property is the style attribute (like color or margin) that you wish to change. Each property has a value (like “red” or “20px”).
Common CSS properties:
- color
- text-align
- line-height
- font-family
- font-size
- font-style
- font-weight
- background-color
- background-image
- background-repeat
- list-style-type
- margin
- padding
- border
- float
- clear
For a complete list of CSS properties, see MDN’s CSS Reference.
CSS Layout
divs and spans
- By default, browsers place a line break after each
<div>element. That can be overridden using floats (moves a<div>left or right) and clears (forces a line break left and right.) See MDN’s explanation of float and clear. - Create your
<div>tags in your HTML according to your flow analysis, and size and position them in CSS. - Most block level elements within your layout will require a width attribute in order to behave properly. Heights can be set if needed, otherwise it will be determined by the content within the element.
- To determine height and width, consider the CSS Box Model. Every box is composed of four parts defined by their respective edges: the content edge, padding edge, border edge, and margin edge.Original CSS Box Model
- Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
- Border – A border that goes around the padding and content. The border is inherited from the color property of the box
- Padding – Clears an area around the content. The padding is affected by the background color of the box
- Content – The content of the box, where text and images appear
- The total width of the element in the example below is 300px:
width:250px;padding:10px;border:5px solid gray;margin:10px;
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
- Positioning and Overlapping Elements: CSS allows for elements to be positioned in the following ways:
- Static: HTML elements by default are static, according to the normal flow of the page.
- Fixed: Positioned relative to the browser window, will not move even if the window is scrolled.
- Relative: adjusted to a position relative to its normal position.
- Absolute: positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>.
- Overlapping: The z-index property specifies the stack order of an element when it is positioned outside the normal flow. An element can have a positive or negative stack order.
- Note that web colors are usually specified in hexadecimal notation, though certain names can also be used. Image editing programs can give you the Hex value of a color swatch.
Floats and Clears
Adding the FLOAT property to an element takes it out of the normal flow and moves it as far to the left or right of it’s containing element as possible (until it reaches the edge of its parent or butts up against another floating object.)
Any other elements, such as paragraphs or lists, will wrap around the floated element.
Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
You can specify a) whether an element is floated or not, and b) which side it floats on.
A CLEAR cancels a float. Clear: right forces the next element in the flow to appear on a new line. Clear:left forces a line break before the floating object. Clear:both puts an element on its own line, below all previous elements in the flow.
> See RowfFood slides
Add CSS Formatting to Your HTML
Instructions
- In Atom create a New file and save it as style.css into your yourlastname-ex02 site folder.
- Download this image and place it into a folder named “images” inside your site folder.
- Copy the css code below, and paste it into style.css.
@charset "UTF-8"; /* CSS Document */ /* Universal Selector Reset cssreset.com */ * { margin: 0; padding: 0; box-sizing: border-box; } /* End Reset */ :root { --body-color: #d5d7ff; } body { background-color: var(--body-color); text-align: left; font: 11px/1.1em "Lucida Grande", Lucida, Verdana, sans-serif; /* Necessary for gradient to work properly */ height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } #wrapper { margin: 0 auto; width: 960px; } h1 { font-size: 1.5em; color: #639; } h2 { font-size: 1.3em; line-height: .5em; } h3 { font-size: 1.1em; } header { width: 100%; background-color: #000; } nav { padding-top: 3px; height: 40px; display: flex; /* or inline-flex */ flex-direction: row; flex-wrap: nowrap; justify-content:flex-end; align-content: space-around; } nav ul{ display: flex; } nav li { font-family: "Courier New", Courier, monospace; font-size:13px; white-space: nowrap; list-style-type: none; padding-right: 1.5em; } nav li a { color: #FFFFFF; text-decoration: none; } nav li a:hover { color: #d5d7ff; text-decoration: underline; font-weight: normal; } #banner { width: 100%; height: 50px; clear: both; background-image: url(images/banner.png); background-size: cover; }background-repeat: no-repeat; main { width: 60%; margin-right: 5%; float: left; margin-top: 50px; } aside { width: 35%; float: right; margin-top: 50px; } - Add CSS to float the image in the main div to the right, allowing text to flow around it to the left.
