Scribd
Upload
27 views

CSS Lab-1

The document provides an introduction to CSS, explaining the different ways to add CSS to HTML documents, CSS syntax, selectors, common properties, and the CSS box model. It also includes tasks to create an HTML file with styled elements to demonstrate CSS.

Uploaded by

Avinash kumar Duseja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

CSS Lab-1

The document provides an introduction to CSS, explaining the different ways to add CSS to HTML documents, CSS syntax, selectors, common properties, and the CSS box model. It also includes tasks to create an HTML file with styled elements to demonstrate CSS.

Uploaded by

Avinash kumar Duseja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Swan Coaching Center Web development Course

Introduction to CSS
CSS Lab-1
Objectives
• Learn the syntax of CSS.
• Adding CSS to HTML by different ways (Inline, Internal and external)
• Learn to style the html document by using different selectors (element, id and class)
• Learn about basic properties in CSS
• Introduction to Box Model in CSS

Cascading Style Sheets (CSS) is a Stylesheet Language used to describe the presentation of a document
written in Html. CSS is used to style and layout web pages — for example, to alter the font, color, size, and
spacing of your content, split it into multiple columns, or add animations and other decorative features.

Adding CSS to HTML

There are three ways to add css for your HTML page

• Inline CSS: You can apply CSS directly to an HTML element using the style attribute. For
example:

• Internal CSS: You can include CSS within the <style> tags in the <head> section of your
HTML document.

• External CSS

Create a separate CSS file for example style.css and link it to your HTML document using the <link> tag.
This allows you to keep your CSS code separate from your HTML, making it more organized and
manageable.
Swan Coaching Center Web development Course

Syntax of CSS:
A CSS syntax consist a selector and a declaration block. The basic syntax for writing CSS is as follows:

Selector: { Property: Value; Property: Value; }

Selector: The selector targets the HTML element(s) you want to style. It can be an element name, class,
ID, or other attribute.
Element selector: p targets all <p> elements.
Class selector: .example targets all elements with the class "example."
ID selector: #header targets the element with the ID "header."

Declaration Block: A set of properties and values enclosed within curly braces {} is called a
declaration block. Multiple properties can be defined within the same block.
Property: The property represents the visual aspect of the element you want to change. There are
numerous properties available in CSS, such as color, font-size, background, margin etc
Value: The value assigned to the property defines how you want to change the appearance of the
selected element. For example, for the color property, the value could be blue, #FF0000
(hexadecimal color), rgb(255, 0, 0) (RGB color), etc.

Declaration: Each individual property-value pair within the declaration block is called a declaration.
Declarations are separated by semicolons.

In the above example the selector is element h3, property is color and blueviolet is value. It sets the color
of h3 text to blueviolet.
Below are some most used properties
color: Sets the text color of an element.

background-color: Sets the background color of an element.

font-family: Specifies the font family used for text content.

font-size: Sets the size of the font.


Swan Coaching Center Web development Course

font-weight: Defines the boldness of the font.

text-align: Aligns the text content horizontally within its container (e.g., left, center, right).

text-decoration: Specifies text decorations like underline, overline, or line-through.

line-height: Sets the height of lines within a block of text.

background-image: Specifies an image as the background of an element.

padding: Defines the space between the element's content and its border.

margin: Sets the space between elements, creating gaps and spacing between them.

border: Defines the border style, width, and color around an element.

width and height: Sets the width and height of an element.

display: Controls the layout behavior of an element (e.g., block, inline, flex).

BOX Model in CSS


The box model is a fundamental concept in CSS that defines the layout and sizing of elements on a web
page. It describes how an element's content, padding, border, and margin are structured and affect the total
space an element occupies. Understanding the box model is crucial for accurately positioning and styling
elements within a web layout.

Border
Padding Padding

Content Content

Margin

Figure 1: Box Model

The CSS box model consists of four main parts:

1. Content: The actual content of the HTML element, such as text, images, or other nested elements. The content
area's dimensions are specified using the `width` and `height` properties.

2. Padding: The space between the content and the element's border. Padding adds extra space around the content.
Padding's size is determined by the `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties.

3. Border: The line that surrounds the content and padding of the element. The border can have a set width, style,
and color, specified with the `border-width`, `border-style`, and `border-color` properties, respectively.

4. Margin: The transparent space surrounding the element, creating separation between adjacent elements. Margins
are specified using the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties.

Above is the visual representation of the box model:

The total width and height of an element (including content, padding, border, and margin) can be calculated using
the following formula:
Swan Coaching Center Web development Course

Total Width = width + padding-left + padding-right + border-left-width + border-right-width + margin-left +


margin-right

Total Height = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top +


margin-bottom

Perform the following task.


• Create a html file and add boilerplate code.
• Add a div tag and set its id as parent
• Set the background of parent div to black and border as “2px solid brown”
• Inside parent div add heading 1 as “This is Heading”
• Align heading 1 to center and set its color to white and text-decoration to underline
• Add a paragraph tag and write Lorem*2 inside it and press tab key from keyboard to generate
random text.
• Style the paragraph tag as
color:white;
font-size:8px;
font-family:'Lucida Sans';
line-height: 20px;
padding: 10px;
• Add a margin to parent div of 10px and observe the result

You might also like