30
FRONTEND WEB DEVELOPMENT FUNDAMENTALS
| Date post: | 16-Apr-2017 |
| Category: |
Technology |
| Upload: | acadgild |
| View: | 435 times |
| Download: | 2 times |
FRONTEND WEB DEVELOPMENTFUNDAMENTALS
Session - 3
CSS
Agenda
CSS 3
Sl No Agenda Title
1 Understanding CSS
2 CSS Syntax
3 Applying CSS
4 Cascading Order
5 CSS Selectors
6 CSS Selector Type
7 Combining Selectors
8 CSS Attribute Selectors
Sl No Agenda Title
9 CSS Box Model
10 CSS Properties
11 CSS Margin Property
12 CSS Links
13 Position Property
14 Specificity
15 CSS Media Queries
Understanding CSS
CSS 4
• What is style?
• Style is a list of formatting instructions.
• CSS stands for Cascading Style Sheets.
• CSS is a style sheet language used for describe how HTML elementsare to be displayed on screen, paper and in other media.
• A Cascading Style Sheet is a file with a list of formatting instructions.
• CSS style sheets are the modern way to control the appearance andlayout of your web pages.
CSS Syntax
CSS 5
• A CSS style rule is made of three parts −
1. Selector − A selector is an HTML tag at which a style will be applied. Thiscould be any tag like <h1> or <table> etc.
2. Property - A property is a type of attribute of HTML tag. Put simply, all theHTML attributes are converted into CSS properties. They could becolor, border etc.
3. Value - Values are assigned to properties. For example, color property canhave value either red or #F1F1F1 etc.
• CSS Rule Syntax :
• Example:
selector { property: value; }
table { border: 1px solid #C00;}
Applying CSS
CSS 6
• There are three ways to apply CSS to HTML: In-line, internal,and external.
• In-line styles are plonked straight into the HTML tags using the styleattribute.
• <p style="color: red">text</p>
• Embedded, or internal, styles are used for the whole page. Inside thehead element, the style tags surround all of the styles for the page.
<!DOCTYPE html><html>
<head><title>CSS Example</title><style>
p { color: red; } a { color: blue; }
</style>...
Applying CSS (Contd.)
CSS 7
• External styles are used for the whole, multiple-page website.
• There is a separate CSS file.
• f this file is saved as “style.css” in the same directory as your HTML pagethen it can be linked to in the HTML like this:
p {color: red;
}a {
color: blue;}
• Example of style.css:<!DOCTYPE html><html>
<head><title>CSS Example</title><link rel="stylesheet" href="style.css">
...
• If this file is saved as “style.css” in the same directory as your HTML pagethen it can be linked to in the HTML like this.
Cascading Order
CSS 8
• What style will be used when there is more than one stylespecified for an HTML element?
• Styles will "cascade" into a new "virtual" style sheet by the rulesgiven below, number one has the highest priority :
• Inline style (inside an HTML element)
• Internal style sheets (in the head section)
• External style sheets (included from external file)
• So, an inline style (inside a specific HTML element) has thehighest priority, which means that it will override a style definedinside the <head> tag, or in an external style sheet.
CSS Selectors
CSS 9
• A CSS selector is the part of a CSS rule set thatactually selects the content you want to style.
• Let’s take a look at different kinds of selectors thatare available.
1. Universal Selector
2. Element/Tag Selector
3. ID Selector
4. Class Selector
CSS Selectors Types
CSS 10
1. Universal Selector:
• The universal selector is declared using an asterisk (*)
• The universal selector works like a wild card character,selecting all elements on a page.
• Example
• The three lines of code inside the curly braces will apply to allelements on the HTML page
* { color: green; font-size: 20px;line-height: 25px;
}
CSS Selectors Types (Contd.)
CSS 11
2. Element/Tag Selector:
• Also referred to as a “type selector”
• This selector must match one or more HTML elements of thesame name and selects elements based on element name.
• Example
• The following example uses an element type selector to matchall <ul> elements.
ul { list-style: none; border: solid 1px #CCC;
}
CSS Selectors Types (Contd.)
CSS 12
3. ID Selector
• An ID selector is declared using a hash, or pound symbol (#)preceding a string of characters.
• This selector matches any HTML element that has an IDattribute with the same value as that of the selector, but minusthe hash symbol.
• Example: #container { width: 960px; margin: 0 auto;
}
<div id=“container”></div>
CSS Selectors Types (Contd.)
CSS 13
4. Class Selector
• A class selector is declared with a dot preceding a string of oneor more characters.
• The class selector also matches all elements on the page thathave their class attribute set to the same value as the class,minus the dot.
• Example
• The same style can be applied to another element that hasclass attribute of box
.box { padding: 20px; margin: 10px;width: 240px;
}
<div class=“box”></div>
<div class=“box box-more”></div>
Combining Selectors
CSS 14
1. classname tagName
• This selects all the specific tagName element inside an element with the class className. Note the space between .className and tagName
2. tagName.className
• This selects the tagName with a className. Note that there is no space between tagName and .className.
<div class="className"><p>...</p><p>...</p><p class="cheese">...</p>
</div>
Example for .className tagName is:
.className p {color: brown;
}
Example for . tagName.className is:
p.cheese {color: yellow;
}
CSS Attribute Selectors
CSS 15
CSS Attribute Selectors Description
[attribute] selector Is used to select elements with a specified attribute.
[attribute=value] selector
Is used to select elements with a specified attribute and value.
[attribute~=value] selector
Is used to select elements with an attribute value containing a specified word.
[attribute|=value] selector
Is used to select elements with the specified attribute starting with the specified value.
[attribute*=value] selector
Is used to select elements whose attribute value contains a specified value.
[attribute$=value] selector
Is used to select elements whose attribute value ends with a specified value.
Points to Ponder
CSS 16
• What is CSS?
• A CSS style rule is made of which three parts ?
• What are different kinds of selectors available?
CSS Box Model
CSS 17
• All HTML elements can be considered as boxes.
• The term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML
element.
• It consists of: margins, borders, padding and the actual content.
• Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
CSS Box Model (Contd.)
CSS 18
div {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}
The total size of the element above will be calculated as follows:
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
CSS Properties
CSS 19
CSS Property Description
background For changing the background color and image of elements
background-color For setting just the background color of an element
background-image For setting just the background image of an element
background-position For setting the physical position of a specified background image
border For defining all aspects of a border on all sides of an element
border-color For setting only the color of the border on one or more sides of an element
border-style For setting only the style of a border on one or more sides of an element
border-top, border-right, border-bottom, border-left
For defining all three border properties at once on only one side of an element
border-width For defining the border's width on one or more sides of an element
color For setting the foreground color of an element
cursor For setting the cursor's shape
CSS Properties (Contd.)
CSS 20
CSS Property Description
display For determining how and if an element should be displayed
float For determining on which side of an element other elements are permitted to float
font For setting at least the font family and size, and optionally the style, variant, weight, and line-height of text
font-family For choosing the font family for text
font-size For setting the size of text
font-weight For applying, removing, and adjusting bold formatting
height For setting the height of an element
line-height For setting the amount of space between lines of text
margin For setting the amount of space between one or more sides of an element's border and its parent element
margin-top, margin-right, margin-bottom, margin-left
For setting the amount of space between only one side of an element's border and its parent element
CSS Properties (Contd.)
CSS 21
CSS Property Description
max-height, max-width For setting the maximum height and/or width of an element, respectively
min-height, min-width For setting the minimum height and/or width of an element, respectively
overflow For determining where extra content should go if it does not fit in the element's content area
padding For specifying the distance between one or more sides of an element's content area and its border
padding-top, padding-right, padding-bottom, padding-left
For specifying the distance between one side of an element's content area and its border
position For determining how an element should be positioned with respect to the document's flow
width For setting the width of an element
z-index For setting the depth of an element with respect to overlapping elements
CSS Margin Property
CSS 22
• margin : 0 auto : center aligns an element horizontally
• Align an element on center of screen both vertically andhorizontally
.box { margin: 0 auto;width: 240px;
}
.vh-center{ width: 240px;position:absolute;top: 0px;bottom: 0px;left:0px;right: 0px;margin: auto;
}
CSS Links
CSS 23
• Links can be styled using 4 different selectors.
• You can apply any valid CSS style using any of these 4 selectors.
/* unvisited link */a:link {
color: #FF0000;}
/* visited link */a:visited {
color: #00FF00;}
/* mouse over link */a:hover {
color: #FF00FF;}
/* selected link */a:active {
color: #0000FF;}
Position Property
CSS 24
• The Position Property specifies the type of positioning method used for anelement (static, relative, fixed or absolute).
• There are four different position values:
a) Static: HTML elements are positioned static by default. elements are not
affected by the top, bottom, left, and right properties.
b) Relative: Elements are positioned relative to its normal position. Settingthe top, right, bottom, and left properties of a relatively-positioned elementwill cause it to be adjusted away from its normal position.
c) Fixed: Elements are positioned relative to the viewport.
• top, right, bottom, and left properties are used to position the element
d) Absolute: Elements are positioned relative to the nearest positionedancestor
Position Property (Contd.)
CSS 25
Overlapping Elements
• When elements are positioned, they can overlap other elements.
• The z-index property specifies the stack order of an element
Example:
img {position: absolute;top: 0px;z-index: -1;
}
Specificity
CSS 26
• Specificity is the means by which a browser decides whichproperty values are the most relevant to an element and thuswill be applied.
Rule:
<ID selector count>:<class selectors count>:< tags selector count>
Example:• Selector with score of 1:0:0 is higher than score of 0:4:1.• Selector with score 0:1:0 is higher than 0:0:4
Note: A selector with a greater specificity score overwrites theother selector with lesser specificity irrespective of the orderwhere the rules are written.
CSS Media Queries
CSS 27
• A media query consists of a media type and at least oneexpression that limits the style sheet’s scope by using mediafeatures, such as width, height, and color.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width:800px)"
href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px)
{ .facet_sidebar
{ display: none; }
}
</style>
Points to Ponder
CSS 28
• CSS box model consists of ___________ ?
• Position Property : What are four different positionvalues ?
• What is specificity ?
![CSS161 Fundamentals#of#Compu3ng# …courses.washington.edu/css161/umurthy/learning... · [CSS’422’and’CSS’430’go’into’much’further’depth]’ ... CSS#161:#Fundamentals#of#Compu3ng#](https://static.documents.pub/doc/80x56/5ec55b099e7020370409bb10/css161-fundamentalsofcompu3ng-cssa422aandacssa430agoaintoamuchafurtheradeptha.jpg)
