50 terms

CSS

STUDY
PLAY
Two types of font family names:
Generic Family
Font Family
Generic Family
A group of font families with a similar look (like "Serif" or "Monospace")
Font Family
A specific font family (like "Times New Roman" or "Arial")
Monospace
Characters have the same width
External Style Sheet Placement
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
External Style Sheet
- Ideal when the style is applied to many pages.
- Can change the look of an entire Web site by changing one file.
- should not contain any html tags
Class Selector
Used to specify a style for a group of elements. Unlike the id selector, it is most often used on several elements.
The ID Selector
Used to specify a style for a single, unique element.
padding-bottom
Sets the bottom padding of an element
The shorthand property for all the padding properties
padding:25px 50px;
The padding
clears an area around the content (inside the border) of an element. It is affected by the background color of the element.
The three different ways to apply CSS
Inline, Head, External
What does CSS stand for?
Cascading Style Sheets
Declaration in CSS?
Gives information {color:red;text-align:center;}
Selector in CSS?
The selector is usually the HTML element that you are attempting to control.
Selector
Decides what is effected by command
Border Shorthand Property
border:5px solid red;
Border Individual Sides
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
CSS Border Properties
Allow you to specify the style and color of an element's border.
Inheritance
Physical relationship between Parent commands and Children commands
<div id="content"> </div> <!--end of content div -->
3rd part of body - Container to hold the content
4 parts of the body
header, navigation, content, footer
/**/
CSS Comment
<!--end of content div-->
HTML Comment
CSS Reset - group set of rules for font size, type, padding/margin
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dd, dt {font-size:16px;
font-weight:normal;
padding:0
margin:0
}
<link> </link> goes in between
<head> </head>
background-color:
F0F0e8;
Body Tag body {
margin: 0;
background-color:F0F0e8;
font-family:'Signika', sans-serf;
}
Header Tag header {
background-color:#4c6c73;
border-bottom:1px solis #3b5459;
}
header h1{
color:#efefcc;
}
ID or Fragment Identifier
Can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.
Classes
Can be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust. Classes can not only be used more than once, but more than one can be used on an element:
ID's are
totally unique, like a serial number of a product
Classes are
not unique, like a barcode - Can be changed and reused
A CSS file allows you to separate your web sites (X)HTML content
from it's style.
As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on...)
are accomplished within a CSS.
External Style Sheet example
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />
Length
Defines a fixed padding (in pixels, pt, em, etc.)
%
Defines a padding in % of the containing element
How to identify padding of different sizes
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
auto
The browser calculates a margin. This is default.
inherit
Specifies that the margin should be inherited from the parent element
Let an image float to the right
img
{
float:right;
}
none
The element is not floated, and will be displayed just where it occurs in the text. This is default.
right
The element floats the right
<figure>
Marks up a photo in a document and also contains a caption
Photo Caption
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
The <figcaption> tag
is new in HTML5.
The <figcaption> element placement
The first or last child of the <figure> element.
Sets the height and width of a paragraph
p.ex
{
height:100px;
width:100px;
}
Smiley Face
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>