[go: up one dir, main page]
Scribd
Upload
71 views24 pages

CSS Basics: Naukri UI

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles that are applied to HTML elements. There are three ways to include CSS - external stylesheets, internal stylesheets, and inline styles. An external stylesheet enables changing the appearance of all pages on a website by editing a single CSS file linked via the <link> tag. CSS selectors like ID, class, and element selectors are used to target specific HTML elements for styling. CSS properties are used to style various elements like backgrounds, text, fonts, links, lists, and tables. The CSS box model controls the sizing and positioning of elements through properties that style the content, border, padding, margin, and outline

Uploaded by

Firstnaukri
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
71 views24 pages

CSS Basics: Naukri UI

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles that are applied to HTML elements. There are three ways to include CSS - external stylesheets, internal stylesheets, and inline styles. An external stylesheet enables changing the appearance of all pages on a website by editing a single CSS file linked via the <link> tag. CSS selectors like ID, class, and element selectors are used to target specific HTML elements for styling. CSS properties are used to style various elements like backgrounds, text, fonts, links, lists, and tables. The CSS box model controls the sizing and positioning of elements through properties that style the content, border, padding, margin, and outline

Uploaded by

Firstnaukri
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/ 24

CSS Basics

Naukri UI
CSS - Cascading Style Sheets
Saves a lot of work
CSS defines HOW HTML elements are to be displayed.
Styles Solved a Big Problem Development of large web sites, where fonts
and color information were added to every single page, became a long and
expensive process.
To solve this problem,created CSS. All formatting could be removed from
the HTML document, and stored in a separate CSS file. All browsers
support CSS today.
Ways to include CSS
External Stylesheet.
Internal Stylesheet.
Inline Styles.
External Stylesheet
External style sheets enable you to change the appearance and layout of
all the pages in a Web site Just by editing one single file!
Each page must link to the stylesheet using the <link> tag. The <link> tag
goes inside the head section.
For example:
<head>
<link rel=stylesheet type=text/css href=mystyle.css />
</head>
Internal Stylesheet
An internal style sheet should be used when a single document has a
unique style.
For example:
<style type=text/css>
hr {color:red}
p {margin-left:20px}
</style>
Inline Styles
To use inline styles you use the style attribute in the relevant tag.
The style attribute can contain any CSS property
For example:
<p style=color:red>Paragraph</p>
Syntax
h1{color:red;font-size:12px;}
h1=selector
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
CSS declarations always ends with a semicolon, and declaration groups
are surrounded by curly brackets
CSS Selectors
ID Selectors
Class Selectors
Element Selectors
ID Selectors
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined
with a #
For example:
CSS:
#para{color:red}
HTML:
<div id=para>Text Content</div>
Class Selectors
The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a .
For example:
CSS:
.classname{background:blue}
HTML:
<div class=classname>Text Content</div>
Element Selectors
The element selector is used to specify a style for a type elements.
For example:
CSS:
div{padding:10px}
HTML:
<div>Text Content</div>
CSS Styling
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
Styling Backgrounds
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Styling Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Styling Font
Font Family
Font Style
Font Size
Font-weight
Styling Lists
Set different list item markers for ordered lists.
Set different list item markers for unordered lists
Styling Tables
Table Borders
Table Width and Height
Table Text Alignment
Table Padding
Table Color
The CSS Box Model
Content
Border
Outline
Margin
Padding
The CSS Box Model - Content
The content of the box, where text and images appear.
The CSS Box Model - Border
A border that lies around the padding and content.
Border Style
Border Width
Border Color
Border - Individual sides
The CSS Box Model - Outline
An outline is a line that is drawn around elements, outside the border edge.
The outline properties specifies the style, color, and width of an outline.
The CSS Box Model - Margin
Clears an area around the border.
The margin does not have a background color.
The top, right, bottom, and left margin can be changed independently using
separate properties.
The CSS Box Model - Padding
The padding clears an area around the content (inside the border) of an
element.
The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently
using separate properties.
Grouping Selectors
To minimize the code, you can group selectors. Separate each selector
with a comma.
For example:
h1,h2,p { color:green; }

You might also like