Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
457 views

Css Introduction

CSS (Cascading Style Sheets) is used to style and lay out elements on an HTML page. There are three ways to add CSS styles: external style sheets, internal style sheets within <style> tags, and inline styles within HTML elements. CSS selectors like element, class, and ID selectors allow targeting specific elements by type, class, or ID to style them.

Uploaded by

api-295680421
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
457 views

Css Introduction

CSS (Cascading Style Sheets) is used to style and lay out elements on an HTML page. There are three ways to add CSS styles: external style sheets, internal style sheets within <style> tags, and inline styles within HTML elements. CSS selectors like element, class, and ID selectors allow targeting specific elements by type, class, or ID to style them.

Uploaded by

api-295680421
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

CSS Introduction

Cascading Style Sheets (CSS) is a style sheet language used for


describing the look and formatting of a document written in a
markup language.
In an HTML document you can create a rule to select different
elements and style them.
HTML should be used to define the content of the document.
tags like <center> and <font> are obsolete as of HTML 4.0
CSS should be used to define the style or layout of the document
when viewed in the browser.

CSS Syntax
A CSS rule consists of a selector and a declaration block.

The following example selects all <h1> tags and makes the content inside
red and centered.
h1 {/*selectorforheading1tags*/
color: red;/*maketheheadingsred#ff0000*/
textalign: center;/*centertheheadings*/
}

The element Selector


The element selector selects elements based on the element
name.
Example: You can select all <p> elements on a page like this
p {
textalign: center;
color: red;
}

The id Selector
The id selector uses the id of an HTML element in the page.
An id should be unique within the page, and is used to select a
single, unique element.
Example: You can select the element with id=unique
#unique {
textalign: center;
color: red;
}

The class Selector


The class selector uses the class attribute of an HTML element
in the page.
You can select all elements with the same class attribute and
style them.
Example: You can select the element with class=center_me
.center_me {
textalign: center;
color: red;
}

Adding CSS to an HTML Document


There are 3 ways to add CSS to your HTML
document.
1. External

Style Sheet

2. Internal

Style Sheet

3. Inline

Styles

1. External Style Sheet


You can create a separate file to contain all your CSS rules.
In your HTML document, you can then include a reference to the file in
the <head>section using the <link>tag.
You can share this style sheet with all your HTML documents.
Example:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

2. Internal Style Sheet


You may choose to include your CSS rules by creating an internal
style sheet.
This is useful for HTML documents that have a unique style.
You simply specify all your CSS rules with a <style>tag inside the
<head> of the document.
<head>
<style>
h1 {
color: maroon;
marginleft: 40px;
}
</style>
</head>

3. Inline Styles
If you want to add unique styling to a single element, you
can specify the CSS rules inline.
Simply use the style attribute and define all your CSS rules.
Examples:
<h1 style="color:blue;">
<img style="width:100px;height:100px"/>
<table style="width:100%">

CSS Text
Text Color
h1 {
color: #00ff00;
}
For simple colors you can use words like black, blue, red, orange etc. or
you can choose a color using a color picker such as:
http://www.w3schools.com/tags/ref_colorpicker.asp
Text Alignment
h1 {
textalign: center;/*center|right|justify*/
}
Text Shadow
h1 {
textshadow: 2px2px red;
}

CSS Font
In CSS, there are two types of font family names:
Generic family a group of fonts with a similar look (e.g. Serif,
Monospace)
Font Family a specific font family (e.g. Arial, Times New Roman)
The font-family property should hold several font family names as a
fallback system.
Start with the font you want, and end with a generic family. The browser
will choose your font based upon availability.
p {
fontfamily: "TimesNewRoman",Times,serif;
}

CSS Font Sizes and Styles


Font Style
#normal {
fontstyle: normal;/*normal|italic*/
}
Font Size with Pixels
h1 {
fontsize: 40px;
}
Font Size with Em (1 em is equal to the current font size)
h1 {
fontsize: 2.5em;
}

CSS Links
Links can be styled just like text
/*unvisitedlink*/
a:link {
color: #FF0000;
}

textdecoration: none;

/*visitedlink*/
a:visited {
color: #00FF00;
}
/*mouseoverlink*/
a:hover {
color: #FF00FF;
}

textdecoration: underline;

/*selectedlink themomentthelinkisclicked*/
a:active {
color: #0000FF;
}

CSS Background
You can change the background color of an HTML document or even use an image
for the background
Colors can be specified in a few different ways:
body {
backgroundcolor: #FF0000;/*HEXvalue*/
}
body {
backgroundcolor: rgb(255,0,0);/*RGBvalue*/
}
body {
backgroundcolor: red;/*name*/
}
You can also use an image
body {
backgroundimage: url("background.jpg");
}

CSS Lists
You can change the list item marker using the list-style-type
property.
ul {
liststyletype: circle;/*circle|square*/
}
ol {
liststyletype: upperroman;/*upperroman|loweralpha*/
}

You can even use an image as a list item marker


ul {
liststyleimage: url('marker.jpg');
}

CSS Tables
You can specify a border using the border property
table,th,td {
border: 1pxsolidblack;
}
Choose between single border or separated with the border-collapse property.
table {
bordercollapse: collapse;
}
Change the height and width:
table {
width: 100%;
}
th {
height: 50px;
}

CSS Tables continued


Horizontal Alignment can be set using the text-align property
th {
textalign: left;
}
Vertical Alignment can be set using the vertical-align property
td {
height: 50px;
verticalalign: bottom;
}
You can control the space between the border and the content inside the <td> or
<th> elements using the padding property.
td {
padding: 15px;
}

CSS Images
The height and width properties are used to set the height and width of an
element.
img {
height: 100px;
width: 50px;
}

The float property can be used to wrap text around images.


img {
float: right;
margin: 10px;
}

You can use the clear property to control the behavior of floating elements.
div {
clear: left;
}

You might also like