Scribd
Upload
21 views

Fundamentals Analysis Basic CSS

CSS in web programming

Uploaded by

sevensemister
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Fundamentals Analysis Basic CSS

CSS in web programming

Uploaded by

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

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)


Semester: (Fall, Year: 2024), B.Sc. in CSE (Day)

CSS Fundamentals: Styling the Web Page

Course Title: Web Programming


Course Code: CSE 301
Section: 221-D7
Group-04
Students Details

Name ID
Arman Hossain 221002624
Nuhath Khan Lahif 221002405
Hasib Al Mamun 221002473
Sahid Mohammed Sajib 221002551

Submission Date: 26 october 2024


Course Teacher: Umme Habiba
Introduction to CSS

CSS, or Cascading Style Sheets, is a language used to style and layout web pages. It
controls the appearance of HTML elements, allowing us to add colors, choose fonts,
set spacing, and define the overall layout. There are three main ways to apply CSS to a
web page: Inline CSS, Internal CSS, and External CSS. Each type has its own
purpose and is used in different situations. This assignment will explore each type in
detail to understand how they work and when to use them.

1. Inline CSS

Definition: Inline CSS is written directly within an HTML element using the style
attribute. This means each HTML element has its own CSS code right next to it. Inline
CSS is useful when you want to apply a unique style to a single element.

Example:
<p style="color: blue; font-size: 16px;">This is styled with inline CSS.</p>

Usage:
 Inline CSS is best for making quick changes to one specific element.
 It is commonly used when only one or two elements need a unique style.
 This method is not ideal for large web pages, as it can make the HTML code
cluttered and harder to maintain.

Advantages:

 Quick and easy to apply styles to a single element.


 Does not require an additional CSS file.

Disadvantages:

 Hard to maintain when styling multiple elements.


 Inline CSS makes HTML code messy and hard to read.

1
2. Internal CSS

Definition: Internal CSS involves embedding CSS rules directly within a <style> tag,
located inside the <head> section of an HTML document. This allows you to apply
styles to multiple elements across a single page without needing a separate CSS file.

Example:
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: green;
text-align: center;
}
p{
font-size: 18px;
color: black;
}
</style>
</head>
<body>
<h1>This is a heading styled with internal CSS</h1>
<p>This is a paragraph styled with internal CSS.</p>
</body>
</html>

Usage:

 Internal CSS is used when you want to apply styles to one specific page only.
 It is especially useful for standalone pages or if you have custom styles that
don’t need to be reused on other pages.
 Using internal CSS keeps styles contained within the HTML file, which can be
helpful for small projects.

Advantages:

 Allows styling multiple elements across a single page without using an external
file.
 Keeps the CSS separate from the HTML structure.

Disadvantages:

 Not ideal for large websites with many pages, as styles are only applied to one
page.
 Increases the size of the HTML file, which can slow down page loading time if
overused.

2
3. External CSS

Definition: External CSS is written in a separate file with a .css extension, such as
styles.css. This CSS file is then linked to the HTML document by using a <link> tag in
the <head> section. External CSS is the preferred method for applying styles across
multiple pages of a website.

Example:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading styled with external CSS</h1>
<p>This is a paragraph styled with external CSS.</p>
</body>
</html>
css
Copy code
/* CSS File: styles.css */
body {
background-color: lightgrey;
}
h1 {
color: blue;
text-align: center;
}
p{
font-size: 20px;
color: black;
}

Usage:

 External CSS is best for large websites with multiple pages because it allows
you to keep all styles in one file.
 This method helps maintain consistency across all pages and makes it easy to
update the design by editing a single CSS file.
 It also keeps HTML files cleaner and more organized since styles are separated
from the HTML structure.

3
Advantages:

 Enables consistent styling across multiple pages.


 Keeps HTML files clean and easier to maintain.
 Reduces file size for each HTML page since CSS is in a separate file.

Disadvantages:

 Requires an additional file, which means the browser has to load multiple files,
potentially slowing down load time.
 Styles are not visible if the external CSS file is missing or not loaded correctly.

4
Introduction to CSS Terminology & Syntax:

What is CSS? CSS stands for Cascading Style Sheets, and it’s the language we use to
style and design web pages. It helps make a website look more attractive by changing
colors, fonts, spacing, and more.

Now, let’s talk about the basic structure of CSS. Whenever we want to style something
on a web page, we need to write a CSS rule. A CSS rule has two main parts:

1. Selector – This tells CSS which HTML element we want to style (like a
paragraph or a heading).

2. Declaration – This tells CSS how we want to style that element. The declaration
has two things: a property (what you want to change, like color) and a value
(what you want to set it to, like red).

For example:

css

Copy code

p{

color: red;

5
In this code:

• p is the selector, which means we're styling all <p> (paragraph)


elements.

• color: red; is the declaration, where color is the property and red is
the value.

So this code will make all paragraphs on the page have red text."

CSS Text Properties:

CSS gives us several text properties to control how text looks on a web
page. Here are a few common ones:

• Color: Changes the color of the text. For example, color: blue; will
make the text blue.

• Font-size: Sets how big or small the text will appear. For example,
font-size: 20px; makes the text 20 pixels tall.

• Text-align: Controls the alignment of the text. You can make text
align to the left, center, or right. For example, text-align: center; will
center the text.

Here’s an example:

css

6
Copy code

h1 {

color: green;

font-size: 30px;

text-align: center;

In this example, any <h1> heading will have green text, a font size of 30
pixels, and the text will be centered on the page.

By changing these properties, you can completely change how text looks
on a website."

Setting Multiple Properties:

In CSS, we don’t have to style just one thing at a time. You can set many
properties in a single CSS rule. For example:

css

7
Copy code

p{

color: red;

font-style: italic;

text-align: center;

This code does three things to the <p> (paragraph) elements:

1. Change the text color to red.

2. Makes the text italic with font-style: italic;.

3. Centers the text using text-align: center;.

This way, you can control many aspects of an element’s style in one place.
It’s a simple way to apply several styles all at once, which makes your CSS
code more organized and easy to manage."

8
Normal Flow is the default layout behavior of elements in CSS, while
the Box Model defines how the size and space around an element are
calculated.

Normal flow :

Normal Flow refers to the default layout behavior in CSS when no special
layout techniques (like float, position, or flexbox) are applied. It describes
how elements are placed naturally on the page without interference. two
type of element in normal flow one is blok line element and other is inline
element .

Block-level elements: Block-level elements (such as <div>, <h1>, <p>)


are arranged vertically, one after the other. Each block-level element
occupies the full width of its parent container, and the next block-level
element will start on the next line.

Inline-level elements: Inline elements (such as <span>, <a>, <strong>) are


arranged horizontally within their parent block. These elements do not start
on a new line; instead, they continue within the same line as the text flows.

9
Box Model:

The Box Model in CSS defines the structure of every HTML element on a
webpage. It explains how the size and spacing of an element are calculated.
Each element is treated as a rectangular box, consisting of four parts:

Content: The actual content of the element (text, image, etc.).

Padding: The space between the content and the border. Padding is inside
the element and can have the same background color as the element.

Border: The edge around the padding, separating the padding from the
margin. The border can have different widths, styles, and colors.

Margin: The space outside the border that separates the element from other
elements on the page.

Interrupt the Flow

1. Float
2. Absolute
3. Relative

2. CSS Float

10
Definition:

The float property in CSS is used to position an element to the left


or right of its container, allowing text and inline elements to wrap
around it. Floated elements are removed from the normal document
flow but remain a part of the page's content flow.

Usage:

Floats are commonly used for wrapping text around images, creating
multi-column layouts, and controlling the position of elements
within a container.

Example:
Let an image float to the right:

<style>
img {
float: right;
}
</style>

3. CSS Position: Absolute

Definition:
The position: absolute; property positions an element relative to its
nearest positioned ancestor (an element with a position other than
static). If no ancestor is positioned, the element is positioned relative
to the browser window.

11
Usage:
This is often used to place elements at specific locations on a page,
regardless of other content.

Example:

4. CSS Position: Relative

Definition:
The position: relative; property positions an element relative to its
normal position in the document flow. The element's position can be
adjusted using the top, right, bottom, and left properties, but the
element still occupies its original space in the document.

Usage:
It's commonly used to fine-tune an element's position without
removing it from the document flow.

12
Example:

Conclusion:

 Understanding CSS fundamentals is crucial for creating visually


appealing and well-structured web pages.

 CSS controls layout, design, and responsiveness, enhancing the


overall user experience.

 Mastering key concepts such as selectors, the box model, and


positioning empowers developers to build dynamic, engaging,
and efficient web experiences.

13

You might also like