CSS Basic Selector Style Examples
Basic Selector Styles
Lets see a few example of CSS selector styles that might be useful...
Set Up - First make a copy of the 2 files needed to get started - Get the the basic HTML file and the css style sheet template on this page.
h1 header style
Let's first look at how to style the basic <h1> tag
In your HTML file, place a header with whatever text you want like this, <h1>Header</h1>, directly after the body tag. Once you do this we will not touch the HTML...all header styles will be generated from the style sheet.
Add Style to h1 selector
Now one by one, copy and paste each variation of the h1 selector and view the results. Make sure you view these examples! - get used to the different combinations of : selector{ property:value;} and how the changes alter the presentation of the HTML.
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
}
..Text align left
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
text-align:left;
}
..change background color and font.
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
text-align:left;
background:#eee;
font-color:#003366;
}
..indent.
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
text-align:left;
background:#eee;
font-color:#003366;
text-indent:10px;
}
..width in pixels * Note how this has a centering effect - next we'll learn how to align th ewhole header left or right.
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
text-align:left;
background:#eee;
font-color:#003366;
text-indent:10px;
width:100px;
}
..set width with header aligned left
h1 {
font-family:arial;
font-size:18px;
border:1px solid #ddd;
text-align:left;
background:#eee;
font-color:#003366;
text-indent:10px;
width:100px;
}
Review the web building process: build web site free
Was this helpful? Leave a comment...
Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!