2. What is CSS and how does it work?
CSS stands for Cascading Style Sheets
CSS uses Styles to define how to display HTML
elements
External Style Sheets are stored in CSS files
HTML was intended to define the content of a
document
When tags like <font>, and color attributes were
added to the HTML 3.2 specification, it started a
nightmare for web developers. To solve this problem,
the World Wide Web Consortium (W3C) created
CSS.
3. CSS syntax
A CSS rule has two main parts: a selector, and one or
more declarations. Each declaration consists of a
property and a value.
The property is the style attribute you want to
change. Each property has a value.
4. Id Properties
Id selector only effects a single unique element and is defined with a "#",
the class selector is used to specify a style for a group of elements and is
defined with a ".“
Use the id tag to apply a style to an element without affecting other like
elements
#para1
{
text-align:center;
color:red;
}
<body>
<p id="para1">This paragraph is affected by the style</p>
<p>This paragraph is not affected by the style.</p>
5. Class Properties
The class selector is used on You can also specify that only
several elements specific HTML elements should
In the example below, all HTML be affected by a class.
elements with class="center" will In the example below, all p
be center-aligned: elements with class="center" will
.center be center-aligned:
{ p.center
text-align:center; {
} text-align:center;
}
<h1 class="center">Center-
aligned heading</h1> <h1 class="center">This
<p class="center">Center- heading will not be
aligned paragraph.</p> affected</h1>
<p class="center">This
paragraph will be center-
aligned.</p>
6. Internal and External Style Sheets
External Style Sheet Internal Style Sheet
An external style sheet is ideal An internal style sheet should
when the style is applied to be used when a single
many pages. document has a unique style.
you can change the look of an You define internal styles in
entire Web site by changing the head section of an HTML
one file. page, by using the <style> tag
Each page must link to the <head>
style sheet using the <link> <style type="text/css">
tag. The <link> tag goes hr {color:blue;}
inside the head section p {margin-left:10px;}
Your style sheet should be
body {background-
saved with a .css extension image:url("image.jpeg");}
</style>
</head>
7. Inline Style Sheets
Inline Styles
An inline style mixes content with presentation and
can create problems if errors arise, as both the html
and css follow the same order, meaning an error in
ccs or html leads to errors in both your html and css
To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS
property
<p style="color:red; float: right;">paragraph.</p>
8. Box model
HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout
The CSS box model is a box that wraps around HTML elements, and it consists
of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements
in relation to other elements.
9. Width and Height of an Element
When you specify the width and height properties of
an element with CSS, you are just setting the width
and height of the content area.
To know the full size of the element, you must also
add the padding, border and margin
Total element width = width + left padding + right
padding + left border + right border + left margin +
right margin
Total element height = height + top padding +
bottom padding + top border + bottom border + top
margin + bottom margin
10. Float Property
An element can be pushed to the left or right, allowing other
elements to wrap around it
Elements are floated horizontally, this means that an element
can only be floated left or right, not up or down
A floated element will move as far to the left or right as it can.
Usually this means all the way to the left or right of the
containing element
The elements after the floating element will flow around it
The elements before the floating element will not be affected
img
{
float:right;
}
11. Positioning Property
The CSS positioning properties allow you to position
an element. It can also place an element behind
another, and specify what should happen when an
element's content is too big.
Elements can be positioned using the top, bottom,
left, and right properties. However, these properties
will not work unless the position property is set first.
They also work differently depending on the
positioning method.
There are four different positioning methods.
12. Static Positioning Fixed:
HTML elements are positioned static by p.pos_fixed
default. A static positioned element is always {
positioned according to the normal flow of position:fixed;
the page top:30px;
Static positioned elements are not affected by right:5px;
the top, bottom, left, and right properties }
Fixed Positioning Relative:
An element with fixed position is positioned h2.pos_left
relative to the browser window. {
It will not move even if the window is scrolled position:relative;
left:-20px;
Relative Positioning }
A relative positioned element is positioned h2.pos_right
relative to its normal position {
Absolute Positioning position:relative;
An absolute position element is positioned left:20px;
relative to the first parent element that has a }
position other than static. If no such element Absolute:
is found, the containing block is <html> h2
{
position:absolute;
left:100px;
top:150px;
}
13. Grouping
Grouping Selectors Grouped:
To minimize the code, you can
group selectors. h1,h2,p
Separate each selector with a {
comma color:green;
Un-Grouped: h1 }
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
14. Nesting
It is possible to apply a style for a selector within a selector
In the example below, one style is specified for all p elements, one style is
specified for all elements with class="marked", and a third style is specified
only for p elements within elements with class="marked“
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
15. Navigation Bar
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
A navigation bar is basically a list of links, so using
the <ul> and <li> elements makes perfect sense
Next remove the bullets and padding:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
16. Horizontal
Vertical To create a horizontal nav bar you need to use either
the float or inline properties
Lists are naturally aligned Inline:
vertically ul
{
ul list-style-type:none;
margin:0;
{ padding:0;
}
list-style-type:none; li
margin:0; {
display:inline;
padding:0; }
Float:
} ul
{
a list-style-type:none;
margin:0;
{ padding:0;
display:block; overflow:hidden;
}
width:60px; li
{
background-color:#dddddd; float:left;
}
}