Scribd
Upload
43 views5 pages

Styling HTML With CSS: Example

CSS (Cascading Style Sheets) is used to style and lay out HTML elements. CSS allows you to control elements like colors, fonts, spacing and layout across multiple web pages from a single stylesheet. There are three main ways to add CSS - inline using the style attribute, internally using the <style> element, or externally using a separate .css file. An external stylesheet is best practice as it keeps styles separated from HTML and allows changing the look of an entire site by editing just one CSS file. CSS can format text styles like color, size and family. It can also control layout with properties for borders, backgrounds, positioning and visual effects like hover states. CSS selectors allow targeting elements by id, class,

Uploaded by

esraa hamad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views5 pages

Styling HTML With CSS: Example

CSS (Cascading Style Sheets) is used to style and lay out HTML elements. CSS allows you to control elements like colors, fonts, spacing and layout across multiple web pages from a single stylesheet. There are three main ways to add CSS - inline using the style attribute, internally using the <style> element, or externally using a separate .css file. An external stylesheet is best practice as it keeps styles separated from HTML and allows changing the look of an entire site by editing just one CSS file. CSS can format text styles like color, size and family. It can also control layout with properties for borders, backgrounds, positioning and visual effects like hover states. CSS selectors allow targeting elements by id, class,

Uploaded by

esraa hamad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Styling HTML with 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.

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS
files. However, here we will use inline and internal styling, because this is
easier to demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:

Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Try it Yourself »

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within


a <style> element:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire
web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the


HTML page:

Example
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

<head>

<title>Coding A CSS cascade style sheet </title>


<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
1- TEXT FONTS:
Font { font-family : arial, verdana, sans-serif ….; set a prioritized list of fonts to be used
to display a given element or web page.
Font-style : define the chosen font either [normal, italic, oblique];
Font-variant : [normal , small-caps];………….p,h1-h6,li,dd,
Font-weight : [normal , bold]; == describes how bold or heavy a font should be
presented
Font-size : unit[px, pt, %, em→ adapts automatically to the font that the reader uses,
example 2m means 2 times the size of the current font ;
}
Font can be represented in one of two ways:
a- Li, p, I,U…{ font : italic, bold, 3em , aerial , verdana;}
b- Li, p , td { font-style: italic; font-family : aerial ; font-weight: bold; font-variant: small-
caps ; font-size:30px ;}
2- Text indentation: allow you to add spaces to the first line of a paragraph
Text-indent : 30px; h1,p,dt { text-indent : 30ps;}
Th,td,p{Text-align : [left , right, center, justify]; }
Text-decoration: to add different effects to a text, takes the vales [underline,
overline, line-through]
Letter-spacing: space between letters, values px, pt (30px, 40pt)
Text-transform: controls the capitalization of text.
Values it takes
a- capitalize to capitalize the first letter of each word
b- Uppercase: to capitalize all letters
c- Lowercase : converts all letters to small case
d- None : letters appear as they are
H1{ text-transformation : upper case;}
Li{ text-transformation : capitalize;}
3- Links: you can apply every thing you learned to links, you can define these properties
differently depending on whether the link is [visited, unvisited,, active , or whether
the cursor is over the link, to add fancy and useful effects to your web site. To
control these effect we use a pseudo classes which allows you to take into account
different conditions or events when defining a property for an html tag.
Example: a{color : blue;}
Links can be visited or not visited, using pseudo class to assign different styles to
visited and unvisited links as follows:
A:link{ color : blue;}
A:visited { color : red;}
a.active{color : yellow;}
a:hover { color : green;} == whenever the cursor is over the link the color of the link
turns to green.
Examples:
A:active { color : orange; font-style : italic, font-size : 5em; ….}
A:hover { letter-spacing : 10px; font-weight: bold; text-transform : uppercase;
background-color : yellow;}
To remove the underline of a link use a{ text-decoration : none;}
Identification and grouping of elements (class and id)
 Applying a special style to a particular element or a particular group of elements
1- Grouping elements with class:
Example: let say we have two lists of links for colleges of the university one
for the old campus colleges and one for the new campus colleges as follows:
<p> old campus colleges
<ul>
<li><a href=www.arts.com> arts college</a>
<li><a href= www.economics.com> economics college </a>
<p> new campus colleges
<Ul>
<li><a href= www.science.com> science college </a>
<li><a href= www.engineering.com> engineering college </a>
Now we want these two lists to appear in different ways, to do that use class
attribute for each item in each group. The class value is the same for each
group but every item in eac h group has the same class as follows:
<p> old campus colleges
<ul>
<li><a href=www.arts.com class =oc > arts college</a>
<li><a href= www.economics.com class =oc> economics college </a>
<p> new campus colleges
<Ul>
<li><a href= www.science.com class =nc > science college </a>
<li><a href= www.engineering.com class =nc > engineering college </a>
Now in the css file we use the class as follows:
a.oc{ color:#ffbb00; text-transformation : upper case; Text-decoration : line-
through; …..}
2- identification of elements using id :
id value is unique for each element, while class can be the same for several
elements
example:
<h1 id=c1> chapter one</h1>
<h2 id=c2>chapter 2> </h2>
<h2 id=c3> chapter 3> </h2>
In the css file we must precede the id by # as #c1 { color : red; text-
decoration…..}
Grouping elements with span and div
Span: it dos not add any thing to the document. In css it can be used to add
visual features to specific parts of text in the document.
Example < p> Early to bed and early to rise makes a man healthy, wealthy and
wise. </p>
To present the words - healthy, wealthy and wise. - in red color we use span
to mark the benefits, where each span is added a class. As follows:
In html ≫≫ Early to bed and early to rise makes a man
<span class = b1>healthy, <span class = b1> wealthy <span class = b1>and
wise.
In css ≫≫> span.b1 { color: red; text-decoration: ….; font-variant: ……
Grouping with <div>
Used to group one or more block-level elements.
Example:
<div id=oc>
<p> old campus colleges
<ul>
<li><a href=www.arts.com class =oc > arts college</a>
<li><a href= www.economics.com class =oc> economics college </a>
</ul> </div>
<div id=nc>
<p> new campus colleges
<Ul>
<li><a href= www.science.com class =nc > science college </a>
<li><a href= www.engineering.com class =nc > engineering college </a>
</ul> </div>
In css file≫> #oc { back-groud : blue; font-weight : 20px; text-decoration:
…}
#nc{ back-ground: red;…………}
We can use class with div as follows:
In html file ≫≫ <div class=oc> <ol><li>……</div>
In css ≫≫> div.oc --- note div followed by class name
Floating elements (float)
Elements can be floated to the roght, left, using float property.
Example: if you want a text to wrap a round a picture, the code needed is:
<div id=pic1>
<img src=…….>
</div>
<p> ….text …. </p>
Float can be set left, right or none to get the picture floating to the left and
the text to surround it, you only have to define the width of the box which
surrounds the picture and set the property float to left like this: #pic1{ float :
left; width: 100px;}
Borders
Properties (border-width, border-style, border-color)
1- Border-width : thin, medium and thick; or numeric vale in pixels
2- Border-color: any color
3- Border-style: dotted, dashed, solid, double, groove, ridge, inset, ouset
Examples:
H1, h2 { Border-width : thick; Border-style: dotted; Border-color : gold;}
P, ul { Border-width : 1px; Border-style: dashed; Border-color : blue;}
Or
H1,h2….{ border : 10px solid blue;}
And much much more learn it by your special efforts

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy