css overview introduction to cascading style sheets styling html with css softuni team technical...
Post on 26-Dec-2015
241 Views
Preview:
TRANSCRIPT
CSS Overview Introducti on to Cascading Style Sheets
Styling HTML with CSS
SoftUni TeamTechnical TrainersSoftware Universityhttp://softuni.bg
2
1. What is CSS?
2. CSS Basic Selectors and Rules
3. Select by element Name, Id or Class
4. Importing CSS into HTML Inline, Embedded and External Styles
5. Nested Selectors, Attribute Selectors,Pseudo Selectors
6. CSS Values: Types, Ranges, Units
7. Default Browser Styles
8. CSS Rules Precedence
Table of Contents
margin: 2px;
position: absolute;
color: #2aa0bd;display: inline;
width: 150px;
font-family: Arial;body { … }
border: 0;background: #4ae871;
border: 1px solid blue;
left: 0;
4
Separate content from presentation!
CSS: Philosophy
Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus.
BoldItalicsIndent
Content (HTML document)
Presentation(CSS document)
5
The Resulting Page
TitleLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.
• Vestibulum et odio et ipsum• accumsan accumsan. Morbi at• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec, interdum vel, mi. Sed nec quam nec odio lacinia molestie. Praesent augue tortor, convallis eget, euismod nonummy, lacinia ut, risus.
7
Cascading Style Sheets (CSS) Used to describe the presentation of documents Define sizes, spacing, fonts, colors, layout, etc. Improve content accessibility Improve flexibility
Designed to separate presentation from content Due to CSS, all HTML presentation tags and attributes are
deprecated, e.g. <font>, <center>, <b>, <i>, etc.
CSS Introduction
8
CSS Stylesheets consist of rules, selectors, declarations, properties and values
Selectors are separated by commas Declarations are separated by semicolons Properties and values are separated by colons
CSS Style Sheets Syntax
h1, nav h2, h3.big, #title { color: green; font-weight: bold }
9
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
Why “Cascading”?
11
Some CSS styles are inherited and some are not Text-related and list-related properties are inherited:
color, font-size, font-family, line-height, text-align, list-style, text-decoration etc.
Box-related and positioning styles are not inherited: width, height, border, margin, padding, position, float,
etc.
<a> and <input> elements do not inherit color and text-decoration
Style Inheritance
12
CSS can be applied to any XML document Not just to HTML / XHTML
CSS can specify different styles for different media On-screen In print Handheld, projection, etc. … even by voice or Braille-based reader @media screen / @media print / @media tv
CSS, HTML and Media
14
CSS Selectors determine which element the rules apply to: All elements of specific type (tag) Those that match a specific attribute (id, class) Elements may be matched depending on how they are nested in
the document tree (HTML)
Examples:
CSS Selectors
.header a { color: green }
#menu>li { padding-top: 8px }
15
By tag (element selector):
By element ID:
By class name (only for HTML):
Primary Selectors
h1 { font-family: Verdana, sans-serif; }p { margin: 0; color: #EEE; }
#element_id { color: #ff0000; }#wrapper { margin: 0 auto; }
.myClass { border: 1px solid red; }
.special { font-weight: bold; color: yellow; }
16
Match relative to element placement Matches direct and indirect child elements:
This matches all <a> tags that are inside of <p class="item"> * – universal (wildcard) selector (avoid or use with care!)
This matches all descendants of the <p> element:
Matching all elements in the page:
Nested Selectors
p.item a { text-decoration: underline }
p * { color: black }
* { background: #E5E5E5 }
17
+ selector – used to match “next sibling”:
Matches all siblings with class name link after <img> element > selector – matches direct child nodes:
Matches all elements with class error, direct children of <p> .class1.class2 (no space!)
Matches elements with both (all) classes applied at the same time
Nested Selectors (2)
p > .error { font-size: 8px }
p.post-text.special { font-weight: bold }
img + .link { float: right }
[] selects elements based on attributes Selects <a> elements which has title attribute:
Selects <input> elements with type='text'
Selects <a> elements whose title contains the word "logo":
Attribute Selectors
a[title] { color: black }
input[type='text'] { font-family: Consolas }
a[title*=logo] { border: none }
#reg-form input[type='text'] { background: #EEE }
19
Selectors can be combined with commas:
This matches <h1> tags, elements with class "link", and the element with id "top-link"
Resetting the browsers default margins and paddings:
Combined CSS Selectors
h1, .link, #top-link { font-weight: bold; }
html, body, div, h1, ul, li, a, img, span, form, legend, input, button, textarea, fieldset { margin: 0; padding: 0;}
h1, .link, #top-link { font-weight: bold; }
html, body, div, h1, ul, li, a, img, span, form, legend, input, button, textarea, fieldset { margin: 0; padding: 0;}
20
We can combine selectors to achieve more specific rules
Don't put spaces between combined selectors "A space B" means B descendant of A; AB means "A and B"
Combining Multiple Selectors
<h1 id="header" class="intro">HTML and CSS</h1>
h1#header.intro:hover { text-decoration: underline; color: #C00;}
23
CSS (presentation) can be put in HTML (content) in three ways: Inline: the CSS rules in the style attribute
No selectors are needed
Embedded: in the <head> in a <style> element External: CSS rules in separate file (best)
Usually a file with .css extension Linked via <link rel="stylesheet" href="…"> Via the @import directive in embedded CSS block
Importing CSS Into HTML
24
Using external CSS files is highly recommended Simplifies the HTML document Improves page load speed (CSS files are cached)
Linking HTML and CSS (2)
HTML links to an
external CSS file
25
Inline Styles: Example<!DOCTYPE html><html lang="en"><head> <title>Inline Styles</title></head><body> <p>Here is some text</p> <!--Separate multiple styles with a semicolon--> <p style="font-size: 20pt">Here is some more text</p> <p style="font-size: 20pt; color: #0000FF">Even more text</p> </body></html>
26
Embedded in the HTML in the <style> tag:
The <style> tag is placed in the <head> section of the document
type attribute specifies the MIME type MIME describes the format of the content Other MIME types: text/html, image/gif, text/plain, … Not required in HTML5
Used for document-specific styles
Embedded Styles
<style type="text/css">
27
Embedded Styles: Example
<!DOCTYPE html><html><head> <title>Style Sheets</title> <style type="text/css"> em {background-color:#8000FF; color:white} h1 {font-family:Arial, sans-serif} p {font-size:18pt} .blue {color:blue} </style><head>
28
Embedded Styles: Example (2)…<body> <header> <h1 class="blue">A Heading</h1> </header> <article> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p> <h1>Another Heading</h1> <p class="blue">Here is some more text. Here is some more text.</p> <p class="blue">Here is some <em>more</em> text. Here is some more text.</p> </article></body></html>
…<body> <header> <h1 class="blue">A Heading</h1> </header> <article> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p> <h1>Another Heading</h1> <p class="blue">Here is some more text. Here is some more text.</p> <p class="blue">Here is some <em>more</em> text. Here is some more text.</p> </article></body></html> 29
Embedded Styles: Example (3)
30
External linking Separate pages can all use a shared style sheet Modify a single file to change the styles across your entire Web site
<link rel="stylesheet"> Specifies a relationship between documents (HTML and CSS)
The <link> elements should be in the <head>
External CSS Styles
<link rel="stylesheet" type="text/css" href="styles.css">
31
@import
Another way to link external CSS files
Insert a CSS file into another CSS file:
Ancient browsers do not recognize @import
External CSS Styles (2)
<style type="text/css"> @import url("styles.css"); /* same as */ @import "styles.css";</style>
32
External Styles: Example
/* CSS Document */
a { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #CCFFCC }
li em { color: red; font-weight: bold }
ul { margin-left: 2cm }
ul ul { text-decoration: underline; margin-left: .5cm }
33
External Styles: Example (2)
<!DOCTYPE html><html><head> <title>Importing style sheets</title> <link type="text/css" rel="stylesheet" href="styles.css" /></head><body> <h1>Shopping list for <em>Monday</em>:</h1> <li>Milk</li> …
34
External Styles: Example (3) … <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li></ul><a href="http://food.com" title="grocery store">Go to the Grocery store</a></body></html>
36
Pseudo-classes define state :hover, :visited, :active, :lang
Pseudo-elements define element "parts" or are used to generate content :first-line, :before, :after
Common Pseudo Selectors
a:hover { color: red }p:first-line { text-transform: uppercase }.title:before { content: "»" }.title:after { content: "«" }
38
:root The root of the document
E:nth-child(n) An E element, the n-th child of its parent
E:nth-last-child(n) An E element, the n-th child of its parent, counting from the last
on E:nth-of-type(n)
An E element, the n-th sibling of its type
Structural Pseudo-Classes
39
E:nth-last-of-type(n) An E element, the n-th sibling of its type, counting from the last
one E:last-child
An E element, last child of its parent E:first-of-type
An E element, first sibling of its type E:last-of-type
An E element, last sibling of its type
Structural Pseudo-Classes (2)
40
E:only-child An E element, only child of its parent
E:only-of-type An E element, only sibling of its type
E:empty An E element that has no children (including text nodes)
More detailed descriptions:http://www.w3.org/TR/css3-selectors/#structural-pseudos
Structural Pseudo-Classes (3)
42
E:enabled A user interface element E which is enabled
E:disabled A user interface element E which is disabled
E:checked A user interface element E which is checked (for instance a radio-
button or checkbox) Currently supported only in Opera and IE10 !
The UI Element States Pseudo-Classes
44
E:target An E element being the target of the referring URI
E:not(s) An E element that does not match simple selector
E ~ F An F element preceded by an E element
Other CSS 3 Selectors
47
All values in CSS are strings They can represent values that are not strings I.e. 14px means size 14 pixels
Colors are set in a red-green-blue format (RGB) Both in hex and decimal
CSS Values
li.nav-item { color: #44f1e1 }
li.nav-item { color: rgb(68, 241, 255) }
48
When setting a size (width, height, font-size, …) the values are given as numbers Multiple formats / metrics may be used Pixels, ems, rems, e.g. 12px, 1.4em, 1.2rem Points, inches, centimeters, millimeters
E.g. 10pt, 1in, 1cm, 1mm Percentages, e.g. 50%
Of the size of the container / current font size Zero can be used with no unit: border: 0;
Size Values
50
Colors in CSS can be represented in few ways Using red-green-blue
Or red-green-blue-alpha
Using hue-saturation-light Or hue-saturation-light-alpha
Color Values
color: #f1a2ffcolor: rgb(241, 162, 255)color: rgba(241, 162, 255, 0.1)
The opacity values are from 0.0 to
1.0
color: hsl(291, 85%, 89%);color: hsl(291, 85%, 89%, 0.1);
51
RGB colors are defined with values for red, green and blue intensity
Syntax: #44fa36 – values are in hex rgb(<red>, <green>, <blue>) – decimal values
The range for red, green and blue is between integers 0 and 255
RGB Colors
color: #07f2b3 <!– or -->color: rgb (7, 242, 179)
52
Standard RGB colors with an opacity value for the color(alpha channel)
Syntax: rgba(<red>, <green>, <blue>, <alpha>)
The range for red, green and blue is in range [0…255] The range for the alpha channel is between 0.0 and 1.0
Example: rgba(255, 0, 0, 0.5)
RGBA Colors
53
Hue is a degree on the color wheel 0 (or 360) is red, 120 is green, 240 is blue
Saturation is a percentage value 100% is the full color
Lightness is also a percentage 0% is dark (black) 100% is light (white) 50% is the average
HSL Colors
54
HSLA allows a fourth value, which sets the Opacity (via the Alpha channel) of the element
As RGBA is to RGB, HSLA is to HSL Supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+ Example:
hsla(0, 100%, 50%, 0.5)
Result:
HSLA Colors
57
Browsers have predefined CSS styles Used when there is no CSS information or any other style
information in the document Caution: default styles differ in browsers
Margins, paddings and fonts differ most often Usually developers reset them
Default Browser Styles
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }
58
There are browser, user and author stylesheets with "normal" and "important" declarations Browser styles (defined by the user-agent, least priority) Normal user styles (defined in the browser's user settings) Normal author styles (external, in head, inline) Important author styles (defined with !important) Important user styles (max priority)
CSS Cascade (Precedence)
a { color: red !important ; }
59
Conflicting style definitions are resolved by priority Priorities of the style definitions
1. External <link rel="stylesheel" href="…">
2. Styles in the <head><style>…</style></head>
3. Inline style attributes: <p style="…">
4. Using !important
Order of Style Definitions
h1.big {color:red !important}
60
Selector priorities depend on:
Selector Priority (Specificity)
0 0 0 0inline styles number of
id selectorsnumber of
classselectors
number ofelementselectors
61
Selector Priority (Specificity) – Example
p { color: #FFF } 0, 0, 0, 1
.intro { color: #345678 } 0, 0, 1, 0
#header { color: #000 } 0, 1, 0, 0
<p style="color: blue">Text</p> 1, 0, 0, 0
p.intro#header { color: #FFF } 0, 1, 1, 1
p.intro.big#header { color: #FFF } 0, 1, 2, 1
p { color: #000 !important } important
63
CSS Tricks http://css-tricks.com
The CSS documentation at WebPlatform.org: http://docs.webplatform.org/wiki/css
CSS documentation at Mozilla https://developer.mozilla.org/en-US/docs/CSS
CSS3 tutorial http://www.w3schools.com/css3/
CSS References
64
1. CSS stylesheets are sequences of rules Each rule has a selector and holds declarations (property + value)
2. CSS stylesheets can be external, internal and inline External CSS files are recommended in most cases
3. CSS selectors work by tag, by id, by class, etc. Nested selectors and pseudo-selectors
4. CSS values use different formats and metrics Pixels, inches, points, RGB colors, HSL colors, etc.
Summary
Questions??
??
?
?
??
?
?
https://softuni.bg/courses/web-fundamentals/
CSS Overview
License
This course (slides, examples, demos, videos, homework, etc.)is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license
66
Attribution: this work may contain portions from "HTML Basics" course by Telerik Academy under CC-BY-NC-SA license
"CSS Styling" course by Telerik Academy under CC-BY-NC-SA license
SoftUni Diamond Partners
Free Trainings @ Software University Software University Foundation – softuni.org Software University – High-Quality Education,
Profession and Job for Software Developers softuni.bg
Software University @ Facebook facebook.com/SoftwareUniversity
Software University @ YouTube youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg
top related