Scribd
Upload
6 views

CSS NOTES

The document explains three methods of implementing styles in HTML: Inline Style, Embedded Style, and External Style Sheet. Inline styles apply directly within HTML tags, embedded styles are defined in the <head> section, and external styles allow for a single CSS file to control the styling of multiple HTML documents. Each method has its advantages and disadvantages, particularly regarding flexibility, load time, and maintenance.

Uploaded by

otieno.18742
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS NOTES

The document explains three methods of implementing styles in HTML: Inline Style, Embedded Style, and External Style Sheet. Inline styles apply directly within HTML tags, embedded styles are defined in the <head> section, and external styles allow for a single CSS file to control the styling of multiple HTML documents. Each method has its advantages and disadvantages, particularly regarding flexibility, load time, and maintenance.

Uploaded by

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

HTML Styles

Styles in HTML are basically rules that describe how a document will be presented in
a browser. Style information can be either attached as a separate document or
embedded in the HTML document.

There are 3 ways of implementing style in HTML :


1. Inline Style: In this method, the style attribute is used inside the HTML start tag.
2. Embedded Style: In this method, the style element is used inside the <head>
element of the document.
3. External Style Sheet: In this method the <link> element is used to point to an
external CSS file.

1. Inline Style
Inline Style: In Inline styling, the CSS rules are directly written inside the starting
tag using the style attribute. The style attribute includes a series of CSS property and
value pairs. Each ‘property: value ‘pair is separated by a semicolon (;).

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

1|Page
Inline style sheet css save as inlinestyle.html

NB: it will change only the first h1 selector, changing the specific style
where its applied. That’s why in our output result first h1 colors blue and
the other h1 remains by default black.

2. Embedded Style /internal style save as internalstyle.html

Embedded style sheets are defined in the <head> section of an HTML


document using the <style> tag. You can define any number of <style>
elements inside the <head> section.

NB: it will change all h1 elements to one color

2|Page
3.External Style Sheet:
External style sheets are the most flexible because with an external style sheet, you
can change the look of an entire website by updating just one file.

You can attach external style sheets in two ways — linking and importing:

Here are the advantages of linking a CSS/external file to HTML:


➢
Time-effective — you only need to create a single CSS file to style all
HTML files.
➢
Faster load time — the site will cache the CSS file for your visitors’ next visit.
➢
Improve SEO — storing CSS styles in another file makes the HTML file more
concise and readable by search engines.

Why not external Style-sheet?

• If the style-sheet file has large data, then downloading the file takes
time and it increases page download speed.
• For static site with limited pages and different design on each
page, external style-sheets are harder to maintain.

NB: Example- one of the method using linking


<head>
<link rel="stylesheet" href="css/style.css">
</head>

Link attribute is embedded inside the head section

➢
Link rel — element defines the relationship between the file that hosts
this command and the file defined in the href attribute. The standard
value for this attribute is stylesheet.
➢
type — defines the content of the linked file. In this tutorial, set this
attribute’s value to text/css. However, you can skip it altogether if
you’re using HTML5
➢
href — specifies the location of the CSS file you want to link to the
HTML. If the CSS file is in the same directory as the HTML file, you only
need to enter the file name. Otherwise, you need to include the folder
name in which you store the CSS file (example: CSS/stylesheet.css).

3|Page
Step 1. Open sublime text > select file >open folder>select new folder>rename
to your own name of choice.

Step 2. Inside named folder save document as externalstyle.html

Step 3. Open new tab ctr+n. write css rules and save as mystyle.css in the
same folder

Step 4. Run the code using html file and right click >select open in browser

4|Page
5|Page

You might also like