1 what is css? css stands for cascading style sheets styles define how to display html elements ...
TRANSCRIPT
1
What is CSS?What is CSS?
CSS stands for Cascading Style Sheets CSS stands for Cascading Style Sheets
Styles define how to display HTML elements Styles define how to display HTML elements
Styles are normally stored in Style Sheets Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS filesExternal Style Sheets are stored in CSS files
Multiple style definitions will cascade into oneMultiple style definitions will cascade into one
With CSS, your HTML document can be displayed With CSS, your HTML document can be displayed
using different output stylesusing different output styles
2
Advantages of CSS?
With CSS, you will be able to:
- define the look of your pages in one place rather than repeating yourself over and over again throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!)
- easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!)
3
- - define font sizes and similar attributesdefine font sizes and similar attributes
with the same accuracy as you have with a word with the same accuracy as you have with a word
processor - not being limited to just the seven different processor - not being limited to just the seven different
font sizes defined in HTML.font sizes defined in HTML.
- - position the contentposition the content of your pages with pixel of your pages with pixel
precision.precision.
- - redefine entire HTML tagsredefine entire HTML tags. Say for example, if you . Say for example, if you
wanted the bold tag to be red using a special font - this wanted the bold tag to be red using a special font - this
can be done easily with CSScan be done easily with CSS
4
- - define customized styles for linksdefine customized styles for links - such as getting rid of - such as getting rid of the underline.the underline.
- - define layersdefine layers that can be positioned on top of each other that can be positioned on top of each other (often used for menus that pop up).(often used for menus that pop up).
5
Disadvantages of CSS?
- these will only work on version 4 browsers or these will only work on version 4 browsers or newernewer. However, more than 95% of all browsers live up . However, more than 95% of all browsers live up to that.to that.
6
Cascading orderCascading order
Style will “cascade” into a new “virtual” style sheet by the Style will “cascade” into a new “virtual” style sheet by the
following rules, where number 4 has the highest priorityfollowing rules, where number 4 has the highest priority
1.1. Browser defaultBrowser default
2.2. External Style SheetExternal Style Sheet
3.3. Internal Style Sheet (inside the <head> tag)Internal Style Sheet (inside the <head> tag)
4.4. Inline Style (inside HTML element)Inline Style (inside HTML element)
So, an inline style has the highest priority, which mean that it So, an inline style has the highest priority, which mean that it
will override every style declared inside the <head> tag, in an will override every style declared inside the <head> tag, in an
external style sheet, and in a browser (a default value)external style sheet, and in a browser (a default value)
7
CSS syntaxCSS syntax
•The syntax is made up of three parts: The syntax is made up of three parts: •a selectora selector
normally the element/tag you wish to definenormally the element/tag you wish to define•a propertya property
the attribute you wish to changethe attribute you wish to change•a valuea value
each property can take a valueeach property can take a value
•The property and value are separated by a colon and The property and value are separated by a colon and
surrounded by curly bracessurrounded by curly braces
selector { property : value }
body { color : black }
8
CSS syntaxCSS syntax
•If the value is multiple words, put quotes around the valueIf the value is multiple words, put quotes around the value
•If you wish to specify more than one property, you should If you wish to specify more than one property, you should
separate each property with semi-colon.separate each property with semi-colon.•The example below shows how to define a center aligned The example below shows how to define a center aligned
paragraph, with a red text colorparagraph, with a red text color
p { font-family : “sans serif” }
p { text-align : center ; color : red }
9
GroupingGrouping
•You can group selectorsYou can group selectors•Each selector need to be separate with a commaEach selector need to be separate with a comma•The example below have grouped all the header elements. The example below have grouped all the header elements.
Each header element will be greenEach header element will be green
h1, h2, h3, h4, h5, h6 { color: green }
10
The class attributeThe class attribute
•With the class attribute you can define different styles for With the class attribute you can define different styles for
the same elementthe same element•Example below show how to set a 2 types of different Example below show how to set a 2 types of different
paragraphparagraph
p.right {text-align: right}p.right {text-align: right}
p.center {text-align: center}p.center {text-align: center}•You have to use the class attribute in your HTML documentYou have to use the class attribute in your HTML document
<p class=“right”> This paragraph will <p class=“right”> This paragraph will
be right-aligned </p>be right-aligned </p>
<p class=“center”> This paragraph will <p class=“center”> This paragraph will
be center-aligned </p>be center-aligned </p>
11
The class attributeThe class attribute
•You can also omit the tag name in the selector to define a You can also omit the tag name in the selector to define a
style that can be used by many elementsstyle that can be used by many elements•egeg. . .center {text-align: center}.center {text-align: center}
•To use the style we can look at the example belowTo use the style we can look at the example below
<h1 class=“center”><h1 class=“center”>
This heading will be center-aligned This heading will be center-aligned
</h1></h1>
<p class=“center”><p class=“center”>
This paragraph will also be center-This paragraph will also be center-
aligned </p>aligned </p>
12
CSS commentsCSS comments
You can insert comments in CSS to explain your code, You can insert comments in CSS to explain your code,
which can help you when you edit the source code at a which can help you when you edit the source code at a
later datelater date
A comment will be ignored by the browserA comment will be ignored by the browser
CSS comment begin with /* and end with */CSS comment begin with /* and end with */
egeg /* This is a comment *//* This is a comment */
13
How to insert a Style SheetHow to insert a Style Sheet
There are 3 ways of inserting a style sheetThere are 3 ways of inserting a style sheet
External Style SheetExternal Style Sheet
Internal Style SheetInternal Style Sheet
Inline Style SheetInline Style Sheet
14
External Style SheetExternal Style Sheet
An external style sheet is ideal when the style is applied to An external style sheet is ideal when the style is applied to
many pagesmany pages
With an external style sheet, you can change the look of an With an external style sheet, you can change the look of an
entire web site by changing one fileentire web site by changing one file
Each page must link to the style sheet using the <link> tagEach page must link to the style sheet using the <link> tag
The <link> tag goes inside the head sectionThe <link> tag goes inside the head section
<head><link rel=“stylesheet” type=“text/css” href=“mystyle.css” /></head>
15
External Style SheetExternal Style Sheet
The browser will read the style definitions from the file The browser will read the style definitions from the file
mystyle.css, and format the document according to itmystyle.css, and format the document according to it
An external style sheet can be written in any text editorAn external style sheet can be written in any text editor
The file should not contain any html tagsThe file should not contain any html tags
Your style sheet should be saved with a .css extensionYour style sheet should be saved with a .css extension
An example of a style sheet file is shown belowAn example of a style sheet file is shown below
hr { color: sienna }p { margin-left: 20px }body { background-image: url(“images/back40.gif”) }
16
Internal Style SheetInternal Style Sheet
An internal style sheet should be used when a single An internal style sheet should be used when a single
document has a unique styledocument has a unique style
You define internal styles in the head section by using the You define internal styles in the head section by using the
<style> tag<style> tag
<head><style type=“text/css”>hr { color: sienna }p { margin-left: 20px }body {background-image: url(“images/back40.gif) }</style></head>
17
Inline StylesInline Styles
An inline style loses many of the advantages of style sheets by An inline style loses many of the advantages of style sheets by
mixing content with presentationmixing content with presentation
Use this method sparingly, such as when a style is to be applied Use this method sparingly, such as when a style is to be applied
to a single occurrence of an element. to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. To use inline styles you use the style attribute in the relevant tag.
The style attribute can contain any CSS property. The style attribute can contain any CSS property.
The example shows how to change the color and the left margin The example shows how to change the color and the left margin
of a paragraph:of a paragraph:
<p style=“color: sienna; margin-left: 20px”>This is a paragraph </p>
18
CSS Background PropertiesCSS Background Properties
The background properties allow you to control The background properties allow you to control
the background color of an elementthe background color of an element
set an image as the backgroundset an image as the background
repeat a background image vertically or horizontallyrepeat a background image vertically or horizontally
position an image on a pageposition an image on a page
Example of background properties
19
CSS Text PropertiesCSS Text Properties
Text properties allow you to control the appearance of Text properties allow you to control the appearance of
texttext
It is possible to change the color of a text, increase or It is possible to change the color of a text, increase or
decrease the space between characters in a text, align decrease the space between characters in a text, align
a text, decorate a text, indent the first line in a text, and a text, decorate a text, indent the first line in a text, and
moremore
Example of text propertiesExample of text properties
20
CSS Font PropertiesCSS Font Properties
The Font properties allow you to change the font family, The Font properties allow you to change the font family,
boldness, size, and the style of a textboldness, size, and the style of a text
Example of font properties
21
CSS Border PropertiesCSS Border Properties
The Border properties allow you to specify the style, color, and The Border properties allow you to specify the style, color, and
width of an element's borderwidth of an element's border
In HTML we used tables to create borders around a text, but In HTML we used tables to create borders around a text, but
with the Border properties we can create borders with nice with the Border properties we can create borders with nice
effects, and it can be applied to any elementeffects, and it can be applied to any element
Example of border properties
22
CSS Margin PropertiesCSS Margin Properties
The Margin properties define the space around elementsThe Margin properties define the space around elements
It is possible to use negative values to overlap contentIt is possible to use negative values to overlap content
The top, right, bottom, and left margin can be changed The top, right, bottom, and left margin can be changed
independently using separate propertiesindependently using separate properties
A shorthand margin property can also be used to change all of A shorthand margin property can also be used to change all of
the margins at oncethe margins at once
Example of margin propertiesExample of margin properties
23
CSS Padding PropertiesCSS Padding Properties
The Padding properties define the space between the element The Padding properties define the space between the element
border and the element contentborder and the element content
Negative values are not allowedNegative values are not allowed
The top, right, bottom, and left padding can be changed The top, right, bottom, and left padding can be changed
independently using separate propertiesindependently using separate properties
A shorthand padding property is also created to control multiple A shorthand padding property is also created to control multiple
sides at oncesides at once
Example of padding propertiesExample of padding properties
24
CSS List PropertiesCSS List Properties
The List properties allow you to change between different list-The List properties allow you to change between different list-
item markers, set an image as a list-item marker, and set where item markers, set an image as a list-item marker, and set where
to place a list-item markerto place a list-item marker
Example of unordered listsExample of unordered lists
Example of ordered listExample of ordered list