Cascading style sheet, CSS Box model, Table in CSS

 Cascading Style Sheets, fondly referred to as CSS, is a
simple design language intended to simplify the
process of making web pages presentable.
 CSS handles the look and feel part of a web page.
 Using CSS, can control the color of the text, the style
of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or
colors are used, layout designs, variations in display for
different devices and screen sizes as well as a variety of
other effects.
Introduction CSS

 CSS saves time – We can write CSS once and then reuse
same sheet in multiple HTML pages. You can define a
style for each HTML element and apply it to as many Web
pages as you want.
 Pages load faster − If you are using CSS, you do not need
to write HTML tag attributes every time. Just write one
CSS rule of a tag and apply it to all the occurrences of that
tag. So less code means faster download times.
 Easy maintenance − To make a global change, simply
change the style, and all elements in all the web pages will
be updated automatically.
Advantages of CSS

 Superior styles to HTML − CSS has a much wider
array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to
HTML attributes.
 Global web standards − Now HTML attributes are
being deprecated and it is being recommended to use
CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future
browsers.

 CSS is created and maintained through a group of
people within the W3C called the CSS Working Group.
 The CSS Working Group creates documents called
specifications.
 When a specification has been discussed and officially
ratified by the W3C members, it becomes a
recommendation.
Who Creates and Maintains CSS?

A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will
be applied. This could be any tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag.
Put simply, all the HTML attributes are converted into
CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example,
color property can have value either red or #F1F1F1 etc.
CSS - Syntax

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout
of multiple web pages all at once
 External stylesheets are stored in CSS files

 Why Use CSS?
 CSS is used to define styles for your web pages,
including the design, layout and variations in
display for different devices and screen sizes.

 body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

CSS Style Rule Syntax as follows −
selector { property: value }
Example − table border as follows
table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid
#C00 is the value of that property.

<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Cascading style sheet, CSS Box model, Table in CSS

Cascading Style Sheet(CSS) is used to set the style in
web pages that contain HTML elements.
It sets the background color, font-size, font-family, color,
etc property of elements on a web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
CSS styling

Inline CSS:
 Inline CSS contains the CSS property in the body
section attached with element is known as inline CSS.
 This kind of style is specified within an HTML tag
using the style attribute.
 Inline styles are defined within the "style" attribute of
the relevant element:

<html>
<body>
<h1 style="color: navy; margin-left: 20px;">Hello, World!</h1>
<p style="font-size: 16px; color: darkgreen; background-color:
lightyellow;">
This is a paragraph styled with inline CSS.
</p>
</body>
</html>

Advantages of Inline CSS:
 You can easily and quickly insert CSS rules to an
HTML page. That’s why this method is useful for
testing or previewing the changes, and performing
quick-fixes to your website.
 You don’t need to create and upload a separate
document as in the external style.

Disadvantages of Inline CSS:
 Adding CSS rules to every HTML element is time-
consuming and makes your HTML structure messy.
 Styling multiple elements can affect your page’s size
and download time.

 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:
Internal CSS

<html>
<head>
<style>
body {
}
h1 {
color: navy;
margin-left: 20px;
}
p {
font-size: 16px;
color: darkgreen;
background-color: lightyellow;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 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:
External CSS

<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph styled with external CSS.</p>
<button>Click Me</button>
</body>
</html>

body {
}
h1 {
color: navy;
margin-left: 20px;
}
p {
font-size: 16px;
color: darkgreen;
background-color: lightyellow;
padding: 60px;
border: 1px solid green;
}
button {
background-color: orange;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
button:hover {
background-color: darkorange;
}
Styles.css

The following text properties of an element −
 The color property is used to set the color of a text.
 The direction property is used to set the text
direction.
 The letter-spacing property is used to add or
subtract space between the letters that make up a
word.
 The word-spacing property is used to add or
subtract space between the words of a sentence.
Controlling text and text formatting

 The text-align property is used to align the text of a
document.
 The text-decoration property is used to underline,
overline, and strikethrough text.
 The text-transform property is used to capitalize text
or convert text to uppercase or lowercase letters

<html>
<head>
<title>Text Properties Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="text-example">
This is a simple example of CSS text properties.
</div>
</body>
</html>
Example

.text-example {
color: blue; /* Sets the text color to blue */
direction: rtl; /* Sets the text direction to right-to-left */
letter-spacing: 2px; /* Adds 2px space between each letter
*/
word-spacing: 5px; /* Adds 5px space between each word */
text-align: center; /* Aligns the text to the center of the
container */
text-decoration: underline; /* Underlines the text */
text-transform: uppercase; /* Converts all the text to
uppercase letters */
}
Styles.css

 CSS selectors are used to select the content you want
to style.
 Selectors are the part of CSS rule set.
 CSS selectors select HTML elements according to its
id, class, type, attribute etc.
CSS Selectors

There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1. CSS Element Selector
 The element selector selects HTML elements based on
the element name.

<html>
<head>
<style>
p {
background-color: red;
}
</style>
</head>
<body>
<h1>Demo of the element selector</h1>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
</html>

2. CSS Id Selector
 The id selector selects the id attribute of an HTML
element to select a specific element.
 An id is always unique within the page so it is chosen
to select a single, unique element.
 It is written with the hash character (#), followed by the
id of the element.

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

3. CSS Class Selector
 The class selector selects HTML elements with a
specific class attribute. It is used with a period
character . (full stop symbol) followed by the class
name.
 The class selector is used to apply styles to multiple
elements. You can assign the same class to as many
elements as you want.

<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>

4. CSS Universal Selector
 The universal selector (*) selects all HTML elements
on the page.
 The CSS universal selector is a powerful tool that
applies styles to every element on a webpage.
 When you use the universal selector, it targets all
elements in the document, allowing you to apply global
styles with a single rule.

<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

5. CSS Grouping Selector
 The grouping selector selects all the HTML elements with the same
style definitions.
 h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

 It will be better to group the selectors, to minimize the
code.
 To group selectors, separate each selector with a
comma.
 h1, h2, p {
text-align: center;
color: red;
}

<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

 CSS box model is a container which contains multiple
properties including borders, margin, padding and the
content itself.
 It is used to create the design and layout of web pages.
 It can be used as a toolkit for customizing the layout of
different elements.
 Box-Model has multiple properties in CSS. Some of
them are given below:
The CSS Box Model

 borders
 margins
 padding
 Content

 The box model allows us to add a border around
elements, and to define space between elements.

 Border Area: It is the area between the box’s padding
and margin. Its dimensions are given by the width and
height of border.
 Margin Area: This area consists of space between
border and margin. The dimensions of Margin area are
the margin-box width and the margin-box height. It is
useful to separate the element from its neighbors.

 Padding Area: It includes the element’s padding. This
area is actually the space around the content area and
within the border box. Its dimensions are given by the
width of the padding-box and the height of the
padding-box.
 Content Area: This area consists of content like text,
image, or other media content. It is bounded by the
content edge and its dimensions are given by content
box width and height.

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:
Tables in CSS

<html>
<head>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
</head>

<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>

<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

 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:
Table Width and Height

<html>
<head>
<style>
table, td, th {
}
table {
border-collapse: collapse/separate;
width: 100%;
}
th {
height: 50px;
}
</style>

</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header
row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>

<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>

<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

 A navigation bar needs standard HTML as a
base.
 In our examples we will build the navigation
bar from a standard HTML list.
 A navigation bar is basically a list of links, so
using the <ul> and <li> elements makes perfect
sense:
Navigation Bar = List of Links

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and
margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</body>
</html>

<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
Vertical Navigation Bar
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
</style>
</head>
Horizontal Navigation Bar
<body>
<ul>
<li><a class="active“
href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

 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
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

 Navigation Bar
 A navigation bar contains a list of links to help visitors
navigating through your website:
/* The navbar container */
.topnav {
overflow: hidden;
}

<html>
<head>
<title>CSS Website Layout</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link</a>
</div>
</body>
</html>

 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)
.column {
float: left;
width: 33.33%;
}

Footer
 The footer is placed at the bottom of your page. It often
contains information like copyright and contact info:
Example
 .footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Margin
•margin-top
•margin-right
•margin-bottom
•margin-left
 p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

 The border-style property specifies what kind of border to display.
 The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color
value
 ridge - Defines a 3D ridged border. The effect depends on the border-color
value
 inset - Defines a 3D inset border. The effect depends on the border-color
value
 outset - Defines a 3D outset border. The effect depends on the border-color
value
 none - Defines no border
 hidden - Defines a hidden border
 The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
CSS Borders

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of
50px, and a left padding of 80px.</div>
</body>
</html>
CSS Padding

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of
75px, and a left padding of 100px.</div>
</body>
</html>
Padding short hand

Cascading style sheet, CSS Box model, Table in CSS

Recommended

More Related Content

Similar to Cascading style sheet, CSS Box model, Table in CSS (20)

More from SherinRappai (20)

Recently uploaded (20)

Cascading style sheet, CSS Box model, Table in CSS

Editor's Notes