A cascading style sheet (CSS) is code that specifies formatting based on styles. You can store the
CSS code in the <head>section of the webpage to which you want it to apply, or you can store it in
a separate file with a .css extension (for situations in which you want the same CSS to apply to more
than one webpage). The formatting then “cascades” down to the individual instances of each tag. You
can also place a style directly within an individual tag.
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 Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to “find” (or select) HTML elements based on their id, class, type, attribute, and more.
The element Selector
p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
The id Selector
#para1 {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
The class Selector
.center {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
Grouping Selectors
h1, h2, p {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
<head>
<style>
body {
background-color: linen;
}
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
An inline style may be used to apply a unique style for a single element.
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
CSS Background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
body {
background-color: #b0c4de;
}
background-color: #b0c4de;
}
With CSS, a color is most often specified by:
- a HEX value – like “#ff0000”
- an RGB value – like “rgb(255,0,0)”
- a color name – like “red”
Background Image
body {
background-image: url(“img.gif”);
}
background-image: url(“img.gif”);
}
Background Image – Repeat Horizontally or Vertically
body {
background-image: url(“img.png”);
background-repeat: repeat-x;
}
background-image: url(“img.png”);
background-repeat: repeat-x;
}
background-repeat: repeat-y;
background-repeat: no-repeat;
Background Image – Set position
body {
background-image: url(“img.png”);
background-repeat: no-repeat;
background-position: right top;
}
background-image: url(“img.png”);
background-repeat: no-repeat;
background-position: right top;
}
Background – Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
body {
background: #ffffff url(“img.png”) no-repeat right top;
}
background: #ffffff url(“img.png”) no-repeat right top;
}
CSS background-attachment Property
body {
background-image: url(‘img.png’);
background-repeat: no-repeat;
background-attachment: fixed;
}
background-image: url(‘img.png’);
background-repeat: no-repeat;
background-attachment: fixed;
}
Text Color
The color property is used to set the color of the text.
body {
color: blue;
}
color: blue;
}
h1 {
color: #00ff00;
}
color: #00ff00;
}
h2 {
color: rgb(255,0,0);
}
color: rgb(255,0,0);
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
h1 {
text-align: center;
}
text-align: center;
}
p.date {
text-align: right;
}
text-align: right;
}
p.main {
text-align: justify;
}
text-align: justify;
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
a {
text-decoration: none;
}
text-decoration: none;
}
h1 {
text-decoration: overline;
}
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
text-decoration: underline;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
h3 {
text-transform: uppercase; lowercase; capitalize;
}
text-transform: uppercase; lowercase; capitalize;
}
Font Family
p {
font-family: “Times New Roman”, Times, serif;
}
font-family: “Times New Roman”, Times, serif;
}
Font Style
The font-style property is mostly used to specify italic text.
p.normal {
font-style: normal;
}
font-style: normal;
}
p.italic {
font-style: italic;
}
font-style: italic;
}
p.oblique {
font-style: oblique;
}
font-style: oblique;
}
Font Size
The font-size property sets the size of the text.
h1 {
font-size: 40px;
}
font-size: 40px;
}
h2 {
font-size: 30px;
}
font-size: 30px;
}
p {
font-size: 14px;
}
font-size: 14px;
}
Styling Links
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user mouses over it
- a:active – a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
}
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
a:active {
color: #0000FF;
}
Different List Item Markers
ul.a {
list-style-type: circle;
}
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
list-style-type: lower-alpha;
}
An Image as The List Item Marker
ul {
list-style-image: url(‘sqpurple.gif’);
}
list-style-image: url(‘sqpurple.gif’);
}
Table Borders
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
border: 1px solid black;
}
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
table {
border-collapse: collapse;
}
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
border: 1px solid black;
}
Table Width and Height
Width and height of a table is defined by the width and height properties.
table {
width: 100%;
}
width: 100%;
}
th {
height: 50px;
}
height: 50px;
}
Horizontal Text Alignment
The text-align property sets the horizontal alignment, like left, right, or center.
th {
text-align: left;
}
text-align: left;
}
Vertical Text Alignment
The vertical-align property sets the vertical alignment, like top, bottom, or middle.
td {
height: 50px;
vertical-align: bottom;
}
height: 50px;
vertical-align: bottom;
}
Table Padding
td {
padding: 15px;
}
padding: 15px;
}
Table Color
table, td, th {
border: 1px solid green;
}
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
background-color: green;
color: white;
}
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
- 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
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Border Style
The border-style property specifies what kind of border to display.
p.one {
border-style: solid;
border-width: 5px;
}
border-style: solid;
border-width: 5px;
}
Border Color
p.one {
border-style: solid;
border-color: red;
}
border-style: solid;
border-color: red;
}
Border – Individual sides
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Border – Shorthand property
p {
border: 5px solid red;
}
border: 5px solid red;
}
Margin – Individual sides
In CSS, it is possible to specify different margins for different sides of an element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
margin: 25px 50px 75px 100px;
Padding – Individual sides
In CSS, it is possible to specify different padding for different sides:
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
padding: 25px 50px 75px 100px;
This is nice post
ReplyDelete