Download presentation
Presentation is loading. Please wait.
1
CSS Dvijesh Bhatt
2
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.
3
CSS Syntax h1 { color:red; font:size:20px } Selector Declaration
A CSS rule set consists of a selector and a declaration block. h1 { color:red; font:size:20px } Selector Declaration
4
Continue p { color:red; text-align:center;
/* This is a single-line comment */ }
5
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.
6
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!
7
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 ; }
8
Continue Grouping selector
h1 { 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;}
9
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
10
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">
11
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;
12
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>
13
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>
14
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 CSS h3 { color: red; text-align: left; font-size: 8pt; } h3 { text-align: right; font-size: 20pt; } color: red; text-align: right; font-size: 20pt;
15
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)
16
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!
17
Background CSS background properties are used to define the background effects of an element. background-color background-image background-repeat background-attachment background-position
18
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
19
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
20
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
21
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
22
Table table, th, td { border: 1px solid black; }
table, td, th { border: 1px solid green; } th { background-color: green; color: white; } border-collapse: collapse; vertical-align: bottom; td {padding: 15px;}
23
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
24
List ul.a { list-style-type: circle; } ul.b { list-style-type: square; } list-style-image: url('sqpurple.gif');
25
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
26
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:
27
css3 Background background-size: 100% 100%; background-origin: content-box; background: url(img_tree.gif), url(img_flwr.gif);
28
Border border-radius box-shadow border-image
29
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
30
CSS3 Transitions transition: width 2s;
transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;
Similar presentations
