Quickly Read and understand CSS. Only important topics covered to get start with CSS.
What is CSS ?
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external style sheet file, you can change the look of an entire Web site by changing just one file!
CSS Syntax :
Selector
H1
Declaration : {color:blue;font-size:12px}
property:value and for multiple add semicolon separator
Ex : (Comments : /* */)
p {color:red;text-align:center;}
CSS Selectors
Element Selector
The element selector selects elements based on the element name.
You can select all elements on a page like this: (all elements will be center-aligned, with a red text color)
p {
text-align: center;
color: red;
}
Id Selector
An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
To select an element with a specific id, write a hash character, followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
Html Ex : id="para1":
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:
.center {
text-align: center;
color: red;
}
HTML ex : class="center":
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
you can group the selectors, to minimize the code. To group selectors, separate each selector with a comma.
h1, h2 {
text-align: center;
color: red;
}
CSS How To..
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the
Inline Styles
An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Multiple Style Sheets
If
some properties have been set for the same selector in different style
sheets, the values will be inherited from the more specific style sheet.
External Sheet:
h1 {
color: navy;
margin-left: 20px;
}
Internal Sheet:
h1 {
color: orange;
}
Output element applied is
color: orange;
margin-left: 20px;
Multiple Styles Will Cascade into One
Styles can be specified:
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
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external style sheet file, you can change the look of an entire Web site by changing just one file!
CSS Syntax :
Selector
H1
Declaration : {color:blue;font-size:12px}
property:value and for multiple add semicolon separator
Ex : (Comments : /* */)
p {color:red;text-align:center;}
CSS Selectors
Element Selector
The element selector selects elements based on the element name.
You can select all elements on a page like this: (all elements will be center-aligned, with a red text color)
p {
text-align: center;
color: red;
}
Id Selector
An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
To select an element with a specific id, write a hash character, followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
Html Ex : id="para1":
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:
.center {
text-align: center;
color: red;
}
HTML ex : class="center":
Note : Do NOT start an ID or Class name with a number!
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
you can group the selectors, to minimize the code. To group selectors, separate each selector with a comma.
h1, h2 {
text-align: center;
color: red;
}
CSS How To..
- External style sheet
- Internal style sheet
- Inline style
External style sheet
An external style sheet is ideal when the style is applied to many pages. You can Change your entire webpages.
In each page you should use "<link>" tag next to "<head>" same as below." same as below.
Internal Style Sheet
An external style sheet is ideal when the style is applied to many pages. You can Change your entire webpages.
In each page you should use "<link>" tag next to "<head>" same as below." same as below.
Internal Style Sheet
- inside an HTML element
- inside the section of an HTML page
- in an external CSS file
Cascading order (Style loading Priority)
- Inline style (inside an HTML element)
- Internal style sheet (in the head section)
- External style sheet
- Browser default
tag
The
tag defines a division or a section in an HTML document.
The
tag is used to group block-elements to format them with
CSS.
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
No comments :
Post a Comment