SEEM4570Tutorial 03: CSSCao Yuewen
SEEM4570 Tutorial 03: CSS Cao Yuewen
What is Css ?·CSSstandsforCascadingStyleSheets· CSS describes how HTML elements are tobe displayedAfancytable:Adefaulttable:IDNameAgeIDNameAge01Peter180118Peter02Arial 1902Arial19
What is CSS ? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed
Why Css ?·Separates contentfromform· Easy maintenance of multiple pages·Fasterpageloading·Easyto learn
Why CSS ? • Separates content from form • Easy maintenance of multiple pages • Faster page loading • Easy to learn
Three Ways to Insert CsSo Inline: the“style"attribute<p style="font-color:red;font-size:10px;">Content</p>oInternal:the<style>markuptag<html><head><style>p (background-color:Red;font-family:serif;font-color:White;)</style></head><body><p>Content</p></body></html>oExternal:the.cssstylesheetfile<linkrel="stylesheet"type="text/css"href="mystylesheet.css"/>
Three Ways to Insert CSS Inline: the “style” attribute Internal: the <style> markup tag External: the .css stylesheet file <p style=“font-color:red;font-size:10px;”>Content</p> <html><head><style> p {background-color: Red;font-family: serif;font-color: White; } </style></head><body> <p>Content</p> </body></html> <link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CsS Rule StructureCSSrule-setconsistsofaselectorandadeclarationblock:SelectorDeclarationDeclarationh1color:blue;font-size:12px;PropertyValuePropertyValueTheselectorpointstotheHTMLelementyouwantto styleThedeclarationblockcontainsoneormoredeclarationsEachdeclarationincludesaCsSpropertynameandavalueEachdeclarationseparateswithasemi-colon
CSS Rule Structure CSS rule-set consists of a selector and a declaration block: • The selector points to the HTML element you want to style • The declaration block contains one or more declarations • Each declaration includes a CSS property name and a value • Each declaration separates with a semi-colon