CSS Fundamentals: A Comprehensive Guide to Cascading Style Sheets, Summaries of Computer Programming

A comprehensive introduction to css (cascading style sheets), covering its purpose, benefits, and syntax. It explains how css solves the problem of repetitive styling in html, saves time by allowing centralized style definitions, and offers more detailed attributes for controlling the look and feel of a website. The document also covers css selectors, different ways to add css to html pages (inline, internal, and external), and various css styling properties such as font, lists, tables, background, border, padding, and margin. Additionally, it touches on css pseudo-classes, providing a foundational understanding of css for web development.

Typology: Summaries

2024/2025

Available from 12/06/2025

pranav-kamble-3
pranav-kamble-3 🇮🇳

2 documents

1 / 73

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is
used to describe the look and formatting of a document written in markup
language. It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces. It can also be used
with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile
applications.
What does CSS do
oYou can add new looks to your old HTML documents.
oYou can completely change the look of your website with only a few
changes in CSS code.
Why use CSS
These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border
and size had to be repeated on every web page. This was a very long process.
For example: If you are developing a large website where fonts and color
information are added on every single page, it will be become a long and
expensive process. CSS was created to solve this problem. It was a W3C
recommendation.
Backward Skip 10sPlay VideoForward Skip 10s
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change
the entire website by changing just one file.
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a
pf2b
pf2c
pf2d
pf2e
pf2f
pf30
pf31
pf32
pf33
pf34
pf35
pf36
pf37
pf38
pf39
pf3a
pf3b
pf3c
pf3d
pf3e
pf3f
pf40
pf41
pf42
pf43
pf44
pf45
pf46
pf47
pf48
pf49

Partial preview of the text

Download CSS Fundamentals: A Comprehensive Guide to Cascading Style Sheets and more Summaries Computer Programming in PDF only on Docsity!

What is CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is

used to describe the look and formatting of a document written in markup

language. It provides an additional feature to HTML. It is generally used with

HTML to change the style of web pages and user interfaces. It can also be used

with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user

interfaces for web applications and user interfaces for many mobile

applications.

What does CSS do

o You can add new looks to your old HTML documents.

o You can completely change the look of your website with only a few

changes in CSS code.

Why use CSS

These are the three major benefits of CSS:

  1. Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border

and size had to be repeated on every web page. This was a very long process.

For example: If you are developing a large website where fonts and color

information are added on every single page, it will be become a long and

expensive process. CSS was created to solve this problem. It was a W3C

recommendation.

Backward Skip 10sPlay VideoForward Skip 10s

  1. Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change

the entire website by changing just one file.

  1. Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and

feel of the website.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be

any tag like , etc.

Declaration Block: The declaration block can contain one or more

declarations separated by a semicolon. For the above example, there are two

declarations:

1. color: yellow;

2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color,

border etc.

Value: Values are assigned to CSS properties. In the above example, value

"yellow" is assigned to color property.

1. Selector{Property1: value1; Property2: value2; ..........;}

Output:

Hello Javatpoint.com This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is

used with a period character. (full stop symbol) followed by the class name.

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

How to add CSS

CSS is added to HTML pages to format the document according to information

in the style sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS

2. Internal CSS

3. External CSS

  1. Inline CSS

Inline CSS is used to apply CSS on a single line or element.

inline css

Hello CSS

  1. Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all

the elements of the page. It is written inside the style tag within head section

of html.

Hello CSS

CSS Styling

CSS Font

CSS Font property is used to control the look of texts. By the use of CSS font

property you can change the text size, color, style and more. You have already

studied how to make text bold or underlined. Here, you will also know how to

resize your font using percentage.

These are some important font attributes:

  1. CSS Font color : This property is used to change the color of the text. (standalone attribute)
  2. CSS Font family : This property is used to change the face of the font.
  3. CSS Font size : This property is used to increase or decrease the size of the font.
  4. CSS Font style : This property is used to make the font bold, italic or oblique.
  5. CSS Font variant : This property creates a small-caps effect.
  6. CSS Font weight : This property is used to increase or decrease the boldness and lightness of the font.
  1. CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a

part of CSS fonts. It is used to change the color of the text.

there are three different formats to define a color:

o By a color name

o By hexadecimal value o By RGB

In the above example, we have defined all these formats.

  1. **





  2. **** This is heading 1 ****
  3. **** This is heading 2 ****
  4. This is a paragraph.



Output:

This is heading 1

This is heading 2

This is a paragraph.



Output:

This heading is shown in sans-serif.

This heading is shown in serif.

This paragraph is written in monospace.

  1. CSS Font Size

CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description xx-small used to display the extremely small text size. x-small used to display the extra small text size. small used to display small text size. medium used to display medium text size. large used to display large text size. x-large used to display extra large text size.

xx-large used to display extremely large text size. smaller used to display comparatively smaller text size. larger used to display comparatively larger text size. size in pixels or % used to set value in percentage or in pixels.



  1. **** Practice CSS font-size property ****


  2. **** This font size is extremely small.

  3. **** This font size is extra small

  4. **** This font size is small

  5. **** This font size is medium.

  6. **** This font size is large.

  7. **** This font size is extra large.

  8. **** This font size is extremely large.

  9. **** This font size is smaller.

  10. **** This font size is larger.

  11. **** This font size is set on 200%.

  12. **** This font size is 20 pixels.



Output:

This font size is extremely small. This font size is extra small

  1. body {
  2. font-size: 100%;
  3. }
  4. h2 { font-style: italic; }
  5. h3 { font-style: oblique; } 10.h4 { font-style: normal; } 11.}



  6. **** This heading is shown in italic font. ****
  7. **** This heading is shown in oblique font. ****
  8. **** This heading is shown in normal font. ****


Output:

This heading is shown in italic font.

This heading is shown in oblique font.

This heading is shown in normal font.

  1. CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It

may be normal and small-caps.

  1. **


  2. **
  3. h3 { font-variant: normal; }



  4. **** This heading is shown in normal font. ****
  5. This paragraph is shown in small font.



Output:

This heading is shown in normal font.

THIS PARAGRAPH IS SHOWN IN SMALL FONT.

  1. CSS Font Weight

CSS font weight property defines the weight of the font and specify that how

bold a font is. The possible values of font weight may be normal, bold, bolder,

lighter or number (100, 200..... upto 900).

  1. **


  2. **** This font is bold.

  3. **** This font is bolder.

  4. **** This font is lighter.

  5. **** This font is 100 weight.

  6. **** This font is 200 weight.

  7. **** This font is 300 weight.

  8. **** This font is 400 weight.

  9. **** This font is 500 weight.

  10. **** This font is 600 weight.

  11. **** This font is 700 weight.

list items is with alphabet and numbers, whereas in unordered lists, the list

items are marked using bullets.

We can style the lists using CSS. CSS list properties allow us to:

o Set the distance between the text and the marker in the list. o Specify an image for the marker instead of using the number or bullet point. o Control the marker appearance and shape. o Place the marker outside or inside the box that contains the list items. o Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

o list-style-type: This property is responsible for controlling the appearance and shape of the marker. o list-style-image: It sets an image for the marker instead of the number or a bullet point. o list-style-position: It specifies the position of the marker. o list-style: It is the shorthand property of the above properties. o marker-offset: It is used to specify the distance between the text and the marker. It is unsupported in IE6 or Netscape 7.

Let's understand the above properties in detail, along with an example of each.

Backward Skip 10sPlay VideoForward Skip 10s The list-style-type property

It allows us to change the default list type of marker to any other type such as

square, circle, roman numerals, Latin letters, and many more. By default, the

ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the

items in an unordered list are marked with round bullets (•).

If we set its value to none, it will remove the markers/bullets.

Note: The list also includes the default padding and margin. To remove this, we need to

add padding:0 and margin:0 to and .

The illustration of using this property is given as follows:

Example

1.



  1. **** CSS Lists ****




  2. Welcome to the javaTpoint.com


  3. Ordered Lists



  1. The list-style-position property

It represents whether the appearing of the marker is inside or outside of the

box containing the bullet points. It includes two values.

inside: It means that the bullet points will be in the list item. In this, if the text

goes on the second line, then the text will be wrap under the marker.

outside: It represents that the bullet points will be outside the list item. It is

the default value.

The following example explains it more clearly.

Example

1.



  1. **** CSS Lists ****
  2. **
  3. list-style-type:disc;
  4. list-style-position:inside;
  5. }




  6. Welcome to the javaTpoint.com


  7. Ordered Lists


  8. **** INSIDE ****
  9. **** two ****
  10. **** three ****


  11. **** OUTSIDE ****
  12. **** two ****
  13. **** three ****


  14. Unordered lists


  15. **** INSIDE ****
  16. **** two ****
  17. **** three ****


  18. **** INSIDE ****
  19. **** two ****
  20. **** three ****