Content CSS Introduction CSS Syntax CSS Selectors CSS
- Slides: 53
Content • • CSS Introduction CSS Syntax CSS Selectors CSS How To. . . CSS Background CSS Text CSS Font 2
Content • • CSS Links CSS Tables CSS Border CSS Margin CSS Padding CSS Display and Visibility CSS Float CSS 3 3
CSS Introduction What is CSS? • • • CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed Styles were added to HTML 4. 0 to solve a problem CSS saves a lot of work External Style Sheets are stored in CSS files 4
CSS Syntax Example p{ } color: red; /* This is a single-line comment */ text-align: center; 5
CSS Selectors CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. The element Selector p{ text-align: center; color: red; } 6
CSS Selectors (cont. ) The id Selector • The id selector uses the id attribute of an HTML element to select a specific element. • An id should be unique within a page, so the id selector is used if you want to select a single, unique element. Example #para 1 { text-align: center; color: red; } /*Do NOT start an ID name with a number!*/ 7
CSS Selectors (cont. ) The class Selector • The class selector selects elements with a specific class attribute. • To select elements with a specific class, write a period character, followed by the name of the class: Example. center { text-align: center; color: red; } Or Example p. center { text-align: center; color: red; } /*Do NOT start an class name with a number!*/ 8
CSS Selectors (cont. ) Grouping Selectors h 1 { text-align: center; color: red; } h 1, h 2, p { text-align: center; color: red; } h 2 { text-align: center; color: red; } p{ text-align: center; color: red; } 9
CSS How To. . . Three Ways to Insert CSS • External style sheet • Inline style External Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> </head> 10
CSS How To. . . (cont. ) Internal Style Sheet <head> <style> body { } h 1 { background-color: linen; color: maroon; margin-left: 40 px; } </style> </head> 11
CSS How To. . . (cont. ) Inline Styles <h 1 style="color: blue; margin-left: 30 px; ">This is a heading. </h 1> Multiple Styles Will Cascade into One Styles can be specified: • in an external CSS file • inside the <head> section of an HTML page • inside an HTML element 12
CSS How To. . . (cont. ) Multiple Styles Will Cascade into One (cont. ) <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> <style> body {background-color: linen; } </style> </head> <body style="background-color: lightcyan"> <h 1>Multiple Styles Will Cascade into One</h 1> </body> ? 13
CSS Background Color • The background-color property specifies the background color of an element. Example body { background-color: #b 0 c 4 de; } With CSS, a color is most often specified by: • a HEX value - like "#ff 0000" • an RGB value - like "rgb(255, 0, 0)" • a color name - like "red" 14
CSS Background Image Example body { background-image: url("bgdesert. jpg"); } Background Image - Repeat Horizontally or Vertically Example body { background-image: url("gradient_bg. png"); background-repeat: repeat-x; } 15
CSS Background Image - Set position and no-repeat Example body { background-image: url("img_tree. png"); background-repeat: no-repeat; background-position: right top; } Background - Shorthand property Example body { background: #ffffff url("img_tree. png") no-repeat right top; } 16
CSS Text Color With CSS, a color is most often specified by: • a HEX value - like "#ff 0000" • an RGB value - like "rgb(255, 0, 0)" • a color name - like "red“ Example h 1 { color: #00 ff 00; } Text Alignment Example h 1 { text-align: center; } p { text-align: right; } p. test { text-align: justify; } 17
CSS Font Family Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Example p{ font-family: "Times New Roman", Times, serif; } Font Style • normal - The text is shown normally • italic - The text is shown in italics • oblique - The text is "leaning" (oblique is very similar to italic, but less supported) 18
CSS Font (cont. ) Font Style (cont. ) Example p. normal { font-style: normal; } p. italic { font-style: italic; } p. oblique { font-style: oblique; } 19
CSS Font (cont. ) Font Size - Set Font Size With Pixels h 1 { font-size: 40 px; } - Set Font Size With Em h 1 { font-size: 2. 5 em; /* 40 px/16=2. 5 em */ } Use a Combination of Percent and Em body { font-size: 100%; } h 1 { font-size: 2. 5 em; } 20
CSS Links Styling Links The four links states are: • 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 Example a: link { color: #FF 0000; } a: visited { color: #00 FF 00; } a: hover { color: #FF 00 FF; } a: active { color: #0000 FF; } 21
CSS Links (cont. ) Text Decoration Example a: link { text-decoration: none; } a: visited { text-decoration: none; } a: hover { text-decoration: underline; } a: active { text-decoration: underline; } Background Color Example a: link { background-color: red; } a: visited { background-color: blue; } a: hover { background-color: green; } a: active { background-color: black; } 22
CSS Tables Table Borders Example table, th, td { border: 1 px solid black; } Collapse Borders Example table { border-collapse: collapse; } table, th, td { border: 1 px solid black; } 23
CSS Tables (cont. ) Table Width and Height Example table { width: 100%; } th { height: 50 px; } Horizontal Text Alignment Example th { text-align: left; } Vertical Text Alignment Example td { height: 50 px; vertical-align: bottom; } 24
CSS Tables (cont. ) Table Padding Example td { padding: 15 px; } Table Color Example table, td, th { border: 1 px solid green; } th { background-color: green; color: white; } 25
CSS Border Width Border Color Example p. one { border-style: solid; border-width: 5 px; } Example p. two { border-style: solid; border-color: #98 bf 21; } Border - Individual sides Border - Shorthand property Example p{ border: 5 px solid red; } Example p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } 26
CSS Margin - Individual sides Example p{ margin-top: 100 px; margin-bottom: 100 px; margin-right: 150 px; margin-left: 50 px; } Margin - Shorthand property Example p{ margin: 100 px 50 px; } 27
CSS Margin (cont. ) The margin property can have from one to four values. • margin: 25 px 50 px 75 px 100 px; – – top margin is 25 px right margin is 50 px bottom margin is 75 px left margin is 100 px • margin: 25 px 50 px 75 px; – top margin is 25 px – right and left margins are 50 px – bottom margin is 75 px • margin: 25 px 50 px; – top and bottom margins are 25 px – right and left margins are 50 px • margin: 25 px; – all four margins are 25 px 28
CSS Padding - Individual sides Example p{ padding-top: 25 px; padding-right: 50 px; padding-bottom: 25 px; padding-left: 50 px; } Padding - Shorthand property Example p{ padding: 25 px 50 px; } 29
CSS Padding (cont. ) The padding property can have from one to four values. • padding: 25 px 50 px 75 px 100 px; – – top padding is 25 px right padding is 50 px bottom padding is 75 px left padding is 100 px • padding: 25 px 50 px 75 px; – top padding is 25 px – right and left paddings are 50 px – bottom padding is 75 px • padding: 25 px 50 px; – top and bottom paddings are 25 px – right and left paddings are 50 px • padding: 25 px; – all four paddings are 25 px 30
CSS Display and Visibility Hiding an Element - display: none or visibility: hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout: Example h 1. hidden { visibility: hidden; } display: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: Example h 1. hidden { display: none; } 31
CSS Float How Elements Float Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. Example img { float: right; } Floating Elements Next to Each Other Example. thumbnail { float: left; width: 110 px; height: 90 px; margin: 5 px; } Turning off Float - Using Clear Example. text_line { clear: both; } 32
CSS 3 Modules • • • Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2 D/3 D Transformations Animations Multiple Column Layout User Interface 33
CSS 3 Rounded Corners Example • #rcorners 1 { border-radius: 25 px; background: #8 AC 007; padding: 20 px; width: 200 px; height: 150 px; } 34
CSS 3 Rounded Corners (cont. ) CSS 3 Rounded Corners 1. Four values - border-radius: 15 px 50 px 30 px 5 px: 2. Three values - border-radius: 15 px 50 px 30 px: 3. Two values - border-radius: 15 px 50 px: 35
CSS 3 Backgrounds CSS 3 Multiple Backgrounds #example 1 { background-image: url(pic 1. gif), url(pic 2. gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } OR #example 1 { background: url(pic 1. gif) right bottom no-repeat, url(pic 2. gif) left top repeat; } 36
CSS 3 Backgrounds CSS 3 Multiple Backgrounds #example 1 { background-image: url(pic 1. gif), url(pic 2. gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } OR #example 1 { background: url(pic 1. gif) right bottom no-repeat, url(pic 2. gif) left top repeat; } 37
CSS 3 Colors CSS supports color names, hexadecimal and RGB colors. In addition, CSS 3 also introduces: • RGBA colors • HSLA colors • opacity 38
CSS 3 Colors (cont. ) RGBA Colors #p 1 { background-color: rgba(255, 0, 0, 0. 3); } HSL Colors #p 1 { background-color: hsl(120, 100%, 50%); } /* green */ HSLA Colors #p 1 { background-color: hsla(120, 100%, 50%, 0. 3); } /* green with opacity */ Opacity #p 1 { background-color: rgb(255, 0, 0); opacity: 0. 6; } /* red with opacity */ 39
CSS 3 Gradients CSS 3 Linear Gradients Syntax background: linear-gradient(direction, color-stop 1, color-stop 2, . . . ); Linear Gradient - Top to Bottom (this is default) Example #grad { background: -webkit-linear-gradient(red, blue); /* For Safari 5. 1 to 6. 0 */ background: -o-linear-gradient(red, blue); /* For Opera 11. 1 to 12. 0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3. 6 to 15 */ } background: linear-gradient(red, blue); /* Standard syntax */ 40
CSS 3 Gradients (cont. ) CSS 3 Linear Gradients (cont. ) Linear Gradient - Left to Right Example #grad { background: linear-gradient(to right, red, blue); /* Standard syntax */ } Linear Gradient – Diagonal #grad { background: linear-gradient(to bottom right, red, blue); /* Standard syntax */ } 41
CSS 3 Shadow Effects Text shadow effect! h 1 { text-shadow: 2 px; } Text shadow effect! h 1 { text-shadow: 2 px red; } Text shadow effect! h 1 { text-shadow: 2 px 5 px red; } Text shadow effect! h 1 { color: white; text-shadow: 2 px 5 px red; } 42
CSS 3 Shadow Effects (cont. ) CSS 3 box-shadow Property div { box-shadow: 10 px; } Text shadow effect! h 1 { box-shadow: 10 px grey; } Text shadow effect! h 1 { box-shadow: 10 px 5 px grey; } 43
CSS 3 Text Overflow Example p. test 1 { white-space: nowrap; width: 200 px; border: 1 px solid #000000; overflow: hidden; text-overflow: clip; } p. test 2 { white-space: nowrap; width: 200 px; border: 1 px solid #000000; overflow: hidden; text-overflow: ellipsis; } 44
CSS 3 Text (cont. ) CSS 3 Word Wrapping Example p{ word-wrap: break-word; } CSS 3 Word Breaking Example p. test 1 { word-break: keep-all; } p. test 2 { word-break: break-all; } 45
CSS 3 Web Fonts Using The Font You Want Example @font-face { font-family: my. First. Font; src: url(sansation_light. woff); } div { font-family: my. First. Font; } 46
CSS 3 2 D & 3 D Transforms CSS 3 2 D Transforms • translate() • rotate() • scale() • skew. X() • skew. Y() • matrix() CSS 3 3 D Transforms • rotate. X() • rotate. Y() • rotate. Z() 47
CSS 3 Transitions CSS 3 transitions allows you to change property values smoothly (from one value to another), over a given duration. Example: Mouse over the element below to see a CSS 3 transition effect 48
CSS 3 Animations CSS 3 animations allows animation of most HTML elements without using Java. Script or Flash! 49
CSS 3 Multiple Columns CSS 3 Multi-column Layout 50
CSS 3 User Interface CSS 3 Resizing 51
CSS 3 Box Sizing The CSS 3 box-sizing property allows us to include the padding and border in an element's total width and height. 52
THE END 53
Master xpath and css selectors for selenium webdriver
W 3 schools
Supply relay of pantograph selectors
Action selectors in mvc
Jquery optimization selectors
Syntax directed translation scheme
Carrier content and real content in esp
Static content vs dynamic content
Notasi bnf
Simple and complex words examples
Introduction to dynamic web content
Web content management tools capabilities
Introduction to dynamic web content
What is content means
Introduction paragraph format
Syntax xml
Abdurazik
Hola a rozvita veta
Didls language
Use case syntax
Simple object access protocol
Probability syntax
Probability syntax
Syntax and diction
Nadvetná syntax
Bnf operators in stm
Syntax vs grammar
Syntax analysis sentence structure
Syntax literary definition
Syntax symbols and meanings
Syntax refers to
Syntax vs semantic
Syntax error handling
Input string
Syntax vs semantics
Syntax analysis in compiler design
The things they carried syntax
Switch statement syntax
Repeated measures anova spss
Parse tree for if else statement
Podmet
Syntax vs semantic
Syntax vs semantics
Inverted syntax
Syntax and grammar
Pseudo code syntax
Basic syntax in java
Assignment operator expression java
Nlp syntax
Syntax and meaning
Middle english words
Literary definition of syntax
Morphology syntax and semantics
Syntax rules
