Css 101

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.

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.

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>

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>

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>

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>

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.

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

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;
}

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.

 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;
}

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;
}

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;
}

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;
}

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;
}
}

Css 101

More Related Content

Similar to Css 101

More from Rhyan Mahazudin

Recently uploaded

Css 101