Scribd
Upload
9 views

CSSStart

The document discusses different ways to add CSS to HTML documents including external, internal, and inline CSS. It also covers various CSS selectors like element, id, class and universal selectors. It provides examples of styling tables, links, and images using CSS.

Uploaded by

Hashim Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CSSStart

The document discusses different ways to add CSS to HTML documents including external, internal, and inline CSS. It also covers various CSS selectors like element, id, class and universal selectors. It provides examples of styling tables, links, and images using CSS.

Uploaded by

Hashim Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Cascading Style Sheet in

HTML

Prof. Usman Ahmad.


Govt. Islamia Graduate College, Gujranwala.
How to Add CSS
• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• 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.
• External styles are defined within the <link> element, inside the <head> section
of an HTML page:
• <html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• 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:
• Myclass.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
• 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.
• In this section we will learn Internal CSS.
Inline CSS
• 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.
• Inline styles are defined within the "style" attribute of the relevant
element:
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Basic Syntax
FORMAT:
selector {
property: value;
}
• selector: what you want styled (e.g. body)
• property: what you want changed (e.g. background)
• value: the new value of that property (e.g. green)
• So you have the thing you want to style followed by a list of properties and
the value for that property
• This list must be between 2 curly braces
CSS Selectors
• A CSS selector selects the HTML element(s) you want to style.
• CSS selectors are used to "find" (or select) the HTML elements you
want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
• The element selector selects HTML elements based on the element
name.
• 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.
• #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.
• In this example all HTML elements with class="center" will be red and
center-aligned:
• .center {
text-align: center;
color: red;
}
The CSS class Selector
• In this example only <p> elements with class="center" will be red and
center-aligned:
• p.center {
text-align: center;
color: red;
}
• HTML elements can also refer to more than one class.
• In this example the <p> element will be styled according to
class="center" and to class="large":
• <p class="center large">This paragraph refers to two classes.</p>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
CSS Examples
body {
background: green;
}

p{
background: red;
}
Practice!
So how do you think you would implement it to make all your text
blue?
I’ll give you a hint, the element you’ll want to style is

The answer:

body {
color : blue;
}
More CSS Syntax
• You can put in instructions for multiple elements by simply adding another block
of code for the second element under the first
h1{
color: green;
background-color: yellow;
}
h2{
color: green;
background-color: yellow;
}
• You can style more than 2 elements and add more than 2 attributes - you can
have as many or as few as you want!
CSS styles elements of HTML.

• For example, to turn all paragraphs’ text green, do:


p{
color : green;
}
• Note: selectors are generally an HTML element without “ < “ and “ >
”. So “ <p> ” becomes “ p ”, and “<body>” becomes “body”, and
“<blockquote>” becomes “blockquote”
Combining Elements
• If you have multiple elements that share the same styles, the you can
combine them
• For example remember how h1 and h2 have the same styles?
h2, h1{
color: green;
background-color: yellow;
}
Another Format
• Create 2 classes named blueFont and purpleFont
• blueFont should make the text blue and purpleFont should make the text
purple
• Apply these classes to sections of your html code
Answer
.blueFont{
color : blue;
}
.purpleFont{
color : purple;
}
You Can Use div for Structure
• <div> … </div>
• is an element in HTML
• HTML documents should consist of a bunch of nested and
consecutive block elements
• div is a block element used for grouping other block elements
• Think of it as a container
How would you use div?
• div is used as a logical divide
• if you have a page about Students and Teachers, you can surround the
Students part with <div class = “Students ”> </div> and surround the Teachers
part with another <div class = “Teachers”> </div>
• This lets you style everything about Students all at once, even if
they’re in other blocks
Practice!
HTML CSS
CSS Img
• Use the border property to create thumbnail images.
• Use the border-radius property to create rounded images:
• The opacity property can take a value from 0.0 - 1.0. The lower value,
the more transparent:
• The CSS filter property adds visual effects (like blur and saturation) to
an element.
CSS Img
• img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
max-width: 100%;
height: auto;
display: block;
opacity: 0.5;
}
<img src="paris.jpg" alt="Paris">
Practice!
• img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
CSS Tables
• To specify table borders in CSS, use the border property.
• table, th, td {
border: 1px solid;
}
• If you need a table that should span the entire screen (full-width), add
width: 100% to the <table> element:
• table {
width: 100%;
}
• The border-collapse property sets whether the table borders should be
collapsed into a single border:
• table {
border-collapse: collapse;
}
CSS Tables
• If you only want a border around the table, only specify the border
property for <table>:
• table {
border: 1px solid;
}
Table Width and Height
• The 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 70px:
• table {
width: 100%;
}
th {
height: 70px;
}
CSS Table Alignment
• Horizontal Alignment
• The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
• td {
text-align: center;
}
• The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
• td {
height: 50px;
vertical-align: bottom;
}
CSS Table Style
• To control the space between the border and the content in a table,
use the padding property on <td> and <th> elements:
• th, td {
padding: 15px;
text-align: left;
}
• Add the border-bottom property to <th> and <td> for horizontal
dividers:
• th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
• Use the :hover selector on <tr> to highlight table rows on mouse
over:
• tr:hover {background-color: coral;}
CSS Links
• Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
• a{
color: hotpink;
}
• In addition, links can be styled differently depending on what state they are
in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouse over it
• a:active - a link the moment it is clicked
CSS Links
• /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

You might also like