CSS - Definition
CSS (Cascading Style Sheets) is a language that works with HTML documents to define the way content is
presented.
The presentation is specified with styles that are placed directly into:
1. HTML elements (inline/local styles)
2. The head of the HTML document (embedded/page/internal styles)
3. Separate style sheets (Linked/external styles)
Style sheets contain a number of CSS rules. Each rule selects elements in an HTML document. These rules
then define how the elements will be styled.
Any number of HTML files can be linked to a single CSS file.
CSS - How to style?
Inline Styles
Inline styles are added to a tag using the HTML style attribute. Their scope is very restricted. An
inline style only affects the tag to which it is attached.
<h1 style="color:blue; background-color:yellow; font-weight:34px;">The first day of CSS
styling</h1>
<h1>The basic styling practices</h1>
<p>This paragraph simply takes on the browser's default paragraph style.</p>
<p style="font-size: 25px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS
CSS - How to style?
A group of CSS styles can be placed in the head of HTML document. These are known as embedded styles (or page styles).
These styles are defined within the style tag in head element.
<head>
<style>
h1 { font-size: 16pt; font-weight:bold;}
p {color:blue;}
</style>
</head>
<body>
<h1>The first day of Spring</h1>
<p>On the first day of spring people tries to put on colourful dress</p>
</body>
CSS - How to style?
Styles can be placed in a separate document (a style sheet) that links to multiple
pages so that the styles have global (site-wide) scope.
<link href="my_style.css" rel="stylesheet">
CSS - syntax
General
The CSS syntax is made up of three parts: a selector, a property and a value.
selector {property:value;}
For example :
h1 { font-size: 16pt; font-weight:bold;}, p {color:blue;}
If the value is multiple words, quotes are applied around the value, e.g.: p {font-family:"sans serif";}
If more than one property to be specified, each property must be separated with a semicolon like: p {text-align:center; color:red;}
To make the style definitions more readable, one property can be described on each line.
P {
text-align:center;
color:black;
font-family:arial;
CSS - syntax
Combining Selectors
When several selectors share the same declarations, they may be grouped together to prevent the need to
write the same rule more than once. Each selector must be separated by a comma.
h1, h2{font-family:Georgia;}
h1, p { font-weight:bold; color:blue;}
CSS - Comments
CSS Comments
CSS comments can be added to CSS to explain the code.
Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with /* and
ends with */.
Comments can appear before or within rule sets as well as across multiple lines. They also can be used to
comment out entire rules or individual declarations.
For examples:
/*This is css comment*/
CSS - Two special concepts (class & ID)
Class
Class is a collection of things sharing a common attribute. Like all people of Bangladesh form
a class. In HTML a collection of tag can form a class. The class of the tags is specified in the
tag using class attribute giving the name as the attribute value. More than one tag can have
same value of the class attribute.
<p class=”generic”>
More than one class can be specified in a tag by giving space in between two consecutive
declarations.
<p class=”special optimal”>
CSS - Two special concepts (class & ID)
ID
ID specifies each distinct element. Each people of Bangladesh has a specific id, like their voter id. In
HTML, every tag can be given an id using id attribute. The value of id attribute specifies the id of the tag.
Every tag a single HTML page must have different value of id attribute.
<p id=”intro”>
Combining Class and ID
We can specify both class and id attribute in a tag. This is used to give the tag a common look and feel by class
attribute and some specific look and feel by id attribute.
<p class=”generic” id=”intro”>
CSS - Two special concepts (class & ID)
<body>
<div id="header">
<h1>
Heading here
</h1>
<p class="intro">
This is a introductory paragraph
</p>
<p>
This paragraph contains a <a href="#">link</a> to demonstrate styling the link.
</p>
</div>
<div id="nav">
<ul>
<li><a href="#" class="intro">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
<div id="footer">
This is footer. It also contains <a href="#">link</a> to show a link in footer.
</div>
</body>
