advanced css & html 5 introduction to web design and development
TRANSCRIPT
Advanced CSS & HTML 5
Introduction to Web Design and Development
Classes
CSS Classes•Classes can be used to apply varying format to a tag.•When defining the style use a dot to modify the tag name. For
the name, use a meaningful term (no spaces).
p {font-name: Arial} /* General, all p elements */p.fontBlue {color: blue} /* Only the p element using the
p.fontBlue class */<p class=“fontBlue”>…</p> <!-- The HTML code -->
CSS Classes•Classes can be generalized to apply to multiple elements.•Defining a class without an associated element gives us the
ability to apply those rules to multiple elements on a page.
.fontBlue {color: blue} /* CSS code */<p class=“fontBlue”>…</p> <!-- Paragraph text is blue --><h1 class=“fontBlue”>…</h1> <!-- Heading 1 text is blue -->
CSS Classes•General style applied, then class style.•Each tag can have multiple classes (separated with a space)
p { font-family: Arial, Helvetica, sans-serif } /* General rule in CSS */.bold { font-weight: bold } /* CSS class for font weight */.italics { font-style: italic } /* CSS class for font style */
<p class=“bold italics”>This is special text</p><h1 class=“bold italics”>This is special h1</h1>
Flashback!
• Identify the elements in the following CSS rule:• p { color: #FF8822; }
Selector
Property
ValueWell Done!
IDs
CSS IDs•IDs are similar to classes. Difference: ID can only be applied to a single, unique page element.•When defining the ID use a # to indicate the id name.
p {font-name: arial}#special {color: blue}
•When applying, specify the style in the tag opening.<p id=“special”>This is special text</p>
CSS IDs
• Used by both CSS and Javascript• Identifies an element on a page so that Javascript code can access and
modify the content after the page has loaded on the client’s browser• Works with the Document Object Model (DOM)• You’ll learn more about this in Advanced Web
• In order for Javascript to know which element to modify, the element must have a unique identification (hence, ID)
CSS Classes and IDs
• Any single element can have both classes and an ID.<p id=“footer” class=“bold italics fontRed”>…</p>
CSS Classes and IDs
• In terms of order of operation, classes are applied first, and then the ID..bold{ font-weight: bold; }.italics{ font-style: italic; }.fontRed{ color: red; }#footerStyle{ font-weight:normal; background-color:green; color:pink;}
<footer class=“bold italics fontRed” id=“footerStyle”>…</footer>
<div> and <span>
HTML elements <div> and <span>
• <div>…</div>• Div elements are block level container that allows us to create
sections of our webpage. • Used to be used to organize a web page.• Now, used to identify major ‘chunks’ of data and provide dynamic
content.
HTML elements <div> and <span>
• <span>…</span>• Span elements are inline container elements that allows us to apply
formatting (bold, underline, color change, etc) to small sets of text.
SpanExample…<p>In this new paragraph we are going to have a section that is <span class=“bold underline fontRed”>That is bolded, underlined, and red.</span>
IN CSS.bold{font-weight:bold;}.underline{text-decoration:underline;}.fontRed{color:red;}
Organizing a Page
<div #id=“header”>…</div>
<div #id=“nav”>…</div>
<div #id=“sidebar”>… </div>
<div #id=“content”>…</div>
<div #id=“footer”>…</div>
The Old Way
This is how CSS used to be used to organize a page’s main components. HTML 5 is so new, that it is probably still in wide use, but will pass as HTML 5 semantic elements are adopted by developers. Each of these IDs are associated with <div> elements on the web page in the order, left to right and top to bottom, that they appear. Thus, the web page starts out with a <div id=“header”>, then a “nav” div, a “sidebar” div, a “content” div, and, finally, a “footer” div.
<header>
<nav>
<aside> <section>
<footer>
The HTML 5 Way
This is how the new HTML 5 semantic elements are used to replace the old CSS IDs and thus, again, make structure the responsibility of HTML while leaving the styling to CSS. Each of these elements, of course, can be styled using CSS, but the structure of the document is defined by the HTML. For example, in our CSS, we could make a rule, section { background-color: #F9F9F9 }Which would make the background color of the section element of the resulting page a light gray.
CSS Positioning
CSS Positioning
• We can use the position property to position the elements on the screen.• Potential values:• position: static• Default value. Elements are shown on the screen in the order they are
defined• position: relative• The element is positioned relative to its normal (static) position
CSS Positioning
• We can use the position property to position the elements on the screen.• Potential values:• position: absolute• The element is positioned absolutely based on its container (if container is
something other than static position)• position: fixed• The element is positioned in the browser’s window and fixed in that
location
CSS properties• width – determines how wide an element can be • height – determines how tall an element can be• left – defines its left position based upon the container it is within (can be
negative value)• right – defines its right position based upon the container it is within (can be
negative value)• bottom – defines its bottom position based upon the container it is within (can
be negative value)• top – defines its top position based upon the container it is within (can be
negative value)
CSS Positioning Example
CSS Property Float and Clear
• Float allows us to float objects to the left or the right of the screen.• Example:
img{ float: left;}div{ float:right;}
• Clear allows us to stop the floating of the objects and return to the next line.• .clear{ clear: both;}
• Float and Clear Demo:
CSS Contextual Selectors
CSS Contextual Selectors• In CSS, you have the option to group tags together. To do this,
separate each tag with a comma.• CSS example:
h1, h2, h3, h4, h5 , h6 { background-color:lightblue;}
• Instead of:h1{ background-color:lightblue;}h2{ background-color:lightblue;}h3{ background-color:lightblue;}h4{ background-color:lightblue;}h5{ background-color:lightblue;}h6{ background-color:lightblue;}
CSS Contextual Selectors
• In addition, we have the ability to change properties of any nested tags •We can use contextual selectors to modify immediately
nested tags or tags that are a descendant of another tag
CSS Contextual Selectors
• Examples (in CSS):* { background-color:green }
/* all tags will have bg green */
h1 em { background-color:green } /* all italics tags nested inside of an h1 tag
will have a bg green */
CSS Contextual Selectors
• Examples (in CSS):h1 > em {background-color:green}
/* all italics tags immediately nested inside of an h1 tag will have a bg green */
CSS Contextual SelectorsCSS:
div strong {color: green;} HTML:
<div>< strong >color</ strong ><p>
< strong >color</ strong ></p>
</div>
color
color
CSS Contextual SelectorsCSS:
div > strong {color: green;} HTML:
<div>< strong >color</ strong ><p>
< strong >color</ strong ></p>
</div>
color
color
Pseudo Classes
Pseudo-classes
• CSS pseudo-classes are designed to allow us to add special effects to some selectors. For instance, if we wanted to change the way a hyperlink looks when someone hovers over a link, we can do that with pseudo-classes.• We signify a pseudo-class with the : colon character after the tag or
class. • Example:
a:hover{ color:green;}.nav:hover{color:green;}
Pseudo-classes
• Some examples:link a:link unvisited links:visited a:visited visited links:active a:active active links:hover a:hover moused over links:first-letter p:first-letter first letter of a paragraph:first-line p:first-line first line of a paragraph
More on the Box Model
Margin CollapseWhen two elements are above one another, the bottom margin of the 1st element will collapse with the top margin of the 2nd.
Box Model and CSS properties
• In CSS, we have the ability to set the padding, border, and margin of the HTML tags to adequately position them on the screen. • Padding, borders, and margins are optional and default to 0.
However browsers will still apply a minimal margin when laying out a page.• Can be overridden explicitly with CSS (and is good practice to do so).
Padding
• We have the ability to set padding for each side of an HTML tag. We can do this one of two ways:• Example one:
• padding-left: 10px;• padding-right: 10px;• padding-top: 10px;• padding-bottom: 10px;
div{padding-right: 10px;
}
Padding• We have the ability to set padding for each side of an HTML tag. We
can do this in several ways:• padding: 10px
• Sets top, right, bottom, and left padding to 10px• padding: 10px 5px 15px 20px;
• Sets top to 10px, right to 5px, bottom to 15px, and left to 20px;• padding: 10px 5px
• Sets top and bottom to 10px and left and right to 5px;div{ padding: 10px; }div.padRight{ padding-right:20px;}
Border
• With border, we can overload the border property as follows (which sets all four borders):
border: 5px solid red;• Top, left, bottom, and right borders are a solid line, 5px
thick, and colored red;
Border
• We can also set border-width, border-style, and border-color• border-width: (thin, medium, thick, 5px)• border-style: (solid, dotted, dashed, double, groove, ridge, inset, outset)• border-color: (named color, hexadecimal, rgb, rgba)
div{ border-width:5px;border-style:solid;border-color: red;
}
BorderBeyond using the properties border, border-style, border-width, and border-color, we also have the following:
border-left: border-left-color: border-left-style: border-left-width:
border-top: border-top-color: border-top-style: border-top-width:
border-right: border-right-color: border-right-style: border-right-width:
border-bottom: border-bottom-color: border-bottom-style: border-bottom-width:
Margin
• We have the ability to set margin for each side of an HTML tag. We can do this several ways:
margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;div{
margin-right: 10px;}
Margin• margin: 10px
• Sets top, right, bottom, and left margin to 10px• margin: 10px 5px 15px 20px;
• Sets top to 10px, right to 5px, bottom to 15px, and left to 20px;• margin: 10px 5px
• Sets top and bottom to 10px and left and right to 5px;
div { margin: 10px; }div.padRight { margin-right:20px;}
Centering Elements w/ Margin
• When we think of centering content, typically we think of text-align. This property will only center the content (or text) of a particular block-level element. But what if you wanted to center the entire element itself.
Centering Elements w/ Margin
• One “trick” commonly used in CSS is to set the margin to the following:
div{ margin: 0 auto; }• In this particular example, we are saying apply no margins to the top
and the bottom. For the left and right, take the empty space between the html tags, and apply it evenly to the left and to the right
Centering Elements w/ Margin - ExampleCSS:
div{width: 400px;height: 500px;background-color: green;margin: 0 auto;
}HTML:<div>test</div>
Display and Visibility
CSS Display
• The CSS property display can alter how an html tag is displayed on the screen. •Most common usage is to change an inline element (think
<img> or <a>) to a block level element. This is important for changing width, height, positioning, etc.
CSS Display
• Example:img{
display:block;width: 400px;margin: 0 auto;
}• By doing this, I can now center the image in its container
CSS Display
• Another example is display: none. In this example, the object will not be visible on the screen and it will not take up space on the screen.
Example:div{
display:none;}
CSS visibility• CSS visibility allows us to declare if the object is visible on the screen.
• Example:div{
visibility: hidden;}div{
visibility: visible;}
• The difference between display:none and visibility:hidden is that visibility:hidden will continue to take up screen space.
Unordered List Navigation BarExample of using CSS to alter a set of tags
HTML & CSS – Navigation Bar
• Using HTML and CSS we can transform a basic unordered list into a navigation bar:
Navigation Bar - HTML
<ul><li><a href=“index.htm">Home</a></li><li><a href="news.htm">News</a></li><li><a href="articles.htm">Articles</a></li><li><a href="forum.htm">Forum</a></li><li><a href="contact.htm">Contact</a></li><li><a href="about.htm">About</a></li>
</ul>
Navigation Bar - CSS
• First, remove the bullets, margins, and paddings from the list:• ul{
list-style-type:none;margin:0;padding:0;
}
Navigation Bar - CSS
• Second, we need to float the list items to the left:• li{
float:left;}
Navigation Bar - CSS
• Last, we need to display the <a> as a block and set a width:• li > a{
display:block;width:60px;
}
Navigation Bar - CSS
• Let’s make it pretty:• Remove the following CSS:
li > a{display:block;width:100px;
}
Navigation Bar - CSS
Making it pretty
li > a:link, li > a:visited {display: block;float: left;width: 100px;margin-right: 3px;line-height: 1.8em;background-color: #00A;color: #FFF;border-radius: 10px;
text-align: center;text-decoration: none;position: relative;left: 50px;top: -15px;
}
li > a:hover, li > a:visited {background-color: #A0A;color: #FF0;
}
Sources
• “CSS Navigation Bar”, W3Schools, Retrieved from http://www.w3schools.com/css/css_navbar.asp
• “HTML5 Semantic Elements”, W3Schools, Retrieved from http://www.w3schools.com/html/html5_semantic_elements.asp
• “HTML Reference”, W3Schools, Retrieved from http://www.w3schools.com/tags/default.asp
• “CSS Reference”, W3Schools, Retrieved from http://www.w3schools.com/cssref/default.asp
Copyrights
•Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
•IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.
•Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
•Oracle is a registered trademark of Oracle Corporation.
•HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.
•Java is a registered trademark of Sun Microsystems, Inc.
•JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.
•SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.
•Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.
•ERPsim is a registered copyright of ERPsim Labs, HEC Montreal.
•Other products mentioned in this presentation are trademarks of their respective owners.
Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of
Computing . ([email protected])