Scribd
Upload
36 views

Css-Note !!

The document introduces CSS and describes its uses, advantages, disadvantages and syntax. It also discusses different CSS styles like inline, internal and external styles and properties for controlling text formatting and other style elements.

Uploaded by

kandelbibek706
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views

Css-Note !!

The document introduces CSS and describes its uses, advantages, disadvantages and syntax. It also discusses different CSS styles like inline, internal and external styles and properties for controlling text formatting and other style elements.

Uploaded by

kandelbibek706
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Introducing CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used
to describe the look and formatting of a document written in markup language.
It provides an additional feature to HTML. It is generally used with HTML to
change the style of web pages and user interfaces to make the design of the
website dynamic and attractive. It can also be used with any kind of
XML(Extensible Markup Language) documents including plain XML and
SVG(Scalable Vector Graphics).
CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile
applications.
Advantages of Using CSS
1. It saves you repeating the same style rules in each page.
2. Web page will load faster
3. CSS allows for more interactive style elements, including font, font size,
font color, which can make pages more usable for people with disabilities.
4. Future redesigns will be more efficient
5. CSS can help to make Web pages available for different media(Desktop PC,
Mobile phones) with the same markup pages presented in different
viewing styles.
6. It makes web page browser compatible with almost all the browsers.
7. A style sheet can import and use styles from other style sheets, allowing
for modular development and good reuse.
Disadvantages of CSS
1. Fragmentation
CSS renders different dimensions with each browser. Programmers are
required to consider and test all code across multiple browsers for
compatibility before taking any website or mobile application live.
2. Different Levels
There are different levels to CSS: CSS; CSS 2; CSS 3. This has been confusing
for developers and browsers. One language is preferred.
CSS Styles can be in various forms:
Inline Styles
An inline style may be used to apply a unique style for a single element. To use
inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property. Example
Inline styles are defined within the "style" attribute of the relevant element:
<HTML>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal Styles
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:
<html>
<head>
<style>
body {
background-color:green;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Styles
With an external style sheet, you can change the look of an entire website by
changing just one file. Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head> section
of an HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with
a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks like:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

 The selector points to the HTML element you want to style.


 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
 A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
Controlling Text
The following table lists the properties that directly affect the font.
Property Purpose
Font Allows you to combine several of the following properties
into one
font – family Specifies the typeface or family of font that should be used
Example,
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
font – size Specifies the size of a font
Example,
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
font – weight Specifies whether the font should be normal or bold
Example,
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
font – style Specifies whether the font should be normal, italic, or
oblique
Example,
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
font – stretch Allows you to control the width of the actual characters in a
font
Example,
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
font – variant Specifies whether the font should be normal or small caps
example,
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
font - size – adjust Allows you to alter the aspect ratio of the size of the
font's characters
example,
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
Text Formatting
In addition to the properties that affect the font, there are several properties to
affect the appearance or formatting of your text (independently from the font it
is shown in). They are listed in the table that follows.
Property Purpose
Color Specifies the color of the text. Value will be color name.
Example,
<p style = "color:red;">
This text will be written in red.
</p>
text – align Specifies the horizontal alignment of the text within its
containing element. The value will be left, right, center
and justify.
Example,
<p style = "text-align:right;">
This will be right aligned.
</p>
vertical – align Specifies the vertical alignment of text within containing
element. The values are baseline, sub, super, top, text-top, middle, bottom and
text bottom.
text – decoration Specifies whether the text should be underlined,
overlined, strikethrough, or blinking text.
Example
<p style = "text-decoration:underline;">
This will be underlined
</p>
text – indent Specifies an indent from the left border for the text
<p style = "text-indent:1cm;">
Kohalpur Model College
</p>
text – transform Specifies that the content of the element should all be
uppercase, lowercase, or capitalized
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
text – shadow Specifies that the text should have a drop shadow
Example
<p style = "text-shadow:4px 4px 8px blue;">
Kohalpur Model College with Shadow
</p>
letter – spacing Controls the width between letters (known to print
designers as tracking)
Example,
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
word – spacing Controls the amount of space between each word
Example
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
white – space Specifies whether the white space should be collapsed,
preserved, or prevented from wrapping. The values are normal,
pre, norap.
Example,
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
</p>
direction Specifies the direction of text. The values are ltr, rtl, and inherit.
Example,
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
Inheritance
One of the powerful features of CSS is that, when a property has been applied
to one element, it will often be inherited by child elements. For example, once
the font - family property had been declared for the <body> element in the
previous example, it applied to all of the elements inside the <body> element.
This saves you from having to repeat the same rules for every single element
that makes up a web page.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style. There are different types of CSS Selectors :-
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element is unique within a page, so the id selector is used
to select one unique element.
To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by
the class name.
Example
In this example all HTML elements with class="center" will be red and center-
aligned:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a
class.
Example
In this example only <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
h1, h2, p {
text-align: center;
color: red;
}
Descendant Selector
The descendant selector matches all elements that are descendants of a
specified element. The following example selects all <p> elements inside <div>
elements:
Example
div p {
background-color: yellow;
}
Child Selector
The child selector selects all elements that are the children of a specified
element.
The following example selects all <p> elements that are children of a <div>
element:
Example
<div > p {
background-color: yellow;
}
Adjacent Sibling Selector
The adjacent sibling selector selects all elements that are the adjacent siblings
of a specified element. Sibling elements must have the same parent element,
and "adjacent" means "immediately following".
The following example selects all <p> elements that are placed immediately
after <div> elements:
Example
div + p {
background-color: yellow;
}
General Sibling Selector
The general sibling selector selects all elements that are siblings of a specified
element. The following example selects all <p> elements that are siblings of
<div> elements:
Example
div ~ p {
background-color: yellow;
}
Using Child and Sibling Selectors To Reduce Dependence on Classes in Markup
The child and adjacent sibling selectors are both very important because they
can reduce the number of class attributes you need to add into an HTML
document.
Example,
<html
<head>
<style>
p {font-family:arial, verdana, sans-serif;}
div > p {border:1px solid #000000;}
p+p+p {background-color:#999999;}
</style>
</head>
<body>
<p> Paragraph One: not inside a div element.</p >
<div> <p> Paragraph One: inside a div element</p>
<p> Paragraph Two: inside a div element </p>
<p> Paragraph Three: inside a div element </p>
<p> Paragraph Four: inside a div element </p>
<p> Paragraph Five: inside a div element </p> </div>
</body>
</html>
CSS Attribute Selectors
It is possible to style HTML elements that have specific attributes or attribute
values. There are different types of attribute selectors:-
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
Example
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
Example
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute
value containing a specified word. The following example selects all elements
with a title attribute that contains a space-separated list of words, one of which
is "flower":
Example
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified
attribute starting with the specified value.
The following example selects all elements with a class attribute value that
begins with "top":
Example
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements whose attribute
value begins with a specified value.
The following example selects all elements with a class attribute value that
begins with "top":
Example
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.
The following example selects all elements with a class attribute value that ends
with "test":
Example
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute
value contains a specified value.
The following example selects all elements with a class attribute value that
contains "te":
Example
[class*="te"] {
background: yellow;
}
Styling Forms
The attribute selectors can be useful for styling forms without class or ID:
Example
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Pseudo-classes:
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes: When you hover over the link in the
example, it will change color:
Example
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
Example
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):
Hover over me to show the <p> element.
Example
<html>
<head>
<style>
p{
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over me to show the p element
<p>KMC</p>
</div>
</body>
</html>
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
Example
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a
text. Some more text. And even more, and more.</p>
</body>
</html>
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all <p> elements:
Example
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first
character of a text!</p>
</body>
</html>
Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes:
Example
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
Example
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect
to the first letter and the first line of a text!</p>
</body>
</html>
The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an
element.
Example
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an
element.
Example
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a
user.The following example makes the selected text red on a yellow background:
Example
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in all <p> elements:
Example
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</body>
</html>
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are
the first child of another element:
Example
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</body>
</html>
The CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content.
 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
The box model allows us to add a border around elements, and to define space between
elements.
Example
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>
<div>Kohalpur Model College suited at the Kohalpur11, banke, Nepal.</div>
</body>
</html>
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know
how the box model works.
Example
This <div> element will have a total width of 350px:
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
CSS Units
CSS has several different units for expressing a length. Many CSS properties take "length" values, such as
width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em,
etc. There are three types of length units: absolute, relative and Percentage.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Unit Description
cm centimeters
mm millimeters
In inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
Pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scales better
between different rendering mediums.
Unit Description
Em Relative to the font-size of the element (2em means 2 times the size of the current font)
Ex Relative to the x-height of the current font (rarely used)

Ch Relative to width of the "0" (zero)

Rem Relative to font-size of the root element

Vw Relative to 1% of the width of the viewport*

Vh Relative to 1% of the height of the viewport*

Vmin Relative to 1% of viewport's* smaller dimension

Vmax Relative to 1% of viewport's* larger dimension

Percentage(%)
It is also relative to 100% of viewpoint.

CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.
Example
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
CSS background-image
The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element.
Example
body {
background-image: url("sunset.jpg");
}
CSS background-repeat
By default, the background-image property repeats an image both horizontally and
vertically.
Example
body {
background-image: url("gradient_bg.png");
}
CSS background-position
The background-position property is used to specify the position of the background
image.
Example
<html>
<head>
<style>
body {
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS background-attachment
The background-attachment property specifies whether the background image should
scroll or be fixed (will not scroll with the rest of the page):
Example
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should
scroll or be fixed (will not scroll with the rest of the page).</p>
</body>
</html>
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
Example
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background
properties in one declaration.</p>
</body>
</html>
CSS List Properties
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
Example
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url(“sqpurple.gif”);
}
Position The List Item Markers
The list-style-position property specifies the position of the list-item markers (bullet
points).
Example
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in
one declaration:
Example
ul {
list-style: square inside url("sqpurple.gif");
}
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a
single border:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:
Example
table {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th>
elements to 50px:
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>.By default, the content of <th> elements are center-aligned and the
content of <td> elements are left-aligned.
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>. By default, the vertical alignment of the content in a table is middle
(for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding
property on <td> and <th> elements:
Example
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
Example
tr:hover {background-color: #f5f5f5;}
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even
(or odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2;}
Table Color
The example below specifies the background color and text color of <th> elements:
Example
th {
background-color: #4CAF50;
color: white;
}
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the
full content: Add a container element (like <div>) with overflow-x:auto around the <table>
element to make it responsive:
Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".
CSS has the following outline properties:
 outline-style
 outline-color
 outline-width
 outline-offset
 outline
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of the
following values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline
Example
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
CSS Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
 name - specify a color name, like "red"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 Hex - specify a hex value, like "#ff0000"
 invert - performs a color inversion (which ensures that the outline is visible,
regardless of color background)
Example
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 1px solid black;
outline-style: double;
outline-color: green;
}
p.ex3 {
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
}
A solid invert outline
Example
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
CSS Outline Width
The outline-width property specifies the width of the outline, and can have one of the
following values:
 thin (typically 1px)
 medium (typically 3px)
 thick (typically 5px)
 A specific size (in px, pt, cm, em, etc)
Example
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual outline
properties:
 outline-width
 outline-style (required)
 outline-color
The outline property is specified as one, two, or three values from the list above. The order
of the values does not matter. The following example shows some outlines specified with
the shorthand outline property:
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Example
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of an
element. The space between an element and its outline is transparent.
Example,
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Example
p{
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
CSS Layout - The position Property
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).
position: static;
HTML elements are positioned static by default. Static positioned elements are not affected
by the top, bottom, left, and right properties. An element with position: static; is not
positioned in any special way; it is always positioned according to the normal flow of the
page:
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
Example
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
position: relative;
An element with position: relative; is positioned relative to its normal position. Setting the
top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any
gap left by the element.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed).
Example
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative; and position:absolute;</h2>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in
place (like position:fixed).
Example
<html>
<head>
<style>
div.sticky {
position: webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<div class="sticky">I am sticky!</div>
</body>
</html>
PAGE LAYOUT
Header
A header is usually located at the top of the website (or right below a top navigation menu). It often contains
a logo or the website name:
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:
Content
The layout in this section, often depends on the target users. The most common layout is one (or combining
them) of the following:
 1-column (often used for mobile browsers)
 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)
Footer
The footer is placed at the bottom of your page. It often contains information like copyright and contact info:
Example program
<html>
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href=”table.html”>Table</a>
<a href="form.html”>Form</a>
<a href="home.html”>Homepage</a>
</div>
<div class="row">
<div class="column side">
<h2>Side</h2>
<p>kohalpur model college</p>
</div>
<div class="column middle">
<h2>Main Content</h2>
<p>A machine designed to solve the problem by using systematic program instructions. An electronic device which
accept raw data process those data and gives the desired result such a device is known as a compute.</p>
<p>A machine designed to solve the problem by using systematic program instructions. An electronic device which
accept raw data process those data and gives the desired result such a device is known as a compute.</p>
</div>
<div class="column side">
<h2>Side</h2>
<p>Kohalpur Model College</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Normal Flow
The normal flow refers to the arrangement of elements whose position is
controlled by the 'relative' value of the 'position' property. This normally comes
up when using absolute vs. relative or fixed positioning for elements
Inheritance
In CSS, when a property has been applied to one element, it will often be inherited by
child elements. For example, once the color property had been declared for the
<body> element, it applied to all of the elements inside the <body> element. This
saves you from having to repeat the same rules for every single element that makes
up a web page. The inherit keyword can be used for any CSS property, and on any
HTML element.
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black; }
.extra span {
color: inherit; }
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its
parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
z-index property
The z-index CSS property sets the z-order of a positioned element and its
descendants or flex items. Overlapping elements with a larger z-index cover those
with a smaller one.
Example,
<html>
<head>
<style>
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3;
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
</body>
Clear Property
The clear property is especially helpful when working with boxes and images that
are floated. It is used to clear the space position of the image.
Float Property
The float property is used for positioning and formatting content. The float property
can have one of the following values:
left - The element floats to the left of its container.
right - The element floats to the right of its container.
Example of clear and float property,
<html>
<head>
<style>
img {
float: left;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<h1>The clear Property</h1>
<img src="image.gif" width="100" height="132">
<p>Kohalpur Model College, Kohalpur-11, Banke, Nepal</p>
<p class="clear">Kohalpur Model College, Kohalpur-11, Banke, Nepal</p>
</body>
</html>
Cursor Property
The cursor property specifies the mouse cursor to be displayed when pointing over
an element.
Example,
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
</style>
</head>
<body>
<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
</body>
</html>

Content Property
The content property is used with the ::before and ::after pseudo-elements, to
insert generated content.
Example,
<html>
<head>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
padding-left: 16px;
}
li::before {
content: " ";
padding-right: 8px;
color: blue;
}
</style>
</head>
<body>
<h1>The content Property</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
The Display Property
The display property specifies the display behavior (the type of rendering box) of
an element.
<html>
<head>
<style>
.a {
display: contents;
border: 1px solid red;
background-color: lightgrey;
padding: 10px;
width: 200px;
}
.b {
border: 1px solid blue;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: contents:</h2>
<div class="a">
Kohalpur Model college. <div class="b">HELLO WORLD!</div>
Kohalpur Model college
</div>
</body>
</html>
The Visibility Property
The visibility property specifies whether or not an element is visible.
<html>
<head>
<style>
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
</style>
</head>
<body>
<h1>The visibility Property</h1>
<h2 class="a">This heading is visible</h2>
<h2 class="b">This heading is hidden</h2>
<p>Notice that the hidden heading still takes up space on the page.</p>
</body>
</html>

You might also like