introduction to css - university of babylon › eprints › publication_11_26283_6025.pdf ·...
TRANSCRIPT
INTRODUCTION TO CSS
Mohammad Jawad Kadhim
WHAT IS CSS
Like HTML, CSS is an interpreted language. When a web page request is processed by a web server, the server’s response can include style sheets, which are simply collections of cascading style instructions. The style sheets can be Included in the server’s response In three ways:
External style sheet files.Internal style sheet embedded directly in the web pageInline style sheets
EXTERNAL STYLE SHEET
You link external style sheets into web pages by using the HTML<link> tag.
<link href="css/main.css“ rel="stylesheet" />
You can also use the CSS import statement directly in your stylesheet to actually link multiple style sheets together:
@import url("secondary.css");
A single web page can contain multiple style sheet references
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Sample</title>
<link href="primary.css" type="text/css" rel="stylesheet" />
<link href="secondary.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div>Lorem Ipsum</div>
</body>
</html>
INTERNAL STYLE SHEETS
Internal style sheets are collections of CSS styles that are storedinternally in a single web page. The styles are located inside of theHTML <style> tag, which is generally located in the <head> sectionof the web page.
<head>
<title></title>
<style type="text/css">
body { }
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Sample</title>
<style type="text/css">
body {
font-family: Arial;
font-size: medium;}
</style>
</head>
<body>
<div>Lorem Ipsum</div>
</body>
</html>
INLINE STYLE SHEETInline style are CSS styles that are applied directly to an individual HTML element using the element’s style attribute, which is available on most HTML elements.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=“font-family:Arial;”>Lorem Ipsum</div>
</body>
</html>
Now lets imagine amazon without CSS
TWO CONTENT LAYOUT WITH TABLE
• First bullet point here
• Second bullet point here
• Third bullet point here
Class Group A Group B
Class 1 82 95
Class 2 76 88
Class 3 84 90
Cascading
+
Style Sheet
THE STYLESHEET
• A stylesheet is a set of rules defining how an html element will be “presented” in the browser.
• These rules are targeted to specific elements in the html document.
THE CASCADE
• The “cascade” part of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements.
• For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will “trump” the other.
Browser stylesheet
Linked (external) stylesheet
Embedded (internal) stylesheet
Inline (internal) Styles
hig
h im
po
rtan
celo
w im
po
rtan
ce
INHERITANCE
Most elements will inherit many style properties from their parent elements by default.
HTML
<body>
<div>
<ul>
<li></li>
</ul>
</div>
</body>
Relationship
parent of site
parent of ul and li, child of body
parent of li, child of div and body
child of ul, div, and body
SPECIFICITY
• Shortly after styling your first html elements, you will find yourself wanting more control over where your styles are applied.
• This is where specificity comes in.
• Specificity refers to how specific your selector is in naming an element.
Three terms for describing your styles:
CSS rule
CSS selector
CSS RULE
selector {property: value;}
Declaration
Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair. Together they are called a CSS Rule.
CSS RULE
the browser is responsible for parsing the styles and applying them to theappropriate HTML elements in the web page.
if a style is stored in either an external or internal style sheet, the style will bedefined as a CSS rule.
Rules are what the browser uses to determine what styling to apply to whichHTML elements.
Note: inline style do not need to be defined as a rule because they are automatically applied to the element they are included with
CSS SELECTOR
body {font-family: Arial, Helvetica}
p {color: #666666}
h1 {font-size: 24px}
a {color: blue}
The selector associates css rules with HTML elements.
Universal Selectors
Style should apply to any element in the web page
* {
font-family: Arial;
}
Type Selector
create a style that applies to a specific type of HTML element
P {
font-family: Arial;
}
Descendant Selectors
create styles that target HTML elements that are descendants of a specific type of element.
div span {
font-family: Arial;
}
Child Selectors
The Child selector is similar to the Descendant selector except unlike the Descendantselector, which searches the entire descendant hierarchy of an element, the Child selectorrestricts its element search to only those elements that are direct children of the parentelement.
div > span
{
font-family:Arial;
}
Attribute Selectors
Attribute selectors enable you to define a style that is applied to elements based on the existence of element attributes rather than the actual element name.
*[href]
{
font-family:Arial;
}
Adjacent selector
Select HTML element that are immediately adjacent to another element type
li
{
color: maroon;
}
li + li
{
color: silver;
}
Class Selectors
Allow you to apply a style to any element with a specific class name
.title
{
font-size: larger;
font-weight: bold
}
This CSS rule would then be applied to any element whose class attribute value matched the rule name
<div class=“title”> abcd</div>
ID Selectors
Allow you to create style that target elements with specific ID value
#title
{
font-size: larger;
font-weight: bold
}
This CSS rule would then be applied to any element whose ID attribute value matched the rule name
<div id=“title”> abcd</div>
Selector Grouping
When creating CSS rules, CSS allows you to group several selectors together into a single rule.
h1, h2, h3
{
Color: blue;
}