CSS Basics
-
Upload
wordpress-memphis -
Category
Technology
-
view
3.555 -
download
0
description
Transcript of CSS Basics
![Page 1: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/1.jpg)
The Basics of
Cascading Style Sheets (CSS)
Irina McGuireGraphic Designer | Front-End Web Developer
www.irinamcguire.com
December 3, 2010
![Page 2: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/2.jpg)
Introduction
• What do you know about CSS?
• What do you hope to do with CSS?
• How familiar are you with HTML?
Examples of beautiful CSS Web sites:
www.csszengarden.com
One content, many layouts.
![Page 3: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/3.jpg)
Presentation Summary
1. What is CSS?
2. CSS & HTML
3. The Box Model
4. Style Sheet Implementation
5. CSS Rule Structure
6. HTML & DIVs
7. Common CSS properties
8. CSS Cascade and Inheritance
9. Resources
![Page 4: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/4.jpg)
What is CSS?CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands or rules. These rules tell the HTML how to display.
*To create a style sheet, create a file using Notepad (PC) or Text Edit (Mac), save it as a .css document and start writing the CSS code (see right).
/* Styles for sitename.com*/
body {font-family:Arial; background: #000;}
#container {text-align:left;width:1020px;
}
#header {height:232px;}
#footer {width: 100%;padding: 0 10px;margin-bottom: 10px;
}
And so on….
Style.css
![Page 5: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/5.jpg)
CSS Benefits
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
![Page 6: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/6.jpg)
HTML Without CSS“HTML without CSS is like a piece of candy without a pretty wrapper.”
Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.
With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.
![Page 7: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/7.jpg)
HTML & CSS
• HTML and CSS work together to produce beautiful and functional Web sites
• HTML = structure
• CSS = style
![Page 8: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/8.jpg)
The Box ModelCSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float.
HeaderNavigationContentFooter
![Page 9: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/9.jpg)
Attaching a Style SheetAttach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>h1 {color: red)</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags.
<p style=“color: red”>Some Text</p>
![Page 10: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/10.jpg)
CSS Rule Structure
A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value.
selector {property: value;}
declaration
![Page 11: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/11.jpg)
Selectors
body { property: value; } h1 { property: value; } em { property: value; } p { property: value; }
A selector, here in green, is often an element of HTML.
![Page 12: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/12.jpg)
Properties and Valuesbody {background: purple;}
h1 {color: green; }
h2 {font-size: large;}
p {color: #ff0000;} /*hexadecimal for red*/
body {
background: purple;
color: green;
}
Properties and values tell an HTML element how to display.
*CSS code can be written in a linear format (above) or in a block format (below).
![Page 13: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/13.jpg)
Grouping Selectors
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
h1 {
color: black;
font-weight: bold;
background: white;
}
Group the same selector with different declarations together on one line.
Example of grouping selectors (both are correct):
![Page 14: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/14.jpg)
Grouping SelectorsGroup different selectors with the same declaration on one line.
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
h1, h2, h3 {color: yellow;}
Example of grouping selectors (both are correct):
![Page 15: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/15.jpg)
Comments in CSS
• Explain the purpose of the coding
• Help others read and understand the code
• Serve as a reminder to you for what it all means
• Starts with /*and ends with*/
p {color: #ff0000;} /*Company Branding*/
![Page 16: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/16.jpg)
Typical Web Page (Browser)
header
footer
mainmenu
Container
![Page 17: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/17.jpg)
Typical Web Page (HTML)
<div id=“container”>
<div id=“header”>Insert Title</div>
<div id=“main">content
<div id=“menu”>content</div>
</div>
<div id=“footer”>content</div>
</div>
Typical HTML Web page is made up of containers (boxes) or DIVs. Each DIV is assigned an ID or a Class.
![Page 18: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/18.jpg)
Typical Web Page (CSS)
#container {property: value;}
#menu {property: value;}
#main {property: value;}
#footer {property: value;}
The CSS file uses the same DIV/ID/Class names as the HTML and uses them to style the elements.
![Page 19: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/19.jpg)
IDs and Classes• IDs (#) are unique and can only be used once on the page
• Classes (.) can be used as many times as needed
HTML Code:
<h1 id=“mainHeading”>Names</h1>
<p class=“name”>Joe</p>
CSS Code:
#mainHeading {color: green}
.name {color: red}
![Page 20: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/20.jpg)
CSS Box Properties
• Background-color
• Width
• Padding
• Margin
• Border-width
• Border-color
• Border-style
![Page 21: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/21.jpg)
HTML CSS
div id=“header”
div id=“footer”
div id=“content”
#content {background-color: #ccc;margin-bottom: 10px;border: 1px dashed blue;color: #fff;width: auto;}
![Page 22: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/22.jpg)
Common CSS Layout Properties
• Width
• Height
• Float
• Clear
• Border
• Padding
• Margin
width
height
paddingmargin
border
![Page 23: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/23.jpg)
Width & Height
div id=“box”
#box {width=“50px”}
#box {width=“50em”}
#box {width=“100%”}
#box {width=“auto”}
Width and height define the width and height of an element.
#box {height=“auto”}
*Width and height can be specified in pixels, ems, percentages or set to auto
![Page 24: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/24.jpg)
Float: (left, right)Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping.
div id=“box”
Here is some text which wraps around the box floated to the left.
#box {float:left; margin-right: 10px;}
![Page 25: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/25.jpg)
Clear: (left, right, both)
#box3 { background-color: white; border: 1px solid #000; clear: both;}
When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line.
div id=“box1” div id=“box2”
div id=“box3”
![Page 26: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/26.jpg)
Border (top, right, bottom, left)
#box { border-color: red; border-style: dotted; border-width: 2px;
div id=“box”
#box { border: red dotted 1px;
#box {border-top: red dotted 1px;border-bottom: red dotted 1px;border-left: red dotted 1px;border-right: red dotted 1px;}
You can define the entire border or only the top, bottom, left, or right. You can also define the border using one declaration. The code could be any of the following:
![Page 27: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/27.jpg)
Padding (top, right, bottom, left)Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately.
The code could be any of the following:
padding: 10px;
Padding: 10px 10px;
padding: 10px 10px 10px 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
div id=“box”
padding
![Page 28: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/28.jpg)
Margin (top, right, bottom, left)Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately.
The code could be any of the following:
margin: 10px;
or
margin: 10px 10px;
or
margin: 10px 10px 10px 10px;
or
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin
div id=“box”
![Page 29: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/29.jpg)
Text Properties.mainHeading {color: red;letter-spacing: 5px;text-transform: uppercase;word-spacing: 15px;text-align: left;font-family: Times;text-decoration: underline;font-size: 12px;font-style: italic;font-weight: bold;}
MAIN HEADING
Gravida lacinia velit. Vivamus tortor enim,
tincidunt at, pellentesque ut, iaculis eu, quam.
To style the main heading inthe paragraph above, we assigneda class the HTML tag.
<h3 class=“mainHeading”>Main Heading</h3>
![Page 30: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/30.jpg)
CSS Colors
• White• Black• Blue• Fuchsia• Gray• Green• Lime• Aqua
• #ffffff• #fff • #cccf0f3
Standard Hexadecimal
![Page 31: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/31.jpg)
Styling Links
a:link {color: red; text-decoration: none;border-bottom: 1px dashed red; background: white;}
a:visited {color: yellow;}
a:active {color: green;}
a:hover {color: orange;}
The links property defines how inactive, hovered, active, and visited link states appear to the user.
![Page 32: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/32.jpg)
Including Images
Properties for working with images include:
• Background-image
• Background-repeat
• Background-position
• Background-attachment
![Page 33: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/33.jpg)
LayeringBackground colors and images are layered like sheets of paper one on top of the other.
#bg {background:url(leaves.jpg) no-repeat top left}
#main {background-color: red}
#box {background-color: yellow}
div id=“bg”
div id=“main”
div id=“box”
![Page 34: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/34.jpg)
Background-Image
li {
background-image:url(flower.jpg);
padding-left: 10px;
}
Background images and colors are layered.
If not transparent, the last one listed in the CSS file is visible.
The background-image property sets an image in the background of an element.
![Page 35: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/35.jpg)
Background-Repeat
li {background-image:url(flower.jpg); background-repeat:no-repeat;}
Possible Values >
The background-repeat property sets an image in the background of an element and tiles, or repeats, it. Tiling is the default.
• repeat
• repeat-x (horizontal)
• repeat-y (vertical)
• no-repeat
![Page 36: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/36.jpg)
Image PositioningThe background-position property positions the image using either combined keywords (top, bottom, left, right, and center); length values; or percentage values.
The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll.
background-position: right top; /*can also use number values*/
background-attachment: fixed; /*can also use ‘scroll’*/
left
top
center
top
left
bottom
center
bottom
right
bottom
![Page 37: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/37.jpg)
The Power of Cascade
When multiple styles or style sheets are used, they start to cascade and sometimes compete with one another due to CSS’s inheritance feature. Any tag on the page could potentially be affected by any of the tags surrounded by it.
So, which one wins? Nearest Ancestor Wins.
1.Inline style or directly applied style
2.The last style sheet declared in the <header> section
![Page 38: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/38.jpg)
Saving Time with Inheritance
In a nutshell, inheritance (not the money you get from your grandma) is the process by which CSS properties applied to one tag are passed on to nested tags.
For example, the paragraph tag will inherit the same styling as the body tag because <p> is always located inside <body>.
<body style=“font-family: Arial”>
<p>This text will be Arial as well</p>
</body>
So, instead of styling each paragraph separately, you can define the font color in the <body>, and everything inside will have that color.
![Page 39: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/39.jpg)
Resources• http://www.w3schools.com/css/css_reference.asp (list of all CSS properties)
• http://www.w3schools.com/css/
• http://www.glish.com/css/
• http://www.html.net/tutorials/css/
• http://blog.html.it/layoutgala/
Great Book
“CSS: The Missing Manual” - by David Sawyer McFarland
CSS Galleries
http://www.cssbeauty.com/gallery/
www.cssdrive.com
http://www.css-website.com
![Page 40: CSS Basics](https://reader033.fdocuments.net/reader033/viewer/2022052619/555a6caad8b42a972b8b4c74/html5/thumbnails/40.jpg)
Thank You
I hope you enjoyed this presentation and learned
some basic CSS. Good luck with creating
beautiful and functional Web sites.