Scribd
Upload
10 views

css 1

CSS (Cascading Style Sheets) is essential for web development, allowing control over the layout and appearance of web pages. It enables the creation of visually appealing websites, facilitates web design careers, and simplifies learning related technologies. The document covers CSS syntax, selectors, inclusion methods, and color specifications using hex codes and RGB values.

Uploaded by

rabinasubedi789
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
10 views

css 1

CSS (Cascading Style Sheets) is essential for web development, allowing control over the layout and appearance of web pages. It enables the creation of visually appealing websites, facilitates web design careers, and simplifies learning related technologies. The document covers CSS syntax, selectors, inclusion methods, and color specifications using hex codes and RGB values.

Uploaded by

rabinasubedi789
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/ 6

1.

CSS​ stands for ​C​ascading ​S​tyle ​S​heets


2. CSS s​ aves a lot of work​. It can control the layout of multiple web pages all at once
3. CSS​ is used to control the style of a web document in a simple and easy way

CSS is a MUST for students and working professionals to become a great


Software Engineer specially when they are working in Web Development Domain. I
will list down some of the key advantages of learning CSS:

● Create Stunning Web site​ - CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs,variations in display for different devices and
screen sizes as well as a variety of other effects.

● Become a web designer​ - If you want to start a carrer as a professional web


designer, HTML and CSS designing is a must skill.

● Control web​ - CSS is easy to learn and understand but it provides powerful control
over the presentation of an HTML document. Most commonly, CSS is combined with
the markup languages HTML or XHTML.

● Learn other languages​ - Once you understands the basic of HTML and CSS then
other related technologies like javascript, php, or angular are become easier to
understand.

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
● Selector​ − A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
● Property​ − A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be ​color​,
border​ etc.
● Value​ − Values are assigned to properties. For example, ​color​ property can
have value either ​red​ or ​#F1F1F1​ etc.

CSS Element Selector

The element selector selects HTML elements based on the element name.\

<head>

<style>

p{

text-align: center;

color: red;

</style>

</head>

<p>Every paragraph will be affected by the style.</p>

<p>Me too!</p>

<p>And me!</p>

</body>

ID Selectors
You can define style rules based on the ​id attribute of the elements. All the elements
having that ​id will be formatted according to the defined rule.The id of an element is
unique within a page, so the id selector is used to select one unique element!

#black {

color: black; }
This rule renders the content in black for every element with ​id attribute set to ​black
in our document.

h1#black {

color: black;

This rule renders the content in black for only <h1> elements with ​id attribute set to
black​.

CSS class Selector


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

To select elements with a specific class, write a period (.) character, followed by the
class name.

This rule renders the content in black for every element with class attribute set to
black​ in our document.

.black {

color: black;

This rule renders the content in black for only <h1> elements with class attribute set
to ​black.​

h1.black {

color: black;

CSS - Inclusion
There are three ways to associate styles with your HTML document. Most commonly
used methods are inline CSS and External CSS.

● External CSS
● Internal CSS
● Inline CSS
External CSS - The <link> Element
An external style sheet is a separate text file with ​.css extension. You define all the
Style rules within this text file and then you can include this file in any HTML
document using <link> element.

External styles are defined within the <link> element, inside the <head> section of an
HTML page:

Syntax:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

Internal CSS
You can put your CSS rules into an HTML document using the <style> element. This
tag is placed inside the <head>...</head> tags.

An internal style sheet may be used if one single HTML page has a unique style.

body {

background-color: red;

h1 {

color: maroon;

margin-left: 40px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
</body>

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

CSS Colors
CSS uses color values to specify a color.

These are used to set a color either for the foreground of an element (i.e., its text) or
else for the background of the element.

They can also be used to affect the color of borders and other decorative effects.

Color code can be represented by hexcode, rgb.

CSS Colors - Hex Codes


A hexadecimal is a 6 digit representation of a color. The first two digits(RR)
represent a red value, the next two are a green value(GG), and the last are the blue
value(BB).

using a hexadecimal value in the form:

#rrggbb

Whererr(red),gg(green) andbb(blue) are hexadecimal


values between 00 and ff
#ff0000 is displayed as red, because red is set to
its highest value (ff) and the others are set to
the lowest value (00).

CSS Colors - RGB Values


This color value is specified using the ​rgb( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.

rgb(red,green,blue)

You might also like