Introduction to CSS
Introduction to CSS
Jan 13, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to CSS
Get to know each other!
OLike the individual designs of the name tags, CSS allows you to determine the style of your webpage
OWhat draws you into a website?OWhat makes a website visually
appealing?
What is CSS?
OCascading Style SheetsODefine how to display HTML
elements: HTML defines the content, CSS defines the format
OCSS information stored in an External Style Sheet (.css files)
The External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
CSS Syntax
O The selector is normally the HTML element you want to style.
O Each declaration consists of a property and a value.
O The property is the style attribute you want to change. Each property has a value.
CSS Selectors: ID and ClassO The ID selector is used to specify a style for a
single, unique element.O Defined with a "#": #para1 when the html coding
includes the attribute <p id=”para1”> as the initial bracket
O The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
O defined with a ".": .center, with html code indicating class=”center” all elements with this indication will be centeredO you can choose for a class to only affect one type of
element by further specifying it with p.center, h.center, etc.
StyleO Background color: defined in the body
element: body {background-color:#b0c4de;}
O Text color: can be in any sector: body {color:blue;}
O Text alignment: h1 {text-align:center;}
O Text transformation: p.capitalize {text-transform:capitalize;}
The Possibilities are Endless!
O Borders: boxes can be created around text—anything from a solid line around the text to a 3D grooved boder
O Navigation Bar: a list of links used to help visitors navigate your site or be directed to other sites
O Every color under the sun: CSS allows you to code font and back ground color using HEX values, color codes, and color names
Review: How much do you remember?
Homework
Edit the page you produced with the three paragraphs from your favorite
book so that the format more accurately reflects the feel of the book. Make use of different fonts,
colors, and alignment, as well as one other element that you find on your
own to make your representation more unique.
For reference: http://w3schools.com/css
Related Documents
