CSS Basics

The Basics of Cascading Style Sheets (CSS) Irina McGuire Graphic Designer | Front-End Web Developer www.irinamcguire.com December 3, 2010

Introduction ,[object Object],[object Object],[object Object],Examples of beautiful CSS Web sites: www.csszengarden.com One content, many layouts .

Presentation Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

CSS Benefits ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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.

HTML & CSS ,[object Object],[object Object],[object Object]

The Box Model CSS 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. Header Navigation Content Footer

Attaching a Style Sheet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Selectors body { property : value ; } h1 { property : value ; } em { property : value ; } p { property : value ; } A selector, here in green , is often an element of HTML.

Properties and Values body { 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).

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):

Grouping Selectors Group 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):

Comments in CSS ,[object Object],[object Object],[object Object],[object Object],p { color: #ff0000;} /*Company Branding*/

Typical Web Page (Browser) header footer main menu Container

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.

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.

IDs and Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Box Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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; }

Common CSS Layout Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],width height padding margin border

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

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;}

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”

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:

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

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”

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 in the paragraph above, we assigned a class the HTML tag. <h3 class=“mainHeading”>Main Heading</h3>

CSS Colors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Standard Hexadecimal

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.

Including Images ,[object Object],[object Object],[object Object],[object Object],[object Object]

Layering Background 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”

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.

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. ,[object Object],[object Object],[object Object],[object Object]

Image Positioning The 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

The Power of Cascade ,[object Object],[object Object],[object Object],[object Object]

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.

Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Thank You I hope you enjoyed this presentation and learned some basic CSS. Good luck with creating beautiful and functional Web sites.

CSS Basics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Basics

Similar to CSS Basics (20)

Recently uploaded

Recently uploaded (20)

CSS Basics

Editor's Notes