1 / 30

CSS

CSS. Dvijesh Bhatt. Introduction. CSS stands for C ascading S tyle S heets Styles - define how to display HTML elements Styles are normally stored in Style Sheets Definition:

elmo-ware
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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

  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;} • border-collapse: collapse; • vertical-align: bottom; • td {padding: 15px;} • table, td, th {    border: 1px solid green;}th {    background-color: green;color: white;}

  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;

More Related