Scribd
Upload
14 views

CSS (Cascading Style Sheets)

The document provides information about creating a fashion store website in multiple steps. It describes creating a navbar, listing fashion options and sales, adding benefits and a footer. CSS is used to style elements and make the website visually appealing.

Uploaded by

Vani Siva
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

CSS (Cascading Style Sheets)

The document provides information about creating a fashion store website in multiple steps. It describes creating a navbar, listing fashion options and sales, adding benefits and a footer. CSS is used to style elements and make the website visually appealing.

Uploaded by

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

CSS (Cascading Style Sheets)

CSS is a style sheet language used to describe the presentation and visual
appearance of a web page written in HTML.
It allows you to define the layout, colors, fonts, and other visual aspects of the
HTML elements.

Let's make it simpler

HTML represents the skeleton of a web page (5 ft 10 inches, athletic built)


while CSS represents the design and appearance (wears spectacles, checked shirts,
always in shorts)
The webpage that we saw on the previous page had both HTML and CSS elements i.e.
with skeleton and beautification.
This webpage is same as previous one, but this has only HTML elements and not CSS
i.e. only skeleton and not beautification - check out the 'Output'

CSS Inline styling


So far, we have just focused on HTML.
We have our content on the page - however, we are yet to 'beautify' it.

Web developers use CSS to style the content on a web page.


It is used to modify font types, font sizes, colors, images, content position and a
lot more.

It is possible to write CSS code directly within HTML - this is known as CSS Inline
styles.
Review the following syntax

<p style='color: blue; font-size: 16px;'>Let us learn CSS!</p>


The paragraph above has a 'style' attribute
The style attribute has 2 declarations - color: blue and font-size: 16px

Task
In the index.html - make the following changes and check the change in output.

Update <h2> on line 7 as <h2 style='color: blue; font-size: 16px;'>


Update <ol> on line 9 as <ol style='color: blue; font-size: 16px;'>
Go ahead and experiment with color and font size options of your choice.
Click on 'Submit' to proceed.

__________________________________________________________________________
CSS Internal stylesheet
Inline styles were a quick way of beautifying HTML, but they are rarely used by Web
developers.
Can you think of any reasons?

If you want to style multiple elements (for example <section> or <h2> elements)
which should have the same format - you will need to go and style each section or
heading
Every time a new <section> or <h2> element is added - you will need to remember to
add the same style element to it as well
Instead of the above, we can create the style element inside the <head> element of
the HTML using the following syntax

<head>
<style>
h1 {
color: blue;
font-size: 16px;
}
</style>
</head>
Task
In the previous problem, we used the following inline styling.

<h2 style='color: blue; font-size: 16px;'>


<ol style='color: blue; font-size: 16px;'>
Let us convert the same into an internal stylesheet using the syntax above.

Add styling for the <h2> and the <ol> elements to the <head>
___________________________________________________________________________________
___________________

CSS External stylesheet


Instead of creating an internal stylesheet, web developers will normally separate
the CSS code into a separate file - an external stylesheet - and maintain the HTML
and CSS as separate files.

Why is this beneficial?

Reusability: With an external stylesheet, you can define styles once and apply them
to multiple HTML pages. This promotes consistency across your website, ensuring
that elements such as headers, paragraphs, and links look the same throughout

Efficiency: When using an external stylesheet, the CSS file is cached by the web
browser after the first request. Subsequent page loads do not require downloading
the CSS file again, resulting in faster page rendering

Collaboration: When working on a web project with multiple developers or designers,


using an external stylesheet allows for better collaboration. Different team
members can work on the CSS separately, without interfering with each other's HTML
files. This promotes parallel development and reduces the chances of code conflicts

Browser compatibility: You can use CSS vendor prefixes and feature detection
techniques within the external stylesheet to handle browser-specific
implementations
Task
In the previous problem, we created an internal stylesheet using the <style>
element inside the index.html file.
Do the following to create your external stylesheet

Copy only the contents of <style> block (except the style tag) from the index.html
file to style.css file to check the output
Delete the <style> block completely from the index.html file
Click on 'Submit' to proceed.

Pop Quiz
The following HTML code is trying to change the fontsize of the paragraph text, but
fails to do so.
Why?

<p fontsize="16px";>Why am I wrong?</p>

The following HTML code is trying to change the color of the heading, but fails to
do so.
Can you debug this error?

<head>
<style>
<h1 style="color:blue;">Why am I incorrect?</h1>
</style>
</head>

Recap
Awesome!

You are ~80% done with your learning on Web development using HTML & CSS for
beginners.
In this module - you got a basic introduction to CSS.

CSS can be written in-line, as an internal stylesheet within the html file as well
as an external stylesheet.
External stylesheets are the preferred method for today's web development practices
The external stylesheet code is stored in a file with a .css extension
An internal stylesheet is written using the <style> element inside the <head>
element of an HTML file

FASHION STORE PREVIEW


In this project, we will create an e-commerce website called "FASHION STORE" where
we will be showcasing different fashion options available at this store in an user-
friendly way and also we will be displaying information of our upcoming sales in a
well structured table. Along with that, we will add some description about benefits
of our FAHSION STORE to attract users and finally we will be creating an eye
pleasing footer to mark our copyrights.

Sounds like too much? Don't worry, we have divided this project into multiple steps
as shown below so that you can build this complete website without getting
confused.

Steps to build the complete project flawlessly:

Create the navbar


List the available fashion options
Create the shopping time banner
List our upcoming sales
List the benefits of FASHION STORE to attract our users
Create the footer to mark our copyrights
While following the above mentioned steps, in each step, we will first work only on
HTML part of it. Once the HTML code is completed then we will move to CSS part so
that things will be more clear.

Remember, the aim is to create a stunning webpage that you can be proud of. Let's
begin this exciting project and create an impressive website together!

1.<header>
<div class="NavBar">
<a href="" id="navbar-title">
FASHION STORE
</a>
</div>
</header>

FS COMMON CSS
After completing the HTML code for our navbar, we are now able to see a clickable
text but if you notice then this text has some default CSS properties like margin
and font family. So, first let's reset margin, padding and set a particular font-
family of our choice for all the elements throughout the website.

Note
For better understanding of CSS problems, always observe the changes in the web
page after adding a style to it instead of blindly following the mentioned steps to
add the style.

Task
In style.css file, do the following below line 1:

Set margin and padding to "0" and font family to "Arial, sans-serif" for all the
elements we are going to use using the universal selector of CSS
Now, let's give some common style to all the anchor tags we are going to use in our
website.

Using type selector for anchor tag, set its:

color to "black"
font-weight to "550"
text-decoration to "none" (It will remove the line under the text so that our text
will actually look like a text instead of looking like a link)

You might also like