css dvijesh bhatt. introduction css stands for cascading style sheets styles - define how to...
TRANSCRIPT
CSSDvijesh Bhatt
Introduction
CSS stands for Cascading Style Sheets Styles - define how to display HTML elements Styles are normally stored in Style Sheets
Definition:
• Cascading Style Sheets (CSS) – is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border thickness, font size, etc.
CSS Syntax
• A CSS rule set consists of a selector and a declaration block.
• h1 { color:red; font:size:20px }
SelectorDeclarati
on
Continue
p {
color:red;text-align:center;
/* This is a single-line comment */}
CSS Selector
• CSS selectors allow you to select and manipulate HTML element(s).
• CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.
Continue…
• The element selector
• p { color:yellow; text-align : center;}
• The id Selector
• #main { color:yellow; text-align : center; }
• Do NOT start an ID name with a number!
Continue…
• The Class Selector
• .main {color:yellow; text-align : center ; }
• Specify that only specific HTML elements should be affected by a class.
• p.main {color:yellow; text-align : center ; }
Continue
• Grouping selectorh1 { text-align: center; color: red;}
h2 {text-align: center; color: red;}
p {text-align: center; color: red;}
• h1, h2 , p {text-align: center; color: red;}
Insert CSS in HTML
• When a browser reads a style sheet, it will format the document according to the information in the style sheet
• There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet
• An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file.
• Each page you must include the CSS file with <link> tag in side <head> section.
• <link rel="stylesheet" type="text/css" href=“red.css">
red.css
• hr {color: red;}p {margin-left: 20px; color:red;}body {background-image: url("images/background.gif");}
• Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;
Internal Style Sheet
• An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag.
• <style>hr {color: red;}p {margin-left: 20px; color:red;}body {background-image: url("images/background.gif");} </style>
Inline Style
• To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.
• <p style="color:red ; margin-left:20px;"> This is a paragraph. </p>
Multiple Style Sheets
• If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
• Example
External CSS Internal CSS Final CSSh3 { color: red; text-align: left; font-size: 8pt;}
h3 { text-align: right; font-size: 20pt;}
color: red;text-align: right;font-size: 20pt;
CSS order
• Even multiple external style sheets can be referenced inside a single HTML document.
• What happened when we have multiple rules for the same elements.
• Browser default
• External style sheet
• Internal style sheet (in the head section)
• Inline style (inside an HTML element)
Continue
• So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
• If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
Background
• CSS background properties are used to define the background effects of an element.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background
• background-color: #b0c4de; */rgb(255,0,0)/*
• background-image: url("paper.gif");
• background-repeat: repeat-x; ----- > no-repeat, repeat-y
• background-position: right top;
• Background-size: CSS3
Text Formating
• Color
• Text-align ------ > center, left, right, justify
• text-decoration ------- > over-line, underline, none
• text-transform ------ > uppercase, lowercase
• Text-shadow ----- > h-shadow, v-shadow, blur, color
• Word-spacing
Why CSS?
• Priority scheme determining which style rules apply to element
• Cascade priorities or specificity (weight) are calculated and assigned to the rules
• Child elements in the HTML DOM tree inherit styles from their parent
• Can override them
• Control via !important rule
Continue
• Some CSS styles are inherited and some not
• Text-related and list-related properties are inherited - color, font-size, font-family, line-height, text-align, list-style, etc
• Box-related and positioning styles are not inherited - width, height, border, margin, padding, position, float, etc
• <a> elements do not inherit color and text-decoration
Table
• table, th, td { border: 1px solid black;}
• border-collapse: collapse;
• vertical-align: bottom;
• td {padding: 15px;}
• table, td, th { border: 1px solid green;}
th { background-color: green; color: white;}
Link
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
List
• ul.a { list-style-type: circle;}
ul.b { list-style-type: square;}
• list-style-image: url('sqpurple.gif');
Box Model
• width: 250px;padding: 10px;border: 5px solid gray;margin: 10px;
• Let's do the math:250px (width)+ 20px (left + right padding)+ 10px (left + right border)+ 20px (left + right margin)= 300px
Border
• border-style: Solid; */dashed, doted, double, groove, ridge, inset, outset/*
• border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
• border-color:
css3
• Background• background-size: 100% 100%;
background-origin: content-box;
• background: url(img_tree.gif), url(img_flwr.gif);
Border
• border-radius
• box-shadow
• border-image
Font
• The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages.
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }
div {font-family: myFirstFont;}
font-stretch
CSS3 Transitions
• transition: width 2s;
• transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;